Engineering, Design, Marketing, and More

HTML5 interview questions

The most popular questions

Use our complementary questions and answers to filter and hire the best. Questions crowdsourced by our clients, answers by Punch. We provide these complementary questions to help our clients more quickly create tests for potential hires at their organizations.

Get a question answered
Punch offers four divisions of services: design, engineering, staffing, and demand

Interview questions for your next interview

Question
What are some of the key new features in HTML5?
Answer
Key new features of HTML5 include:
  • Improved support for embedding graphics, audio, and video content via the new <canvas>, <audio>, and <video> tags.
  • Extensions to the JavaScript API such as geolocation and drag-and-drop as well for storage and caching.
  • Introduction of “web workers”.
  • Several new semantic tags were also added to complement the structural logic of modern web applications. These include the <main>, <nav>, <article>, <section>, <header>, <footer>, and <aside> tags.
  • New form controls, such as <calendar>, <date>, <time>, <email>, <url>, and <search>.
Question
What are “web workers”?
Answer
Web workers at long last bring multi-threading to JavaScript. A web worker is a script that runs in the background (i.e., in another thread) without the page needing to wait for it to complete. The user can continue to interact with the page while the web worker runs in the background. Workers utilize thread-like message passing to achieve parallelism.

Find developers today

Hire a Punch engineer

Punch offers four divisions of services: design, engineering, staffing, and demand. Our four divisions form the core of our People Forward Approach.

Contact us
Find developers today
Question
Is HTML5 backward compatible with old browsers?
Answer
Yes. HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. New features build on existing features and allow you to provide fallback content for older browsers.

It is suggested to detect support for individual HTML5 features using a few lines of JavaScript.
Question
Briefly describe the correct usage of the following HTML5 semantic elements: <header>, <article>, <section>, <footer>
Answer
The <header> element is used to contain introductory and navigational information about a section of the page. This can include the section heading, the author’s name, time and date of publication, table of contents, or other navigational information.

The <article> element is meant to house a self-contained composition that can logically be independently recreated outside of the page without losing it’s meaining. Individual blog posts or news stories are good examples.

The <section> element is a flexible container for holding content that shares a common informational theme or purpose.

The <footer> element is used to hold information that should appear at the end of a section of content and contain additional information about the section. Author’s name, copyright information, and related links are typical examples of such content.
Question
Can a <section> contain <article> elements? Can an <article> contain <section> elements?
Answer
The answer to both questions is yes; i.e., a <section> can contain <article> elements, and an <article> can contain <section> elements.

For example, a personal dashboard page might contain a <section> for social network interactions as well as a <section> for the latest news articles, the latter of which could contain several <article> elements.

Conversely, an <article> might contain a
at the end for reader comments.
Question
Can a web page contain multiple <header> elements? What about <footer> elements?
Answer
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.
Question
Describe the relationship between the <header> and <h1> tags in HTML5.
Answer
In previous specifications of HTML, only one <h1> element was typically present on a page, used for the heading of the entire page. HTML5 specifies that <h1> represents the top-level heading of a “section”, whether that be the page <body>, or an <article> or <section> element. In fact, every <header> element should at least contain an <h1> element. If there is no natural heading for the section, it is a good indication it should not use an <article> or <section> tag.
Question
What is HTML5 Web Storage?
Answer
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.
Question
What is the lifetime of local storage?
Answer
Local storage does not have a life time it will stay until either the user clear it from the browser or you remove it using JavaScript code.
Question
What is WebSQL?
Answer
WebSQL is a structured relational database at the client browser side. It’s a local RDBMS inside the browser on which you can fire SQL queries.

Find developers today

Hire a Punch engineer

Punch offers four divisions of services: design, engineering, staffing, and demand. Our four divisions form the core of our People Forward Approach.

Contact us
Find developers today
Question
What are custom attributes in HTML5?
Answer
A custom data attribute starts with data- and would be named based on your requirement. You are able to get the values of these attributes using JavaScript APIs or CSS in similar way as you get for standard attributes.
Question
What is Web Forms 2.0?
Answer
Web Forms 2.0 is an extension to the forms features found in HTML4. Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and remove a great deal of the need for tedious scripting and styling that was required in HTML4.
Question
What is the purpose of 'autofocus' attribute in HTML5?
Answer
This is a simple one-step pattern, easily programmed in JavaScript at the time of document load, automatically focus one particular form field.
Question
What are the drawbacks of cookies?
Answer
Cookies have following drawbacks:
  • Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data.
  • Cookies are included with every HTTP request, thereby sending data unencrypted over the internet.
  • Cookies are limited to about 4 KB of data. Not enough to store required data.
Question
What is Geolocation API in HTML?
Answer
HTML5 Geolocation API lets you share your location with your favorite web sites. A Javascript can capture your latitude and longitude and can be sent to backend web server and do fancy location-aware things like finding local businesses or showing your location on a map.

Today most of the browsers and mobile devices support Geolocation API. The geolocation APIs work with a new property of the global navigator object ie. Geolocation object which can be created as follows:var geolocation = navigator.geolocation;The geolocation object is a service object that allows widgets to retrieve information about the geographic location of the device.

Ask a question

Ask a question, and one of our engineers will answer it.

We keep our questions nice and simple to be useful for everyone, and we may not answer or publish every question.

Your number is stored privately and never shared.
By submitting a question, you agree to our terms.
Request sent. Thank you!
Send another one