HTML5 Interview Questions

Prepare better with the best interview questions and answers, and walk away with top interview tips. These interview questions and answers will boost your core interview skills and help you perform better. Be smarter with every interview.

  • 4.8 Rating
  • 40 Question(s)
  • 45 Mins of Read
  • 9624 Reader(s)

Beginner

HTML stands for Hypertext markup language an is used to create electronic documents (called pages) that are displayed on the World Wide Web. Each page contains a series of connections to other pages called hyperlinks. Every web page you see on the Internet is written using one version of HTML code or another. Typically, HTML is used in combination with CSS to add styles to the page. An HTML page provides a basic structure of the page without which the browser would never know what to display on the page.

HTML is a language used for structuring and presenting content on the Web, consistently, across web browsers.

CSS helps you to keep the informational content of a document separate from the details of how to display it. The details of how to display the document are known as its style. We can keep the styles separate from the content so that we can avoid duplication, make maintenance easier and use the same content with different styles for different purposes.

Our website may have thousands of pages that look similar. Using CSS, we store the style information in common files that all the pages share. When a user visits a web page, the user’s browser loads the style information along with the content of the page. When a user prints a web page, you might provide different style information that makes the printed page easy to read.

Using HTML5 and CSS3 provides advantages to businesses that develop and deploy web content and web applications, to create refined and accurate web pages and web systems that operate across devices, operating systems and web browsers. Write once, run anywhere. The plethora of devices, operating systems and screen sizes present numerous design, functional and layout considerations and problems if standards are not adhered to. Some of the benefits of using HTML5 and CSS3 standards are explained below.

  1. Adhering to standards ensures that the website developed will be of high quality and thus will be compatible across devices and platforms. This not only increases the reach of the website but also ensures that the website can be accessed, in its true form, on multiple platforms, browsers and devices.
  2. If the page does not follow the specified standards, the page ranking will not be good. Therefore, following standards not only gives better performance but in addition to that, also ensures that the page ranking is high making sure the search engines can easily read and index the pages. HTML5’s new elements can be relied on when sites are being re-indexed on search engines, as specific markup features of HTML5 are of value when search engine results pages (SERPs) are being calculated.
  3. In a similar way that ‘apps’  can be used offline, without an internet connection, HTML5 supports local storage of web application code and content, through the offline application cache. This is a tremendous advantage to businesses, like publishers, who can provide an offline web experience for readers on the move. 
  4. Implementation of standards ensures that the website delivers the same experience to the visitors/users on every browser and platform.
  5. Future development of HTML5 applications may lead to better access to business intelligence as all devices that are compatible with HTML5 will have the same ability to collect, collate and use data using standard (cross-device) browser-based analytics tools.
  6. According to TechCrunch, nearly two-thirds of web video was already encoded for HTML5 in 2010, and one of the biggest benefits for marketers now is that HTML5 has native video support and can be directly built into the supporting browsers which allow faster, high-quality videos to be distributed.
  7. HTML5 supports Geolocation and now even Payments. These standards are used by developers to deliver content that makes sense to the users rather than making the same content available to everyone. Users can choose if they want to make their location information accessible to the website.

The <header> element represents a container for introductory content or a set of navigational links. A <header> element typically contains:

  • One or more heading elements (<h1> - <h6>)
  • Logo or icon
  • Authorship information
  • Page metadata
  • References to resources such as CSS or JS files.

We can have several <header> elements in one document but a <header> tag cannot be placed within a <footer>, <address> or another <header> element.

Semantic elements are the elements that clearly describe their meaning to both the browser and the developer. For example, <div> and <span> do not tell anything about their meaning, but <article>, <form> and <table> clearly defined what content they are fit to carry.

The <article> tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Potential sources for the <article> element:

  • Forum post
  • Blog post
  • News story
  • Comment

The HTML <section> element represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an HTML document. Typically, but not always, sections have a heading.

<section>
    <h1>Introduction</h1>
    <p>People have been catching fish for food since before recorded history...</p>
</section>

As an example, a navigation menu should be wrapped in a <nav> element, but a list of search results and a map display and its controls don't have specific elements, and could be put inside a <section>.

The HTML <aside> element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.

In the image above (source: MDN Web Docs), the <aside> element is used to define some text which needs to be shown to the user but the text is not directly related to the rest of the text.

