HTML5, the most recent version of HTML, makes it easy to create and design content-rich, interactive web pages. Essentially, HTML5 defines content behavior and properties on a web page by applying a markup-based pattern within it.

Currently, HTML5 is one of the most prized web technologies. Therefore, now is the right time to learn HTML5. You can expect to earn a lot of money using HTML5 in the future if you have already implemented it. Therefore to help you ace your upcoming HTML interview round, I have compiled a list of HTML5 interview questions. Feel free to let me know how many of these you were able to answer correctly.

HTML5 is currently one of the highest-paying web technologies. As a result, now is an excellent time to learn HTML5. If you've already done so, you should be able to land a lucrative HTML5-based job.

HTML5 Interview Questions & Answers

1. List all the tags removed from HTML5.

Answer: In HTML5, the following tags were removed:

• <acronym>
• <applet>
• <basefont>
• <big>
• <bigcenter>
• <center>
• <dir>
• <frame>
• <frameset>
• <font>
• <noframes>
• <strike>
• <tt>
• <u>

2. Explain the Advantage and Disadvantages of using HTML5.

Answer: First, let's discuss the advantages HTML5 offers:

• Cleaner code and better semantics.
• Geolocation support.
• Consistency in coding a web page.
• Elegant and fancier forms reduced the demand for JavaScript.
• An offline application cache allows users to view a page even if they do not connect to the internet.
• Several new features make animations and front-end elements easier to code and display across different browsers.

Disadvantages:

• Several features are still under development and not yet stable.
• Due to licensing issues, the rich media is compressed into multiple formats to be compatible with most browsers.
• Modern browsers are the only ones that support HTML5. Some users do not use the latest version of their browser.

3. Is HTML5 backward compatible with old browsers?

Answer: No, old browsers can support some basic features, but the video and audio support, semantics, and so on are not backward compatible. Nevertheless, we can teach the older browsers how to handle unknown elements.

4. How to utilize a server-sent event in HTML5?

Answer: In most cases, server-sent events are helpful when we need long-term connections with the webserver. In such situations, the web page can maintain an open connection to the server, and the server can respond anytime without having to reconnect.

5. What are the various common lists for designing a web page in HTML5.

Answer: The following are common lists for designing a website:

• <dl> - Definition list
• <dir> - Directory list
• <menu> - Menu list
• <ol> - Ordered list
• <ul> - Unordered list

6. What are the most popular audio and video formats for embedding on an HTML5 web page?

Answer: The most popular audio formats are:

• MP3
• Ogg Vorbis
• WAV
• WebM

The most popular video formats are:

• MP4
• Ogg
• WebM

7. How will you add the autocomplete feature in a textbox?

Answer: The <datalist> tag specifies a list of predefined options for an <input> element. You can use it to add the autocomplete feature to a textbox. A drop-down list of available options will appear as the user enters data.

8. Why do you think the addition of drag-and-drop functionality in HTML5 is important? How will you make an image draggable in HTML5?

Answer: Drag-and-drop is an essential component of UI interaction. It is available in almost all modern user interfaces. The functionality makes copying, moving, and linking objects, such as images and links, extremely simple. To make an image draggable in HTML5, we must set the draggable image attribute true as follows.:

type = <img draggable = "true">

9. Explain the difference between div and span.

Answer: Div and span are both used for giving the output. While span displays output with display: inline, div gives output with display: block. In general, span is used to display elements one after another, i.e., in a line.

10. List the various techniques for optimizing website assets.

Answer: To optimize website assets, one must decrease:

• Download size, and
• The total number of HTTP requests that are made.

The following techniques can be used to optimize website assets:

• CDN hosting
• File compression
• File concatenation
• Offloading assets
• Re-organizing
• Refining code

11. List the significant goals of the HTML5 specification.

Answer: HTML5 aims to accomplish the following goals:

• More helpful semantic support for the web page structure by introducing new structural element tags.

• Delivering a stricter parsing standard for:

