26 HTML5 Interview Questions and Answers - Freshers, Experienced

What are the new features provided in HTML5?

Some of the new features provided in HTML5 are:

1. It provides support for local storage
2. New form controls, like calendar, date, time, email, url, search
3. <canvas> element is provided to facilitate 2D drawing
4. The <video> and <audio> elements are provided for media playback
5. New content-specific elements are provided. For e.g. <article>, <header>, <footer>, <nav>, <section>

Tell us something about the new <canvas> element.

- The new <canvas> element provided by HTML5 aids in 2D drawing.
- It uses the tag <canvas>.
- This tag helps in drawing graphics through scripting usually JavaScript.

What are the various elements provided by HTML5 for media content?

<audio> and <video> elements are provided by HTML5 for media playback.
The tags used are:
1) <audio> - It defines sound content.
2) <video> - It defines a video or a movie.
3) <source> - This tag defines the multiple media resources for <video> and <audio>.
4) <embed> - It provides a container for an external application or interactive content.
5) <track> - It defines text tracks for <video> and <audio>.

What are the new Form elements made available in HTML5?

The new Form elements in HTML5 provide for a better functionality. The tags provided to carry out these functions are:

1) <datalist> - It specifies a list of options for input controls. These options are pre-defined.
2) <keygen> - This tag defines a key-pair generator field.
3) <output> - It defines the result of a calculation.

What are the various tags provided for better structuring in HTML5?

The various tags provided for better structuring in HTML 5 are:

1) <article> - This tag defines an article.
2) <aside> - It defines content other than the page content.
3) <bdi> - This tag isolates a part of text for formatting in a different direction from other text.
4) <command> - It defines a command button to be invoked by the user.
5) <details> - It defines additional details that can be viewed or hidden by the user.
6) <dialog> - It defines a dialog box.
7) <figure> - This tag specifies content like illustrations, diagrams, photos, code listings, etc.
8) <figcaption> - It is used to provide a caption for a <figure> element
9) <footer> - This tag defines a footer for a document or section
10) <header> - This tag is used to define a header for a document or section
11) <hgroup> - When there are multiple levels in a heading, it groups a set of <h1> to <h6> elements.

What are the another tags provided for better structuring in HTML5?

1) <mark> - It defines highlighted text.
2) <meter> - It defines a scalar measurement within a known range.
3) <nav> - It defines links for navigation.
4) <progress> - This tag exhibits the progress of a task.
5) <ruby> - It defines a ruby annotation for East Asian typography.
6) <rt> - It defines an explanation/pronunciation of characters for East Asian typography.
7) <rp> - This tag tells the system what to display in browsers that do not support ruby annotations.
8) <section> - It defines a section in a document.
9) <summary> - It provides a visible heading for a <details> element.
10) <time> - This tag defines a date/time.
11) <wbr> - This tag defines a line-break.

Which elements of HTML 4.01 are no more a part of HTML5?

Following elements of HTML 4.01 are no more a part of HTML 5:

What is SVG?

1. SVG is the abbreviation for Scalable Vector Graphics and is recommended by W3C.
2. It is used to define vector-based graphics for the Web.
3. The graphics are defined in XML format.
4. An important quality of SVG graphics is that their quality is maintained even when they are zoomed or resized.
5. All the element and attributes of SVG files can be animated.

What are the advantages of SVG over other image format like JPEG or GIF?

Following are the main advantages of using SVG over other image formats:

- It is possible to scale the SVG images.
- They can be created and edited with any text editor.
- The print quality of these image is high at any resolution.
- It is possible to zoom the SVG images without any degradation in the quality.
- SVG images can be searched, indexed, scripted, and compressed.

Differentiate between Canvas and SVG.

The table below shows some important differences between Canvas and SVG:

- Canvas is resolution dependent while SVG is not.
- Canvas does not provide any support for event handlers while SVG does.
- Canvas is suitable for graphic-intensive games while SVG is not suitable for gaming.
- Canvas is suitable for small rendering areas while SVG is suitable for large rendering areas like Google maps.

What is a Canvas? What is the default border size of a canvas?

- Canvas is a rectangular area on a HTML page, specified with the tag <canvas>.
- By default, a canvas has no border. To get a border on the canvas, a style attribute is required to be used.

Which methods are used to draw a straight line on a Canvas?

Following methods are used to draw a straight line on a Canvas:

1. moveTo(x,y) – It defines the starting co-ordinates of the line.
2. lineTo(x,y) – It defines the ending co-ordinates of the line.
3. The actual line is drawn with the help of a method like stroke()

What are gradients in Canvas used for? What are their different types?

Gradients in canvas are used to fill rectangles, circles, lines etc.
The gradients in Canvas are of two types:

1. createLinearGradient(x,y,x1,y1) – It creates a linear gradient
2. createRadialGradient(x,y,r,x1,y1,r1) – It creates a radial/circular gradient

Which method is used to draw an image on the canvas?

drawImage(image,x,y) method is used to draw an image on the canvas.

HTML5 provides drag and drop facility. How do you make an image draggable?

To make an image draggable, the draggable attribute is set to true:

Can HTML5 get the geographical position of a user?

- Yes, HTML5 can get the location of a user with the use of Geolocation API.
- Use getCurrentPosition() method to get the user’s current position.