The <video> element is used to add video to a web page. Here is an example.

<video width="400" height="200" autoplay controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>

The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads. The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

The autoplay attribute does not work in mobile devices like iPad and iPhone.

HTML5 supports <audio> tag which is used to embed sound content in an HTML document as follows.

<audio controls autoplay>
<source src = "/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" />
Your browser does not support the <audio> element.
</audio>

The controls attribute displays the controls for audio playback and the autoplay attribute auto-plays the audio file as soon as it is loaded on the page.

Most commonly used audio formats are ogg, mp3 and wav.

The only difference between an opening tag and a closing tag is the forward slash "/". For example, <p> is the opening tag for paragraph tag and the </p> is the closing tag. It is evident that the only difference is the forward slash in the closing tag.

Attributes are special properties that define how the HTML elements is going to behave. Each tag can also have additional attributes, which change the way the tag behaves or is displayed. For example, an <input> tag has a type attribute, which you can use to specify whether it’s a text field, checkbox, radio button or one of many more options.

Attributes are specified within the tag itself in the following manner.

<input type="text" placeholder="Enter your name"/>

In the above example, the type and placeholder are attributes, each one following by the values respectively.

Comments can be added in HTML by using the syntax <!-- comment here -->.

These will not be displayed in the browser, but they can be useful to leave notes for yourself and other developers as to what a section of HTML is for. The start of the comment is denoted by <!-- and the end is marked by -->. Anything in the middle will be completely ignored, even if it contains valid HTML.

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The following is a complete list of all HTML "block-level" elements (although "block-level" is not technically defined for elements that are new in HTML5).

<address>, <article>, <aside>, <blockquote>, <details>, <dialog>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <li>, <main>, <nav>, <ol>, <p>, <pre>, <section>, <table>, <ul>

Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content. Unlike the block-level elements, inline elements are drawn where they are defined and only take up space that is absolutely needed. The easiest way to understand how they work is to look at how text flows on a page. When a line of text gets to the end of the space available, it wraps onto the next line and happily keeps going. If you were to add more text onto an existing line of text, it will stay on the same line, as if it was all part of the same text to begin with.

Examples of elements that are inline by default: <span>, <b>, <strong>, <a>, <input>.

Initially, the Doctype declaration was used in HTML when it was defined as a language based on SGML, and later, on XML.

Since the presence of that declaration was in general a signal that the document author followed standard practices, that declaration was used in HTML5 to distinguish between a standards-compliant parsing mode and a so-called quirks parsing mode.

Whether you want to parse HTML files via an SGML or an XML parser, or simply make sure that your document gets parsed the same way across HTML5 processors, the doctype is a critical component of a quality HTML document.

each other and easy to read. In modern web development, lists are workhorse elements, frequently used for navigation as well as general content.

Lists are good from a structural point of view as they help create a well-structured, more accessible, easy-to-maintain document. They are also useful because they provide specialized elements to which you can attach CSS styles. Finally, semantically correct lists help visitors read your website, and they simplify maintenance when your pages need to be updated.

There are three list types in HTML:

Unordered list — used to group a set of related items in no particular order

Ordered list — used to group a set of related items in a specific order

Description list — used to display name/value pairs such as terms and definitions

Unordered (bulleted) lists are used when a set of items can be placed in any order. They are displayed using the <ul> tag. Here is an example.

<ul>
   <li>bread</li>
   <li>coffee beans</li>
   <li>milk</li>
   <li>butter</li>
</ul>

Ordered (numbered) lists are used to display a list of items that should be in a specific order. They are displayed using <ol> tag and the items are numbered in ascending order.

<ol>
   <li>Gather ingredients</li>
   <li>Mix ingredients together</li>
   <li>Place ingredients in a baking dish</li>
   <li>Bake in oven for an hour</li>
   <li>Remove from oven</li>
   <li>Allow to stand for ten minutes</li>
   <li>Serve</li>
</ol>

Ordered lists can be displayed with several sequencing options. The default in most browsers is decimal numbers, but there are others available.

Description lists (previously called definition lists, but renamed in HTML5) associate specific names and values within a list. Examples might be items in an ingredient list and their descriptions, article authors and brief bios, or competition winners and the years in which they won. You can have as many name-value groups as you like, but there must be at least one name and at least one value in each pair.