• Assuring consistent cross-browser behavior.
• Offering excellent backward compatibility with documents written using older HTML standards.
• Delivering a stricter parsing standard for reducing error handling.
• Effortless operation across multiple devices and platforms.
• For replacing HTML4, XHTML, and the HTML DOM Level 2.
• Provide interactive and rich content, such as videos and animations, without requiring plugins.

12. What are the differences between HTML5 and HTML?

Answer: The following are the differences between HTML and HTML5:

1. Attributes: HTML5 supports attributes of Async, Charset, and Ping. In HTML, it is not available.

2. Doctype Declaration: Doctype declarations in HTML are long and complicated. HTML5 makes the same process simple and easy.

3. Drag-and-Drop: HTML5 supports drag-and-drop, but HTML does not.

4. Drawing Geometric Shapes: HTML does not allow drawing shapes like circles, rectangles, and triangles. HTML5 allows drawing the same thing.

5. High-level Video and Audio Support: HTML does not include high-level audio and video support. HTML5 offers high-quality audio and video out-of-the-box.

6. In-text Use: HTML5 supports MathML and SVG in text. HTML cannot do the same.

7. JavaScript Support: HTML does not support running JavaScript within the web browser. Using Web Workers, HTML5 allows JavaScript to run in the background.

8. Mobile-ready: HTML is not mobile-ready. HTML5 specifications involve emphasis on mobile friendliness.

9. Storage: HTML does not support persistent storage. Temporary storage is limited to browser cache. Meanwhile, HTML5 allows permanent storage with an application cache, Web SQL database, and web storage.

10. Vector Graphics: HTML5 supports Canvas, SVG, and other virtual vector graphics. Implementing vector graphics in HTML requires using third-party plugins like Silverlight and VML.

13. List important HTML5 technologies.

Answer: HTML5 adds several new technologies that facilitate faster, better and more interactive web page development. HTML5 technologies include:

• CSS3
• Drag and Drop
• Web Sockets
• File API
• Web Messaging
• Geolocation API
• Microdata
• Offline Application
• Web Storage
• SSE (Server-Sent Events)
• Web Intents
• Canvas 2D
• Web Workers
• SVG (Scalable Vector Graphics)

14. What do you understand by web workers?

Answer: Web workers add multithreading capabilities to JavaScript. The scripts run in the background and do not require the web page to wait for their completion. Thus, a web worker can perform tasks in the background while a user interacts with the web page as usual. Web workers use thread-like message passing to achieve parallelism.

15. Explain the <figure> tag in HTML5.

Answer: In an HTML5 web page, the <figure> tag specifies self-contained content, such as diagrams and photos. While the content of the figure element is related to the main flow of the document, its position is independent of it, i.e., if removed, it will not affect the main flow.

16. What is a <meta> tag in HTML5?

Answer: The <meta> tag contains metadata about the HTML5 document. This metadata is machine-parsable. Meta elements are typically used to specify:

• Author name
• Keywords
• Page description

Metadata supplied by the <meta> tag is used by:

• Other web services.
• Search engines to identify keywords on a web page.
• Web browsers to know how to display web content or reload web pages.

Please Note: HTML5 introduces a new method for web designers and developers to control the viewport with the <meta> tag.

17. What are some useful APIs in HTML5?

Answer: HTML5 provides the following useful APIs:

• Battery status: indicates the battery status of the device.
• Clipboard: copy the contents to the clipboard.
• Drag and drop: easily drag and drop items in the app.
• Fetch: Fetch has made HTTP requests easier than it was with XMLHttpRequest.
• Geolocation: tells the device's location.
• Internalization: International formatting and string comparison.
• Screen orientation: Checks the device’s screen orientation.
• Web audio: Process audio on the client-side.
• Web sockets: real-time communication between server and client.

18. What is the use of URL input control in Web form 2.0?

Answer: This control accepts only URL values and is used for input fields that require a URL address. Other values, such as text input, will not be accepted. The following formats are acceptable: http://www.<webaddr> or http://<webaddr>.

19. What is the use of DateTime-local input control in Web form 2.0?

Answer: It shows date and time (year, month, day, hour, minute, second, a fraction of a second) encoded as per ISO 8601 without timezone information.

20. What are the server-sent events in HTML5?

Answer: Server-sent events are events that flow from a web server to a browser. The webserver can continuously push DOM events to the browser of a user. You should add an <eventsource> element to the document if you intend to use a server-sent event (SSE). The src attribute of this element specifies the HTTP connection location, which sends a data stream having the events.

For example:

<eventsource src = "/cgi-bin/myfile.cgi" />

21. What are web sockets?

Answer: An API or protocol that defines persistent socket connections between the web browser and the server defines web sockets. You can open a WebSocket connection by calling the Websocket constructor and passing the URL in the URL schema. URL schema can be ws, wss. Other subprotocols, such as soap, XMPP, etc., can be passed to the constructor as options. Websockets facilitate two-way communication and allow for proxy and firewall handling.

22. What do you understand by image maps in HTML5? How many types does it have?

Answer: Using an image map, users can open new web pages by clicking on images. Therefore, these are a combination of images and URLs. There are two types of image maps:

1. Client-side Image Map: Created using <area> and <map> elements. A map element contains map information, while an area element carries attributes for defining each section of the map.

2. Server-side Image Map: Created using the <usemap> attribute, named after the map.

23. Please explain Microdata in HTML5.

Answer: Microdata is a new simple semantic syntax used for the global attributes in HTML5. It adds the nested groups of name and value pairs to documents primarily based on the contents of web pages.

24. Show a copyright symbol on a web browser page.

Answer: We can add a copyright symbol by adding the HTML code (©), hex code (©), Unicode (U+000A9), or css code (\00A9). Example:

<p>Display &#169;</p>

25. What does a hyperlink mean? Can it be only text?

Answer: When a user clicks on a hyperlink, it moves them to another web page. Both a text and an image can use hyperlinks. To convert an image into a link, we use:

<a href = " "...</a>>

26. Why do we need the MathML element in HTML5?

Answer: MathML stands for Mathematical Markup Language. It is a form of XML used to describe the Math notation. MathML is a markup language used to display mathematical and scientific expressions over the webpages. For using the MathML element i.e. displaying a mathematical equation, we put it inside the <math> and </math> tags.

27. How will you add the autocomplete feature in a textbox?

Answer: The <datalist> tag specifies a list of predefined options for an <input> element. We can use it to add the autocomplete feature to a textbox. As the user enters data, a drop-down list of options will appear.

28. What do you understand by <!DOCTYPE>? Name the types of DOCTYPE available in HTML5.

Answer: HTML5 web pages always begin with the <!DOCTYPE> declaration. It lets the web browser know what information to display. The DOCTYPE declaration in HTML5 is concise and case-insensitive. HTML5 supports only one DOCTYPE:

• <!DOCTYPE html>

29. What will happen if the doctype is not specified in an HTML web page?

Answer: Unless the doctype is specified in an HTML web page, the web browser will not be able to interpret the new HTML5 tags.

30. Is it possible for a web page to have multiple and elements?

Answer: Yes, a webpage can have several <header> and <footer> elements. Both tags are specifically designed to serve their respective purposes regarding their parent sections.

Hence, not only must the page <body> have the <header> and <footer> tags, but so must every <article> and <section> elements. Even though a <footer> element might not always be necessary for every <article> and <section> tag, a <header> element is a must.

31. Please explain whether an <article> element can have <section> elements and vice-versa.

Answer: Yes, an <article> element can have <section> element(s) and a <section> element can also have <article> elements. For example, a user panel for a website can include several <section> elements, such as blog, analytics, payment options, news, etc.

To accommodate various types of articles, the *section> element for the blog can have multiple

elements. In addition, each of these elements can have two elements, one for comments and one for sharing section.

32. Please explain the Geolocation API in HTML5. How will you create a Geolocation object?

Answer: In HTML5, Geolocation API allows users to share their location with selected websites. J.S. can capture a user's latitude and longitude and transmit them to a backend server.

It enables location-aware features, such as finding local points of interest and seeing one's location on a map. We can create a new geolocation object by using the following code:

var geolocation = navigator.geolocation;

A geolocation object is a service object. It enables widgets to retrieve geographical information about a user's device. The Geolocation API works with a new property of the global navigator object, which most browsers and mobile devices support.

