10 HTML5 Developer interview questions and answers

HTML5 is often used as a buzzword for modern web technologies—so it should come as no surprise that most front-end web developers will have it in their repertoire. Use this question to see if your prospective developer will take full advantage of the features that make HTML5 a core component of the modern web. Answers might include:

• The ability to run script as a background process without compromising page performance via web workers.
• New ways to divide up your content with semantic elements like the <header>, <footer>, <article>, and <section> tags.
• The ability to embed graphics, audio, and video content with the <canvas>, <audio>, and <video> tags.
• JavaScript API extensions like geolocation, drag-and-drop, local storage, and the Application Cache.
• Forms 2.0 controls like <time>, <date>, <calendar>, <email>, <url>, and <search>.

The latest versions of Google Chrome, Mozilla Firefox, Opera, Apple Safari, Internet Explorer, and Microsoft’s Edge all support HTML5 to varying extents. HTML5 is backwards compatible by design, allowing developers to create fallback content for older browsers. The more nuanced answer will also point out that not all browsers interpret HTML5 the same way, and not all the new features found within HTML5 have been adopted by all browsers. A developer must still check compatibility for each browser when choosing to use newer features.

HTML5’s new semantic elements exist to help HTML better reflect the type of content that actually appears on webpages. While you could stuff everything into <div> tags, it can be more useful for larger applications to define clear sections that can be mapped for displaying different types of content.

• The <header> element is used for navigation and introductory information about a page—things like the author’s name, date of publication, or the table of contents are often stored here.
• The <footer> element is often regarded as the best place to store copyright information, privacy policies, and website terms. It can also serve as a good place to incorporate things like the sitemap or additional links for SEO purposes.
• The <article> element generally houses content—individual blog posts, news articles, and other stand-alone pieces are contained here.
• The <section> element exists for design flexibility—it can be used to divide up content thematically into different sections of a webpage.

Web Forms 2.0 extends the form features of HTML4 to include a greater degree of semantic markup. Some of these key new features are described below.

• New type attributes were added to the <input> element, including “datetime,” “month,” “week,” “time,” and “url” among other useful inputs. Coders can now achieve greater control over the types of information that can be input into a web form without the hassle of writing additional code.
• The <output> element was added to simplify representing the result of a calculation or script.
• HTML5 added a new “placeholder” attribute that can be used in <input> and <textarea> elements to hint to the user what can be entered into the field.
• The “required” attribute was introduced to alleviate the need for client-side validation to handle cases where a user has neglected to fill in a mandatory entry field within a web form.

One possible solution is depicted below.

<canvas id="c" width="500" height="500"></canvas>

<script>
  var canvas = document.getElementById( "c" );
  var drawing_context = canvas.getContext( "2d" );
  drawing_context.fillStyle = "orange";
  drawing_context.fillRect( 20, 20, 300, 100 );
</script>

HTML5 Web Storage is a convenient alternative to cookies, which allows a webpage to store data locally within the user’s browser as name/value pairs. Web Storage is faster and more secure than cookies. It is also able to store more data, capping off at approximately 5MB. Data is only accessed as needed and information is never transferred to the server. While Web Storage is more secure than cookies, it is not encrypted and sensitive items like security tokens should never be stored there.

Data stored on a user’s browser via localStorage will remain on the user’s computer until they clean their browser or a web app deletes it. Data stored using sessionStorage is temporary, and will only remain until the top-level window or tab running the script is closed. It is worth noting that the scope of sessionStorage is confined to the window that it is operating within—opening multiple tabs displaying content from the same origin will create separate sessionStorage data that cannot be altered by scripts running in other tabs.

This question is a simple open-ended HTML test to give coders room for embellishments. While there are many ways to do this, one potential solution is depicted below.

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

Alternatively, here is a more straightforward approach.

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

The HTML5 Geolocation API allows users to share their location with a website. This is a useful feature that asks a user permission to share their latitude and longitude with the app to receive the benefits of location-aware features, such as the ability to present the landing page of the business closest to the user’s location.

This attribute is used to assess the state of a connection using the following four values:

• The value “0” indicates that the connection has not been established.
• The value “1” indicates that the connection is established and communication is possible.
• The value “2” indicates the closing handshake.
• The value “3” indicates a closed or blocked socket.