Top 15 HTML5 Interview Questions with Answer Keys

4 comments

HTML, CSS, JavaScript are probably the first technologies that a web designer would learn, which is why, it is very important to understand the basics in order to excel in the field. HTML5 have been the favorite language for interviewers to understand the basic knowledge of a person. Hence, we have decided to create a blog post to focus on the interview questions on HTML5 –

html5

  1. What is the difference between HTML5 and HTML?

Before we proceed further, it is important to understand the different between two. So, here it is –

HTML

HTML5
This is a Hypertext markup language. HTML5 is the newer extended version of the HTML
Doctype declaration in Html:-

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

 DOCTYPE declaration in Html5:-  

<!DOCTYPE html>
Audio and Video are not part of HTML. Audio and Videos are integral part of HTML5 e.g. <audio>..</audio> tag and <video>..</video> tags.
In the HTML, Not possible to draw shapes like circle, rectangle, triangle, polygon. In Html5, possible to draw shapes like circle, rectangle, triangle, and polygon.
In the HTML, Vector Graphics is possible with the help of technologies like VML, Silverlight, Flash etc In the HTML5, Vector graphics is an integral part of SVG and canvas.

 

  1. What is <!DOCTYPE>? Why is it necessary to use in HTML5?

The <!doctype> is initialised under the <html> tag. The <!doctype> is used to indicate type and version of HTML is used. This doesn’t have an ending tag and is not case sensitive. Also, The <!doctype> is important in older HTML versions because indicating the <!doctype> helped in the process of DTD (document type definition). Because HTML 4.0.1 was based on SGML (standard generalised markup language). It is not  same as HTML5 since not dependent on SGML and no data type definition is required.

  1. What are the new media elements in HTML5? Why is canvas used in HTML?

The new media elements include:

  • <audio> – For sounds, music, and other audio streams.
  • <video> – For video clips, movies or any other video streams.
  • <source> – To define the source of media elements that are defined inside the webpage as audio or video.
  • <track> – To define the tracks that are used in different media players such as mp3, mp4 players.
  • <canvas> – We can use canvas tag in HTML5  to add various elements together.
  1. New features of HTML5?HTML5 queries
  • Extensions to the JavaScript API such as geolocation and drag-and-drop as well for storage and caching.
  • It supports embedding graphics, audio, and video content via the new tags <canvas>, <audio>, and <video>.
  • New form control tags are <date>, <time>,  <calendar>, <search>, <email>, and <url>.
  • New semantic tags were also complement the logical structure of modern web applications. It includes the <main>, <article>, <nav>, <section>, <aside>, <header>,  and <footer> tags.
  1. What is the difference between span and div?

SPAN

DIV
Div (division) element is block-line. Span element is inline.
In the <div> tag, the rectangular object which cannot be broken over several lines. The <span> tag is used for applying and grouping styles to inline elements.
The div element is the most common method for laying out web pages using CSS and for identifying the structural sections of the document. Div tag can be placed inside the paragraph without affecting the appearance of the text. It is very easy to customize according to your needs.

 

  1. Which browsers support HTML5?

HTML5 features supported by the latest versions of Google Chrome, Mozilla Firefox, Apple Safari, and Opera browsers. 

  1.  Name two new tags included in the HTML 5

HTML5 version have <Video> and <Audio> are new tags. They are used as a replacement for Flash, Silverlight etc features. 

  1.  What are the two semantic tags in HTML5 version?

There are two semantic tags are <article> and <section>.

  • <section> tag – It defines sections in a document like chapters, headers, footers or other sections of the document.
  • <article>tag – It specifies the independent and self-contained content.Interview Selection
  1. What is <figure> in HTML5?

The <figure> tag represents a unit of self-contained flow content. 

Syntax-

<figure><figcaption>…………</figcaption>…………..</figure>

  1. What is the use of Canvas element?

The canvas feature in HTML5 helps to build graphs, charts, bypass Photoshop to create the 2D images and place them into the HTML5 code. 

  1.  What are the new FORM elements in HTML5?

These functions are –

  • <datalist> – It is use to specify a number of options for the input controls. 
  • <keygen> – It represents key-pair generator field. 
  • <output> – This represents the result of any scripting calculation. 
  1. Tell me two benefits of HTML5 Web Storage

Benefits of HTML5 Web Storage: 

  • It can store up to 10 MB of data. 
  • Web storage data can’t be transferred with the HTTP request. It helps for increasing the application’s performance. 
  1. What are the two types of Web Storage in HTML5?

Two storage types of HTML5: 

  • Session Storage 

It can store current session data only. It means in the session storage the stored data clear automatically when the browser closed.

  • Local Storage 

In local storage, when the current browser window is closed, data is not deleted automatically.

  1.  What is the Application Cache and why it is used in HTML5?

The Application Cache means that a web application is in cached state and one can access it without an internet connection.

Here, Some advantages of Application Cache:

  • Offline browsing – Web users can also use the offline application without internet.
  • Speed – Cached resources load quicker. 
  • Reduce the server load – Here, the web browser will only download updated resources from the server.
  1. Explain five new input types provided by HTML5 for forms?

Following are the new data types in HTML5:

  • Date: This feature offers the user to select a date.
  • Datetime-local: With this input type, the user can select a date and time without time zone.
  • Datetime: With this input type, the user can select a date and time with time zone.
  • Month: It allows the user to select a month and year.
  • Email: This input type used to select an e-mail address.

Successful future

Hope this article was helpful for you. Let us know if you have any feedback/suggestions for us in the comment section below.

Good Luck.

Happy Programming!

4 thoughts on “Top 15 HTML5 Interview Questions with Answer Keys”

  3. Thanks so much for providing individuals with an extraordinarily wonderful opportunity to read from this website. It can be very excellent and as well , stuffed with fun for me and my office fellow workers to search your website the equivalent of 3 times weekly to read through the fresh guides you have got. Not to mention, I’m also usually contented considering the eye-popping tips served by you. Certain two facts in this post are certainly the most beneficial we have all ever had.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *