HTML5 - Interview Questions and Answers

With HTML5, web pages can store data locally within the user’s browser.

Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for.

The data is stored in name/value pairs, and a web page can only access data stored by itself. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

The difference between localStorage and sessionStorage involves the lifetime and scope of the storage.

Data stored through localStorage is permanent: it does not expire and remains stored on the user’s computer until a web app deletes it or the user asks the browser to delete it. SessionStorage has the same lifetime as the top-level window or browser tab in which the script that stored it is running. When the window or tab is permanently closed, any data stored through sessionStorage is deleted.

Difference between HTML and HTML5 are given below:

The new tags in Media Elements in HTML5 are enlisted below:

• <audio>: Apply for multimedia contents like sounds, audio streams or music, embed audio content without the requirement of any additional plug-in like flash player.
• <video>: Apply for video content like video streams or movie clip, embed video content etc.
• <source>: Apply for multiple media resources in media elements, such as audio, video, picture etc.
• <embed>: Apply for an external application or embedded content (a plug-in).
• <track>: Apply for text tracks in the media elements such as video or audio. This tag is used for subtitles or caption files while the video media is playing.

A tag is a special content in HTML5, which is surrounded by an angle bracket (<,>). A slash (/) symbol is used to close the tag after completing the block.

<title> This is my Browser </title>

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.

The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.

No, HTML tags are not case sensitive.

This tag represents a section of the document intended for navigation.

The <svg> element is a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and even bitmap images.

SVG is a language for describing 2D graphics, but <canvas> allows you to draw 2D graphics on the fly using JavaScript.

SVG is XML-based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.

Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

The addition of web workers brings multithreading capability to JavaScript. These are scripts running in the background that doesn't necessitate the web page to wait for their completion.

Hence, a user can interact freely with the web page while a web worker runs in the background. In order to achieve parallelism, web workers leverage thread-like message passing.

HTML5 has a total of 12 formatting tags:

1. <b> - Used for making the text bold.
2. <big> - Used for increasing the font size of the text by one unit.
3. <del> - Used to display the deleted text.
4. <em> - Used for making the text italic with added semantics importance.
5. <i> - Used to make the text italic.
6. <ins> - Used for displaying the added text.
7. <mark> - Used for highlighting the text.
8. <small> - Used to decrease the font size of the text by one unit.
9. <strong> - Used for telling the browser that the text is important.
10. <sub> - Used for making the text a subscript.
11. <sup> - Used to make the text a superscript.
12. <u> - Used for underlining the text.

Note: HTML5 formatting tags are grouped into two categories:

1. Logical tags: Used for adding some logical or semantic value to the text.
2. Physical tags: Used for adding to the visual appearance to the text

A custom data attribute starts with data- and would be named based on your requirement. Following is the simple example−

<div class="example" data-subject="physics" data-level="complex">
   ...
</div>

Yes to both. In fact, both the <header> and <footer> tags are designed to serve their respective purposes in relation to whatever their parent “section” may be. So not only can the page <body> contain a header and a footer, but so can every <article> and <section> element. In fact, a <header> should be present for all of these, although a <footer> is not always necessary.

Microdata is a new simple semantic syntax, that is used to add the nested groups of name and value pair of data to documents, that are commonly based on the page content. Microdata is used for new global attributes.

Meta tags are used to provide useful information to our web pages.

Some of the tags include:

• Title: Provides a title to the web page.
• Style: Inserts some styles and CSS details to the web page.
• Link: Defines the relationship between one page to another page and an external source.

List is given below:

• Web Workers
• Web Storage
• SVG
• CSS3
• Server-Sent Events(SSE)
• Microdata
• Web Intents
• Web Sockets
• Offline Application
• Geolocation
• File API
• Web Messaging
• Drag and Drop
• Canvas 2D

Here is one simple implementation:

<video src="http://www.example.com/amazing_video.mp4" width="640" height="360" controls></video>

Alternatively, the source file may be indicated with a separate <source> tag inside the <video> element, as in:

<video width="640" height="360" controls>
  <source src="http://www.example.com/amazing_video.mp4">
</video>

HTML specifications such as HTML5 define a set of rules that a document must adhere to in order to be “valid” according to that specification. In addition, a specification provides instructions on how a browser must interpret and render such a document.

A browser is said to “support” a specification if it handles valid documents according to the rules of the specification. As of yet, no browser supports all aspects of the HTML5 specification (although all of the major browser support most of it), and as a result, it is necessary for the developer to confirm whether the aspect they are making use of will be supported by all of the browsers on which they hope to display their content. This is why cross-browser support continues to be a headache for developers, despite the improved specificiations.

In addition, while HTML5 defines some rules to follow for an invalid HTML5 document (i.e., one that contains syntactical errors), invalid documents may contain anything, and it is impossible for the specification to handle all possibilities comprehensively. Thus, many decisions about how to handle malformed documents are left up to the browser.

The common lists to design a web page include:

• Directory list
• Definition list
• Ordered list
• Menu list
• Unordered list

Formats of video and audio that are used for embedding on the web page are given below:

• Video: MPEG4, Ogg, WebM.
• Audio: WAV, Ogg Vorbis, MP3.

HTML5 provides support for Canvas, SVG, and other virtual vector graphics. Implementing vector graphics in HTML is only possible using third-party plugins like Silverlight and VML.

Both div and span are used for giving out the output. While span gives the output with display: inline, div gives output with display: block. Typically, span is used when there is the need to display the elements one after the other, i.e., in a line.

The HTML5 introduces the following 14 new form input types:

1. Color - Select multiple colors using type = "color"
2. Date - Pick a date by using type = "date."
3. Datetime - Combination of date and time. Pick a date and time by using type = "datetime"
4. Datetime-local - This doesn't include the timezone. Pick a date and time by using type = "datetime-local."
5. Email - Enter one or more email addresses using type = "email."
6. Month - Pick a month by using type = "month."
7. Number - Inserts a numerical value with additional attributes like min and max. Enter one or many numerical values using type = "number."
8. Search - Allows searching queries by inputting text. Enter one or many search queries by using type = "search."
9. Tel - Allows different phone numbers. Each phone number is validated by the client-side. Enter a phone number by using type = "tel."
10. Placeholder - Displays a short hint in the input fields before entering a value. Write a short hint in the input field using type = "placeholder."
11. Range - Inserts a numerical value within a specific range. Enter a numerical value within a range using type = "range."
12. Time - Pick a time by using type = "time."
13. Url - URL input type used for the web address. Use one or more attributes using type = "url"
14. Week - Pick a week by using type = "week."