HTML5 Interview Questions

Let's see a list of top HTML5 interview questions and answers.

1. What is the canvas element in HTML5?

The <canvas> element is a container that is used to draw graphics on the web page using scripting language like JavaScript. It allows for dynamic and scriptable rendering of 2D shapes and bitmap images. There are several methods in canvas to draw paths, boxes, circles, text and add images. For Example:

  1. <canvas id="myCanvas1" width="300" height="100" style="border:2px solid;">    
  2. Your browser does not support the HTML5 canvas tag.    
  3. </canvas>    

More details.

2. What is SVG?

HTML SVG is used to describe the two-dimensional vector and vector/raster graphics. SVG images and their behaviors are defined in XML text files. So as XML files, you can create and edit an SVG image with the text editor. It is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X, Y coordinate system.

  1. <svg width="100" height="100">    
  2.  <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />    
  3. </svg>   

3. What are the different new form element types in HTML 5?

Following is a list of 10 frequently used new elements in HTML 5:

  • Color
  • Date
  • Datetime-local
  • Email
  • Time
  • Url
  • Range
  • Telephone
  • Number
  • Search

4. Is there any need to change the web browsers to support HTML5?

No. Almost all browsers (updated versions) support HTML 5. For example Chrome, Firefox, Opera, Safari, IE.

5. Which type of video formats are supported by HTML5?

HTML 5 supports three types of video format:

  • mp4
  • WebM
  • Ogg

6. Is audio tag supported in HTML 5?

Yes. It is used to add sound or music files on the web page. There are three supported file formats for HTML 5 audio tag.

  1. mp3
  2. WAV
  3. Ogg

Let's see the code to play mp3 file using HTML audio tag.

  1. <audio controls>    
  2.   <source src="koyal.mp3" type="audio/mpeg">    
  3. Your browser does not support the html audio tag.    
  4. </audio>    

Instead of koyal.mp3, you can pass any mp3 file name.

Read More

7. What is the difference between progress and meter tag?

The progress tag is used to represent the progress of the task only while the meter tag is used to measure data within a given range. More details.

8. What is the use of figure tag in HTML 5?

The figure tag is used to add a photo in the document on the web page. It is used to handle the group of diagrams, photos, code listing with some embedded content.

  1. <p>The Taj Mahal is widely recognized as "the jewel of Muslim art in India and one of the universally admired masterpieces of the world's heritage."</p>    
  2. <figure>    
  3.   <img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>    
  4. </figure>     

More details.

9. What is the use of figcaption tag in HTML 5?

The <figcaption> element is used to provide a caption to an image. It is an optional tag and can appear before or after the content within the <figure> tag. The <figcaption> element is used with <figure> element and it can be placed as the first or last child of the <figure> element.

  1. <figure>    
  2.   <img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>    
  3. <figcaption>Fig.1.1 - A front view of the great Taj Mahal in Agra.</figcaption>    
  4. </figure>      

More details.

10. What is button tag?

The button tag is used in HTML 5. It is used to create a clickable button within the HTML form on the web page. It is generally used to create a "submit" or "reset" button. Let's see the code to display the button.

  1. <button name="button" type="button">Click Here</button>    

More details.

11. What is the use of details and summary tag?

The details tag is used to specify some additional details on the web page. It can be viewed or hidden on demand. The summary tag is used with details tag. More details.

12. What is datalist tag?

The HTML 5 datalist tag provides an autocomplete feature on the form element. It facilitates users to choose the predefined options to the users to select data.

  1. <label>    
  2.  Enter your favorite cricket player: Press any character<br />    
  3.  <input type="text" id="favCktPlayer" list="CktPlayers">    
  4.  <datalist id="CktPlayers">    
  5.  <option value="Sachin Tendulkar">    
  6.  <option value="Brian Lara">    
  7.  <option value="Jacques Kallis">     
  8.  <option value="Ricky Ponting">     
  9.  <option value="Rahul Dravid">     
  10.  <option value="Shane Warne">     
  11.  <option value="Rohit Sharma">     
  12.  <option value="Donald Bradman">     
  13.  <option value="Saurav Ganguly ">     
  14.  <option value="AB diVilliers">     
  15.  <option value="Mahendra Singh Dhoni">     
  16.  <option value="Adam Gilchrist">    
  17.  </datalist>    
  18. </label>     

More details.

13. How are tags migrated from HTML4 to HTML5?

No. Typical HTML4 Typical HTML5
1) <div id="header"> <header>
2) <div id="menu"> <nav>
3) <div id="content"> <section>
4) <div id="post"> <article>
5) <div id="footer"> <footer>

Header and Footer Example

HTML 4 Header and Footer:

  1. <div id="header">  
  2.   <h1>Monday Times</h1>  
  3. </div>  
  4. .  
  5. .  
  6. .  
  7. <div id="footer">  
  8.   <p>&copy; JavaTpoint. All rights reserved.</p>  
  9. </div>  

HTML 5 Header and Footer:

  1. <header>  
  2.   <h1>Monday Times</h1>  
  3. </header>  
  4. .  
  5. .  
  6. .  
  7. <footer>  
  8.   <p>© JavaTpoint. All rights reserved.</p>  
  9. </footer>  

Menu Example

HTML 4 Menu:

  1. <div id="menu">  
  2.   <ul>  
  3.     <li>News</li>  
  4.     <li>Sports</li>  
  5.     <li>Weather</li>  
  6.   </ul>  
  7. </div>  

HTML 5 Menu:

  1. <nav>  
  2.   <ul>  
  3.     <li>News</li>  
  4.     <li>Sports</li>  
  5.     <li>Weather</li>  
  6.   </ul>  
  7. </nav>  

14. If I do not put &lt;!DOCTYPE html> will HTML 5 work?

No, the browser will not be able to identify that it is an HTML document and HTML 5 tags do not function properly..

15. What is the use of the required attribute in HTML5?

It forces a user to fill text on the text field or text area before submitting the form. It is used for form validation.

Example:

  1. Name: <input type="text" name="name" required>  

16. What are the new &lt;input&gt; types for form validation in HTML5?

The new input types for form validation are email, URL, number, tel, and date.

Example:

  1. <input type="email">