33. What is the correct usage of the following HTML5 semantic elements:

1. <article>
2. <footer>
3. <header>
4. <section>

Answer: The correct way to use the following HTML5 semantic elements is:

1. <article>: The HTML5 element provides a self-contained composition, being logically independent and capable of being created outside a web page without losing its significance. Examples for the <article> element are blog posts, news snippets, and release updates.

2. <footer>: The <footer> element is used to hold information meant to appear at the end of a particular section of a web page. It usually contains additional information about the section. An author bio and helpful links are suitable examples of this HTML5 element.

3. <header>: This essential HTML5 element provides introductory and navigation information about a particular section of the body of a web page. Author name, publication date, number of views, and table of contents are suitable examples for the <header> element.

4. <section>: <section> element in HTML5 serves as a flexible container for content having a common purpose or theme. Some of the best examples of this HTML5 element are the comments section, sharing section, and related articles section.

34. Which tag is used for representing the result of a calculation? Explain its attributes.

Answer: <output> tags are used to represent the result of a calculation. It has three attributes:

1. for - It represents the relationship among the elements used in the calculation and the result.
2. form - It represents the form(s) the output element belongs to.
3. name - It represents a name for the output element.

35. What do you understand by HTML5 Web Storage? Is it any better than Cookies?

Answer: Before HTML5, web pages stored data locally in a browser using cookies. With HTML5, Web Storage is introduced, which lets a webpage function similarly to cookies. Web Storage, however, is faster and more secure than cookies.

HTML5 Web Storage is faster because the data isn't included with each server request. Instead, it is requested when needed. A web page can only access the data that it stores itself, which is stored in name/value pairs.

HTML5 Web Storage differs from cookies in the following ways:

• Unlike cookies, HTML5 Web Storage does not transfer the data to the server.
• HTML5 Web Storage has a much larger storage limit than cookies, at least 5MB and max 10MB.

36. Explain the difference between Canvas and SVG elements.

Answer: The following are the differences between and elements:

• API Animation: Canvas does not support API animation. On the other hand, SVG is capable of API animation.

• Change Accommodation: The web browser remembers each drawn shape in SVG as an object. If the attributes of an SVG object change, the browser automatically redraws the shape.

Once the graphic is drawn in Canvas, the web browser forgets about it. In case of a change in the position of a Canvas graphic, you must redraw the entire scene. Canvas only supports script-based modifications, while SVG allows both Script and CSS-based modifications.

• Definition: SVG stands for Scalable Vector Graphics. It offers several methods for drawing bitmap images, boxes, circles, paths, and text.

It is a language for describing 2D graphics, with the <svg> element serving as a container for SVG graphics. Using J.S. Canvas, users can draw 2D graphics on the fly.

• Dependency: SVG does not depend on the resolution, while Canvas does.

• How is it handled?: As SVG is XML-based, meaning that each element is available within the SVG DOM. For an element, you can attach several J.S. event handlers. Meanwhile, the canvas is rendered pixel by pixel, i.e., it is pixel-based. <Canvas> elements do not support event handlers.

• Ideal for: Canvas is suitable for small rendering areas and games graphics, whereas SVG is best for large rendering areas and printing with high-quality at any resolution.

• Scalability: Canvas has poor scalability. However, SVG is more scalable.

37. What are the drawbacks of cookies?

Answer: The most important disadvantage of cookies is their lack of privacy, as they keep track of all the websites a user visits, and any third party can access the information they collect. Cybercriminals or malicious persons could use this to access confidential information like passwords or credit card numbers.

38. Explain the various new tags introduced by HTML5 in Media Elements.

Answer: HTML5 introduces five new tags in Media Elements:

1. <audio>: It eliminates the need for additional plugins for playing audio content like audio streams and music.
2. <embed>: It embeds an external application or content.
3. <source>: It adds multimedia resources like audio, picture, and video.
4. <track>: It adds caption files or subtitles while the multimedia file is playing.
5. <video>: It adds video content like embedded video content, movie clips, and videos.

39. Please explain the various formatting tags in HTML5.