What are the audio tags provided by HTML5?

HTML5 provides following audio tags:

<audio> - Defines sound content
<source> - Defines multiple media resources for media elements, such as <video> and <audio>

What are the new input types provided by HTML 5 for forms?

Following are the important, new input types for forms provided by HTML 5:

1. color – Used for fields that should contain colour.
2. date – Allows the user to select a date.
3. datetime - Allows the user to select a date and time (with time zone).
4. datetime-local - Allows the user to select a date and time (without time zone).
5. email - Used for input fields that should contain an e-mail address.
6. month - Allows the user to select a month and year.
7. number - Used for input fields that should contain a numeric value. Restrictions on type of numbers accepted can be set.
8. range - Used for input fields that should contain a value from a range of numbers. Restrictions on type of numbers accepted can be set here as well.
9. search - Used for search fields.
10. tel - Defines a field for entering a telephone number.
11. time - Allows the user to select a time.
12. url - Used for input fields that should contain a URL address.
13. week - Allows the user to select a week and year.

What is HTML5 Web Storage?

With HTML5, it is possible for the web pages to store the data locally in the user's browser. This web storage is much faster and secured than the cookies. Also, a larger amount of data can be stored without causing any adverse effect to the performance of the website.

The data here is not included with every server request. It is used ONLY when it is asked for. It is only that particular web page that can access the data stored by itself.

Differentiate between localStorage and sessionStorage objects.

- localStorage object stores the data without an expiry date while sessionStorage object stores the data only for one session.
- With localStorage object, data will not be deleted when the browser window is closed while the data is deleted when the browser window closes with sessionStorage objects.

What is the concept of Application Cache in HTML5? What are its advantages?

The Application Cache concept introduced by HTML5 means that a web application is cached, and accessible without an internet connection.

There are three advantages of Application Cache:

1. Offline browsing - Users can use the application when they're offline
2. Speed - Cached resources load faster
3. Reduced server load - The browser will only download updated/changed resources from the server

What is a Manifest file?

A Manifest file is a simple text file that tells the browser what to cache and what not to cache.

There are three sections of a Manifest file:

1) CACHE MANIFEST - Files listed here are cached after they are downloaded for the first time.
2) NETWORK - Files listed here require a connection to the server, and are never cached.
3) FALLBACK - Files listed here specify fallback pages if a page is inaccessible.

What is a Web Worker?

1. A web worker is a JavaScript which runs in the background. It exists in external files.
2. It is independent of other scripts and does not affect the performance of the page.
3. Web workers are usually used for CPU intensive tasks.

Which JavaScript objects are not accessible to web worker?

Following JavaScript objects are not accessible to web worker:

1. The window object
2. The document object
3. The parent object

What are the new attributes provided in HTML5 for <form>?

The new attributes provided in HTML5 for <form> are:

1) autocomplete
– It specifies if a form or input field should have autocomplete as on or off.
– If autocomplete is on, the browser is able to fill the values based on the values filled by the user earlier.
– autocomplete works for following input types: text, search, url, tel, email, password, datepickers, range, and color.

2) novalidate
- This is a boolean attribute.
- When present, it signifies that the form-data should not be validated when submitted.

What are the new attributes provided in HTML5 for <input>?

Following are the new attributes provided in HTML5 for <input>

1) autofocus:
- This is a Boolean attribute.
- When present, it means that an <input> element should automatically get focus when the page is loaded.

2) form:
- This attribute specifies one or more forms an <input> element belongs to.

3) formaction:
- This attribute specifies the URL of a file that will process the input control when the form is submitted.
- This attribute is used with type="submit" and type="image".
- It overrides the action attribute of the <form> element.

4) formenctype:
- This attribute specifies how the form-data should be encoded when submitting it to the server.
- It is used with type="submit" and type="image".
- It overrides the enctype attribute of the <form> element.

5) formmethod:
- It defines the HTTP method for sending form-data to the action URL.
- It is used with type="submit" and type="image".
- It overrides the method attribute of the <form> element.

6) formnovalidate:
- It is a boolean attribute.
- It specifies that the <input> element should not be validated when submitted.
- It is used with type="submit".
- It overrides the novalidate attribute of the <form> element.

7) formtarget:
- It specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
- It is used with type="submit" and type="image".

8) height and width:
- It specifies the height and width of an <input> element.
- It is used only with <input type="image">

9) list:
- It refers to a <datalist> element which contains pre-defined options for an <input> element.

10) min and max:
- It specifies the minimum and maximum value for an <input> element.
- It works with the following input types: number, range, date, datetime, datetime-local, month, time and week.

11) Multiple:
- It is a boolean attribute.
- It specifies that the user is allowed to enter more than one value in the <input> element.
- It works with the following input types: email and file.

12) pattern:
- It specifies a regular expression that the <input> element's value is checked against.
- It works with the following input types: text, search, url, tel, email, and password.

13) placeholder:
- It specifies a short hint that describes the expected value of an input field.
- It works with the following input types: text, search, url, tel, email, and password.

14) required:
- It is a boolean attribute.
- It specifies that an input field must be filled out before submitting the form.

15) step:
- It specifies the legal number intervals for an <input> element.
- It works with the following input types: number, range, date, datetime, datetime-local, month, time and week.