<dl>
   <dt>Name</dt>
   <dd>Value</dd>
   <dt>Name</dt>
   <dd>Value</dd>
   <dt>Name</dt>
   <dd>Value</dd>
</dl>

In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990.

The id attribute is used to uniquely identify an HTML element on the page. Once an id has been specified using the id attribute, it can be referenced to using the value of the id. Using this, CSS styles can be applied to the particular element without affecting any other part of the HTML document. Similarly, JS code can be used to make changes to the Node of the element using the id only.

There are a few rules you must follow to have a valid document that uses the id attribute anywhere in the document:

  • The ID must start with a letter (a-z or A-Z)
  • All subsequent characters can be letters, numbers (0-9), hyphens (-), underscores (_), colons (:), and periods (.).
  • Each ID must be unique within the document.

&amp; in HTML is used to display the ampersand character.

Advanced

ASCII was the first character encoding standard (also called character set). ASCII defined 128 different alphanumeric characters that could be used on the internet: numbers (0-9), English letters (A-Z), and some special characters like ! $ + - ( ) @ < > .

ANSI (Windows-1252) was the original Windows character set, with support for 256 different character codes.

ISO-8859-1 was the default character set for HTML 4. This character set also supported 256 different character codes. Because ANSI and ISO-8859-1 were so limited, HTML 4 also supported UTF-8.

UTF-8 (Unicode) covers almost all of the characters and symbols in the world. The default character encoding for HTML5 is UTF-8.

The character encoding can be set using the charset attribute of the meta tag. The meta tag is usually placed in the header of the document. Here is an HTML5 example.

<!DOCTYPE html>
<html>
<head>
…
<meta charset="UTF-8">
…
</head>
...
</html>

Here is a list of all the new semantic/structural elements introduced in HTML5.

<article> - Defines an article in a document

<aside> - Defines content aside from the page content

<bdi> - Isolates a part of text that might be formatted in a different direction from other text outside it

<details> - Defines additional details that the user can view or hide

<dialog> - Defines a dialog box or window

<figcaption> - Defines a caption for a <figure> element

<figure> - Defines self-contained content

<footer> - Defines a footer for a document or section

<header> - Defines a header for a document or section

<main> - Defines the main content of a document

<mark> - Defines marked/highlighted text

<meter> - Defines a scalar measurement within a known range (a gauge)

<nav> - Defines navigation links

<progress> - Represents the progress of a task

<rp> - Defines what to show in browsers that do not support ruby annotations

<rt> - Defines an explanation/pronunciation of characters (for East Asian typography)

<ruby> - Defines a ruby annotation (for East Asian typography)

<section> - Defines a section in a document

<summary> - Defines a visible heading for a <details> element

<time> - Defines a date/time

<wbr> - Defines a possible line-break

According to the HTML5 specifications, the section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A website's home page could be split into sections for an introduction, news items, and contact information. Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

Articles, on the other hand, are independent and self-contained pieces of content within a document that can be distributed independently. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Typically, you would use <section>s within an <article>, although, you can do just the opposite as well.

Semantically, we use <p> tags to indicate paragraphs. <span> is used to apply CSS style and/or class(es) to an arbitrary section of text and inline elements. Sometimes, when styling things — inline things — a <span> is great to give something to "hook" the css to, but it is otherwise an empty tag devoid of semantic or stylistic meaning.

  • autoplay - plays the audio as soon as it is loaded. The audio element does not wait for the rest of the page to be loaded or finish loading.
  • autobuffer - ensures that the audio will automatically begin buffering even if it's not set to automatically play.
  • controls - allows the user to control audio playback, including volume, seeking, and pause/resume playback.
  • loop - allows audio automatically seek back to the start after reaching at the end.
  • preload - specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.
  • src - specifies the URL of the audio file to be played.

No. <section>, <Section> and <SECTION> are all syntactically correct but generally, as a good practice, all the elements are written with lowercase letters.

Custom attributes are user-defined attributes that can be used on any HTML element tag. The values of these attributes can be retrieved using CSS and JS to add some specific styles or perform some actions based on the values. Here is an example of custom attributes on a div tag.

<div class="button" data-color="red" data-shadow="false">
    ...
</div>

In the above code snippet, there are two custom attributes defined on the <div> element, data-color and data-shadow. The values red and false, respectively, can be accessed and used for various purposes.

The HTML Output element (<output>) is a container element into which a site or app can inject the results of a calculation or the outcome of a user action. Consider the following code snippet.

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
   <input type="range" name="b" value="50" /> +
<input type="number" name="a" value="10" /> =
   <output name="result">60</output>
</form>

This form provides a slider whose value can range between 0 and 100. and an <input> element into which you can enter a second number. The two numbers are added together and the result is displayed in the <output> element each time the value of any of the controls changes.

The HTML5 Web Storage is a process, which stores the data locally on the user's browser.

Before the development of HTML5, Web Storage was done with Cookies. The Web Storage is more secure and faster than the Cookies. The data of Web Storage is not included with every server request, but it is used ONLY when asked for. This can be also used for storing large amounts of user's data on the browser, without affecting the website's performance.

The whole process is done within the browser, so there is no need to send data to the server. It stores the data in name/value pairs, and the data of web page are only accessible, which is stored by it. The storage limit is far larger (at least 5MB) rather than Cookies and information is never transferred to the server, so it is much faster in terms of website performance and loading.

By all means we can say that HTML5 Web Storage is better than Cookies.

There are two main web storage types, which can be used to store data locally, Local storage and Session storage.

  • Local storage: This stores data with no expiration date. The data in local storage would persist even when the user’s browser is closed and reopened.
  • Session storage: This is similar to local storage, except that it stores data for one session only. Once the user’s browser is closed, that session would be lost and the persisted data will be deleted from the browser.

HTML tag is just opening or closing entity. For example, <p> and </p> are called HTML tags

HTML element encompasses opening tag, closing tag, content (optional for content-less tags).  For example, <p>This is the content</p> : This complete thing is called a HTML element

The <script> tag is used to include external JavaScript files to the HTML document. It can also be used to write JavaScript code within the HTML document itself. The code is put between the opening and closing <script> tags and the code is executed as the page is loaded.

Following is a simple example of an HTML page that contains the JavaScript code in the <script> tag.

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>

In the above code, the code in red is the JavaScript code enclosed in the <script> tags.

The required attribute informs the browser that the form field with the attribute is mandatory. If the user has not provided a value, the browser will display a message to the user indicating that they need to fill in a value for the field. It also prevents a form from being submitted until a value is provided.

The HR element is defined to be element of block. It’s also being displayed in its own line like any other block element. Thus HR is a block element.

The BR element is defined to be element of special and that is defined to be inline. It’s also not being displayed in its own like like a block element, but just creating a line break. Thus BR is an inline element.

An anchor tag with the href value set to “mailto:<email-address>” can be used to launch the user’s email client. However, nothing may happen if no program is installed on the user’s device to handle the email. Here is an example.

<a href="mailto:you@youraddress.com">Send me an email</a>

In HTML, you can use the code &copy; to display a copyright symbol. You can also use &#169; which is slightly harder to remember.

Logical tags are used to tell the meaning of the enclosed text. The example of the logical tag is <strong> </strong> tag. When we enclosed text in strong tag then it tells the browser that the enclosed text is more important than other text.

Physical text are used to tell the browser that how to display the text enclosed in the physical tag. Some example of the physical tags are: <b>, <big>, <i>.

Canvas is an element of HTML5 which uses JavaScript to draw graphics on a web page. A canvas is a rectangular area. Each and every pixel of it can be controlled by us. There are several methods for drawing paths, boxes, circles, characters, and adding images by using canvas.

To add canvas tag to our HTML document we need id, width and height. Below is the example how to write a basic canvas tag to your HTML document.

<canvas id="myFirstCanvas" width="100" height="100"> </canvas>

HTML5 Geolocation is used to locate a user’s position in terms of Geo-coordinates. The HTML5 Geolocation API is used to get the geographical position of a user. Since this can compromise user privacy, the position is not available unless the user approves it.

Use the getCurrentPosition() method to get the user’s position.

The example below is a simple Geolocation example returning the latitude and longitude of the user’s position:

<script>
var x=document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
Else {
x.innerHTML="Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude +"
Longitude: " + position.coords.longitude;
}
</script>

Description

Prepare better with the best interview questions and answers, and walk away with top interview tips. These interview questions and answers will boost your core interview skills and help you perform better. Be smarter with every interview.
Levels