Answer: There are 12 formatting tags in HTML5:

• <b> - For making the text bold.
• <big> - For increasing the font size of the text by one unit.
• <del> - To display the deleted text.
• <em> - For making the text italic with added semantics importance.
• <i> - To make the text italic.
• <ins> - For displaying the added text.
• <mark> - For highlighting the text.
• <small> - To decrease the font size of the text by one unit.
• <strong> - For telling the browser that the text is important.
• <sub> - For making the text a subscript.
• <sup> - To make the text a superscript.
• <u> - For underlining the text.

HTML5 formatting tags are divided into two categories:

1. Logical tags: They are used to add logic or semantic value to the text.
2. Physical tags: Add visual appeal to the text.

40. Please explain localStorage and sessionStorage.

Answer: LocalStorage and sessionStorage are both scoped to the document origin. Documents with different origins will never share objects. SessionStorage is also scoped on a per-window basis, unlike localStorage.

Two browser tabs displaying documents from the same origin, for example, will both have separate sessionStorage data, i.e., scripts running in one browser tab will not read or overwrite data written by scripts in the other. The same holds even if both browser tabs are visiting the same page and running the same script.

Based on the scope and the lifetime, the localStorage differs from the sessionStorage. Data stored via localStorage is permanent, i.e., it does not expire and remains stored on the computer until:

• A web app deletes it, or
• The user requests the browser to delete it.

On the other hand, data stored via sessionStorage gets deleted when the window or tab about it is closed. The duration of sessionStorage matches that of the top-level window or browser tab containing the script that stored the data.

41. What do you understand by HTML tags? How many tags are required to create a web page in HTML5?

Answer: HTML tags consist of a set of characters enclosed within angular braces (<> or </>) that develop a formatted command for a web page. HTML5 tags have the following general syntax:

<tag>.….</tag>

Tags provide instructions to the browser about what to display and how to display it. HTML5 requires a minimum of three tags:

• <head>
• <body>
• <html>

42. Enumerate some of the most important new features in HTML5.

Answer: HTML5 brings the following new features:

• Multi-device support
• Web workers
• Better error handling
• JavaScript API extensions, such as caching, drag-and-drop, geolocation, and storage.
• New Attributes for better document structure, such as <article>, <bdi>, <figcaption>, and <meter>.
• New Form controls, including <calendar>, <email>, <search>, and <url>.
• New Parsing rules for enhancing flexibility.
• New Semantic tags for complementing the structural logic of modern web applications, such as <aside>, <header>, <main>, and <section>.
• Enhanced support for embedding audio, graphics, and video content via <audio>, <canvas>, and <video> tags.
• Support for Offline editing, Web SQL, and Protocol, and MIME handler registration.
• Standard features like that of CSS, DOM, HTML, and J.S. to reduce the requirement of external plugins.

43. How does an HTML specification differ from a web browser's implementation of the same?

Answer: An HTML specification, just like the HTML5 specification, defines a set of rules that all documents need to adhere to to be considered valid. In addition, the specification offers instructions on how web browsers should interpret and render valid documents.

When a web browser can handle valid documents according to specified rules, then it is considered to support the specification. Even though most major browsers support HTML5, no browser supports the HTML5 specification in its entirety.

Therefore, developers must confirm that the aspects of the specification they use will be supported by all web browsers on which they will display/deliver the content.

Thus, developers should still be cautious about cross-browser compatibility, despite HTML5's improved specifications. When users come across an incorrect HTML5 document, they must follow the HTML5 specification's rules.

Because invalid documents may contain any content, HTML5 specification is almost unable to accommodate all possibilities comprehensively. Therefore, web browsers are entirely responsible for handling malformed documents.

44. Please explain the new form input types in HTML5.

Answer: HTML5 adds 14 new types of form input:

1. Color - Select multiple colors using type = "color"
2. Date - Pick a date by using type = "date."
3. Datetime - Combination of date and time. Pick a date and time by using type = "datetime"
4. Datetime-local - Doesn't include the timezone. Pick a date and time by using type = "datetime-local."
5. Email - Enter one or more email addresses using type = "email."
6. Month - Pick a month by using type = "month."
7. Number - Inserts a numerical value with additional attributes like min and max. Enter one or many numerical values using type = "number."
8. Search - Allows searching queries by inputting text. Enter one or many search queries by using type = "search."
9. Tel - Allows different phone numbers. Each phone number is validated by the client-side. Enter a phone number by using type = "tel."
10. Placeholder - Displays a short hint in the input fields before entering a value. Write a short hint in the input field using type = "placeholder."
11. Range - Inserts a numerical value within a specific range. Enter a numerical value within a range using type = "range."
12. Time - Pick a time by using type = "time."
13. Url - URL input type used for the web address. Use one or more attributes using type = "url"
14. Week - Pick a week by using type = "week."

45. Briefly explain some of the most-used APIs in HTML5.

Answer: Here are the most-used APIs in HTML5:

• Canvas API - It lets you draw graphics via J.S. and the <canvas> element.
• Console API - It allows developers to perform various debugging tasks.
• Constraint Validation API - It helps in checking (validating) user-entered values into form controls before submitting these values to the server.
• Credential Management API - It enables a website to store and retrieve federated, public, and user key credentials. Simply put, it allows users to sign in without entering passwords.
• Drag and Drop API - It allows grabbing and dragging an HTML object with the cursor.
• Geolocation API - It lets users share their location details with web applications.
• History API - It grants access to the browser navigation history.
• Media API - A JavaScript API that allows interacting with the audio and video elements. Moreover, it provides the HTMLMediaElement programming interface.
• WebVTT API - WebVTT stands for Web Video Text Tracks Format. It provides access to the various text tracks available for an HTML5 video using the element.
• Web Storage API - It offers a faster and better mechanism to allows browsers to store key/value pairs.

46. Write HTML5 code to implement a <video> tag for embedding a video stored at https://code.coursesity.com/html5-interview-questions/sample_video.mp4. The video must have a width of 640 pixels and a height of 360 pixels. Also, provide the user with controls.

Answer: To implement the above, you can:

<video src="https://code.coursesity.com/html5-interview-questions/sample_video.mp4" width="640" height="360" controls></video>

The following is another way to implement the same (with a separate <source> tag inside the <video> element):

<video width="640" height="360" controls>
<source src="http://code.coursesity.com/html5-interview-questions/sample_video.mp4">
</video>

47. Write the HTML5 code for implementing a rectangular box using the canvas element.

Answer:

<!DOCTYPEhtml>
<html>
<head>
<title>HTML Canvas Example</title>
<style>
#acanvas
</style>
</head>
<body>
<canvas id = "acanvas" width = "640" height = "360"></canvas>
</body>
</html>

48. Write HTML5 code to demonstrate the use of Geolocation API.

Answer: Navigator.geolocation.get current position() is used by the Geolocation API to get a user's position and geographical coordinates, i.e. longitude and latitude. The following code example illustrates this:

<!DOCTYPEhtml>

<html>
<body>
<p>Click the My Location button to know your location.</p>
<button onClick="getLocation()"> My Location </button>
<p id="location"></p>
<script>
var x = document.getElementById("location");
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 + "<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>

49. Write HTML5 code for creating a hyperlink.

Answer:

<!DOCTYPEhtml>
<html>
<body>
<title> Hyperlink Example </title>
<h3> HTML Cheat Sheet </h3>
<a href = "https://code.coursesity.com/html-cheat-sheet"> Visit HTML Cheat Sheet </a>
</body>
</html>

50. Write HTML5 code to embed a video in a web page.

Answer:

<!DOCTYPEhtml>
<html>
<body>
<title> Video Embedding Example </title>
<video width = "640" height = "360" controls>
<source src = "videofile.mp4" type = "video/mp4>
</video>
</body>
</html>

---

If you have made it this far, then certainly you are willing to learn more about web development. Here are some more resources related to web development that we think will be useful to you.

• 15+ HTML Interview Questions & Answers [2021 Edition]
• 10 Best Web Design Courses - Learn Web Designing Online
• 20+ Top CSS Interview Questions & Answers You Should Know In 2021