This article discusses the top HTML5 interview questions. We also included answers. As the latest and last major version of HTML, HTML5 facilitates creating and designing content-rich, interactive web pages. So these interview questions cover all aspects of the process.
In technical terms, HTML5 defines behaviors and properties of content on a web page by implementing a markup-based pattern to it. So how do you ace an interview on the subject? Let's dive into the questions and answers.
Top HTML5 Interview Questions And Answers
To help you win your upcoming HTML5-based job interview, here we are with our pick of the 50 best HTML5 interview questions:
Question: List the significant goals of the HTML5 specification.
Answer: Following are the most important goals of the HTML5 specification:
- Better semantic support for the web page structure with the introduction of new structural element tags
- Delivering a stricter parsing standard for:
- Ensuring consistent cross-browser behavior
- Offering excellent backward compatibility with documents written as per older HTML standards
- Simplifying error handling
- For replacing HTML4, XHTML, and the HTML DOM Level 2
- Offer interactive and rich content, such as videos and animation, without dependency on plugins
- Seamless operation across multiple devices and platforms
Question: Enumerate some of the most important new features in HTML5.
Answer: Some of the best new features brought by the HTML5 specification are:
- Better error handling
- Enhanced support for embedding audio, graphics, and video content via <audio>, <canvas>, and <video> tags
- Extensions for the JavaScript API, such as for caching, drag-and-drop, geolocation, and storage
- More markup for replacing scripting
- Multi-device support
- New:
- Attributes for better document structure, such as <article>, <bdi>, <figcaption>, and <meter>
- Form controls, including <calendar>, <email>, <search>, and <url>
- Parsing rules for enhancing flexibility
- Semantic tags for complementing the structural logic of modern web applications, such as <aside>, <header>, <main>, and <section>
- Standard features like that of CSS, DOM, HTML, and J.S. for reducing the requirement of external plugins
- Support for:
- Offline editing
- Protocol and MIME handler registration
- Web SQL
- Web workers
Question: What are the differences between HTML5 and HTML?
Answer: Following are the various differences between HTML and HTML5:
1. Attributes
Attributes of Async, charset, and ping are available in HTML5. The same is not available in HTML.
1. Doctype Declaration
HTML features a long and complicated doctype declaration. The same is simple and easy in HTML5.
2. Drag-and-Drop
While HTML5 provides support for the drag-and-drop effect, HTML has no provision for it.
3. Drawing Geometric Shapes
There is no way of drawing shapes like circles, rectangles, and triangles in HTML. The same can be drawn in HTML5.
4. High-level Video and Audio Support
High-level audio and video support isn't a part of the HTML specifications. HTML5 offers out-of-the-box high-level audio and video support.
5. In-text Use
MathML and SVG can be used in text in HTML5. The same is not possible in HTML.
6. JavaScript Support
HTML doesn't provide support for running J.S. within the web browser. HTML5 allows JavaScript to run in the background using Web Workers.
7. Mobile-ready
HTML is not mobile-ready. HTML5 specifications involve an emphasis on mobile-friendliness.
8. Storage
There is no persistent storage option available in HTML. Only the browser cache is used as temporary storage. HTML5 allows permanent storage with an application cache, Web SQL database, and web storage.
9. Vector Graphics
HTML5 provides support for Canvas, SVG, and other virtual vector graphics. Implementing vector graphics in HTML is only possible using third-party plugins like Silverlight and VML.
Question: What improvements does HTML5 include over previous versions?
Answer: HTML5 adds a number of new technologies to facilitate faster, better, and more interactive web page development. Important HTML5 technologies are:
- Canvas 2D
- CSS3
- Drag and Drop
- File API
- Geolocation API
- Microdata
- Offline Application
- SSE (Server-Sent Events)
- SVG (Scalable Vector Graphics)
- Web Intents
- Web Messaging
- Web Sockets
- Web Storage
- Web Workers
Question: What are web workers?
Answer: The addition of web workers brings multithreading capability to JavaScript. These are scripts running in the background that doesn't necessitate the web page to wait for their completion.
Hence, a user can interact freely with the web page while a web worker runs in the background. In order to achieve parallelism, web workers leverage thread-like message passing.
Question: What are HTML tags? How many tags are required to create a web page in HTML5?
Answer: A set of characters enclosed within angular braces (<> or </>) that develop a formatted command for a web page is called an HTML tag. The general syntax of an HTML5 tag is:
<tag>.….</tag>
Tags help in sending instructions to the web browser on what to display and how to display. A minimum of 3 tags are required for creating a web page in HTML5:
- <head>
- <body>
- <html>
Question: Please explain the various formatting tags in HTML5.
Answer: HTML5 has a total of 12 formatting tags:
- <b> - Used for making the text bold.
- <big> - Used for increasing the font size of the text by one unit.
- <del> - Used to display the deleted text.
- <em> - Used for making the text italic with added semantics importance.
- <i> - Used to make the text italic.
- <ins> - Used for displaying the added text.
- <mark> - Used for highlighting the text.
- <small> - Used to decrease the font size of the text by one unit.
- <strong> - Used for telling the browser that the text is important.
- <sub> - Used for making the text a subscript.
- <sup> - Used to make the text a superscript.
- <u> - Used for underlining the text.
Note: HTML5 formatting tags are grouped into two categories:
- Logical tags: Used for adding some logical or semantic value to the text.
- Physical tags: Used for adding to the visual appearance to the text
Question: Explain the <figure> tag in HTML5.
Answer: The <figure> tag is used for specifying self-contained content, such as diagrams and photos, in an HTML5 web page. Although the content of the figure element is related to the main flow of the document, its position is independent of the same, i.e., if removed, it will not affect the main flow of the document.
Question: Explain the various new tags introduced by HTML5 in Media Elements.
Answer: HTML5 introduces the following five new tags in Media Elements:
- <audio>: Eliminates the need for additional plugins for playing audio content like audio streams and music.
- <embed>: Embeds an external application or content
- <source>: Adds multimedia resources like audio, picture, and video.
- <track>: Adds caption files or subtitles while the multimedia file is playing.
- <video>: Adds video content like embedded video content, movie clips, and videos.
Question: What is a <meta> tag in HTML5?
Answer: The <meta> tag offers metadata about the HTML5 document. This metadata is machine-parsable. Typically, meta elements are used for specifying:
- Author name
- Keywords
- Page description
The metadata supplied by the <meta> tag is used by:
- Web browsers to know how to display content or reload a web page
- Search engines to know about keywords on a web page
- Other web services
Note: HTML5 introduces a new method that allows web developers and designers to take control of the viewport with the <meta> tag.
Question: Which tag is used for representing the result of a calculation? Explain its attributes.
Answer: The <output> tag is used for representing the result of a calculation. It has three attributes:
- for - Represents the relationship between the elements used in the calculation and the result.
- form - Represents the form(s) the output element belongs to.
- name - Represents a name for the output element.
Question: What is new about the relationship between the <header> and <h1> tags in HTML5?
Answer: Prior to HTML5, only one <h1> element was used for the heading of the entire webpage. This changed in HTML5, as it specifies that the <h1> element represents the top-level heading of a section of the webpage, which can be the page <body>, an <article>, or a <section> element.
According to the HTML5 specification, each <header> element must at least have one <h1> tag.
Question: List all the tags removed from the HTML5.
Answer: Following tags were removed in the HTML5:
- <acronym>
- <applet>
- <basefont>
- <big>
- <bigcenter>
- <center>
- <dir>
- <frame>
- <frameset>
- <font>
- <noframes>
- <strike>
- <tt>
Question: How does an HTML specification differ from a web browser's implementation of the same?
Answer: An HTML specification, like the HTML5 specification, defines a set of rules that all documents need to strictly follow in order to be considered valid as per the specification. The specification also offers instructions about how a web browser must interpret and render a valid document.
A web browser is considered to support a specification if it is able to handle valid documents as per the rules mentioned in the specification. Although all of the major browsers support most of the HTML5 specification, no web browser supports the HTML5 specification to its entirety.
Hence, it is all-important for the developers to confirm that the aspects of the specification that they are using must be supported by all the web browsers on which they want to display/deliver the content.
As such, despite the improved specifications for HTML5, cross-browser support is still something that a developer should be very cautious about. The HTML5 specification defines certain rules that must be followed when coming across an invalid HTML5 document.
Since invalid documents can contain anything, it is almost impossible for the HTML5 specification to handle all the possibilities comprehensively. Therefore, most decisions about handling malformed documents are entirely up to the web browser.
Question: Please explain how to indicate the character set being used by a document in HTML5.
Answer: The character set being used by an HTML5 document is indicated using the charset attribute of a <meta> tag inside the <head> element of the HTML5 document:
<!DOCTYPE html>
<html>
<head>
…
...
<meta charset="UTF-8">
…
…
</head>
</html>Question: Is it possible for a web page to have multiple <header> and <footer> elements?
Answer: Yes, a webpage can have many <header> and <footer> elements. Both tags are specifically designed to serve their respective purposes with respect to their parent section.
Hence, not only the page <body> must have the <header> and <footer> tags, but also does every <article> and <section> elements. Although a <footer> element might not be always necessary for every <article> and <section> tags, a <header> element must always be there.
Question: What is the correct usage of the following HTML5 semantic elements:
i) <article>
ii) <footer>
iii) <header>
iv) <section>
Answer:
i) <article>
This HTML5 element is intended to have a self-contained composition, being logically independent and capable to be created outside the web page without losing the concerned meaning. Suitable examples for the <article> element are blog posts, news snippets, and release updates.
ii) <footer>
We use the <footer> element to hold information meant to appear at the end of a particular section of a web page. Typically, it contains additional information about the section. Suitable examples for this HTML5 element include an author bio and helpful links.
iii) <header>
This essential HTML5 element contains introductory as well as navigation information about a certain section or the body of a web page. Suitable examples for the <header> element are author name, publication date, number of views, and table of contents.
iv) <section>
Intended for holding content having a common purpose or theme, the <section> element serves as a flexible container in HTML5. The comments section, sharing section, and related articles section are some of the best examples of this HTML5 element.
Question: Write HTML5 code to implement a <video> tag for embedding a video stored at https://www.hackr.io/blog/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: One way to implement the above-mentioned is:
<video src="https://www.hackr.io/blog/html5-interview-questions/sample_video.mp4" width="640" height="360" controls></video>Another way of implementing the same (with a separate <source> tag inside the <video> element) is:
<video width="640" height="360" controls>
<source src="http://www.hackr.io/blog/html5-interview-questions/sample_video.mp4">
</video>Question: 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 have multiple <section> elements, intended for blog, analytics, payment options, news, et cetera.
Now, the <section> element for the blog can have multiple <article> elements to accommodate various articles. Further, each of these <article> elements can have two <section> elements, one for the comments section and the other for sharing section.
Question: Explain the difference between Canvas and SVG elements.
Answer:Following are the various differences between <canvas> and <svg> elements:
1. API Animation
Canvas has no provision for API animation. SVG, on the contrary, is capable of API animation.
2. Change Accommodation
Each drawn shape in SVG is remembered as an object by the web browser. If the attributes pertaining to an SVG object are changed, the browser automatically re-renders the shape.
The web browser forgets once the graphic is drawn in Canvas. If there is a change in the position of a Canvas graphic, the complete scene requires redrawing. While modification in Canvas is only allowed through the script, SVG supports modification via script as well as CSS.
3. Definition
SVG stands for Scalable Vector Graphics. It features many methods for drawing bitmap images, boxes, circles, paths, and text.
SVG is a language for describing 2D graphics, where the <svg> element is a container for SVG graphics. Canvas allows users to draw 2D graphics on the fly using J.S.
4. Dependency
SVG doesn't depend on the resolution, while Canvas completely depends on the same.
5. How is it handled?
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. Canvas is rendered pixel by pixel, i.e., it is pixel-based. There is no support for event handlers in <canvas> elements.
6. Ideal for
While Canvas is suitable for small rendering areas and games graphics, SVG is the best option for large rendering areas and printing with high quality at any resolution.
7. Scalability
Canvas has poor scalability. SVG, however, has better scalability.
Question: Write the HTML5 code for implementing a rectangular box using the canvas element.
Answer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Rectangle</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw a rectangle
ctx.fillStyle = '#FF0000'; // Color of the rectangle (red)
ctx.fillRect(50, 50, 200, 100); // x, y, width, height
</script>
</body>
</html>Use this compiler to see the output.
Question: What do you understand by <!DOCTYPE>? Name the types of DOCTYPE available in HTML5.
Answer: Every HTML5 web page starts with the <!DOCTYPE> declaration. It lets the web browser understand the information that it must display. The DOCTYPE declaration is concise and case-insensitive in HTML5. HTML5 provides support for only one DOCTYPE:
<!DOCTYPE html>
Question: What will happen if the doctype is not specified in an HTML web page?
Answer: If the doctype is not specified in an HTML web page, then the web browser will be unable to interpret the new HTML5-specific tags.
Question: List the various techniques for optimizing website assets.
Answer: To optimize website assets, one needs to decrease:
- The download size, and
- The total number of HTTP requests that are made
The following techniques can be used for optimizing website assets:
- CDN hosting
- File compression
- File concatenation
- Offloading assets
- Re-organizing
- Refining code
Question: Please explain the Geolocation API in HTML5. How will you create a Geolocation object?
Answer: The Geolocation API in HTML5 allows users to share their location with selected websites. J.S. is capable of capturing a user's latitude and longitude and sending the same to the backend server.
Doing so enables location-aware features like finding local places of interest and finding out one's location on the map. A new geolocation object can be created using the following code:
var geolocation = navigator.geolocation;
The Geolocation object is actually a service object. It allows widgets to retrieve information about the geographical location of a user's device. Most browsers and mobile devices provide support for the Geolocation API. The API works with a new property of the global navigator object.
Question: Write HTML5 code to demonstrate the use of Geolocation API.
Answer: The Geolocation API uses the navigator.geolocation.get current position() method for getting a user’s position and geographical coordinates i.e. longitude and latitude. The following code example demonstrates this:
<!DOCTYPE html>
<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>
Use the compiler below to check the output.
The code will first check whether Geolocation is supported or not. An error message will be displayed if Geolocation is not supported. Otherwise, the code will run the getCurrentPosition() method. It will return the coordinates of the user. The show position() function will get the longitude and latitude of the user.
Question: Explain the difference between div and span.
Answer: Both div and span are used for giving out the output. While span gives the output with display: inline, div gives output with display: block. Typically, span is used when there is the need to display the elements one after the other, i.e., in a line.
Question: What do you understand by HTML5 Web Storage? Is it any better than Cookies?
Answer: Prior to HTML5, web pages were able to store data locally within a browser using cookies. HTML5 introduces Web Storage that allows a webpage to do the same as that of the cookies. Web Storage, however, is faster and more secure than cookies.
The HTML5 Web Storage is faster because the data isn't included with every server request. Instead, it is used when asked for. A web page can only access the data stored by itself, which is stored in name/value pairs
Another important distinction between the HTML5 Web Storage and Cookies is that:
- Web Storage never transfers the data to the server, and
- When compared to cookies, the storage limit for the HTML5 Web Storage is much larger, at least 5MB, and at max 10MB.
Question: Please explain localStorage and sessionStorage.
Answer: Both localStorage and sessionStorage are scoped to the document origin. This ensures that documents with different origins never share stored objects. Unlike localStorage, sessionStorage is also scoped on a per-window basis.
If, for example, two browser tabs are displaying documents from the same origin, both will have separate sessionStorage data, i.e., the scripts running in one browser tab can't read or overwrite the data written by scripts in the other. This is true even if both browser tabs are visiting the totally same page and are running the absolutely same scripts.
The difference between the localStorage and the sessionStorage lies on the basis of the lifetime and the scope. Data stored via localStorage is permanent, i.e., it doesn't expire and remains stored on a computer until:
- A web app deletes it, or
- The user requests the browser to delete it
Data stored via sessionStorage, on the other hand, gets deleted when the window or tab concerning the same is closed. sessionStorage has the same lifetime as that of the top-level window or browser tab that has the script running, which stored the data.
Question: 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: When it comes to UI interaction, drag-and-drop is essential functionality. Almost all modern U.I.s have it. It makes copying, moving, and linking an object, such as an image or a link, very easy.
To make an image draggable in HTML5, we need to set the draggable image attribute true i.e.:
type = <img draggable = "true">Question: Please explain the new form input types in HTML5.
Answer: The HTML5 introduces the following 14 new form input types:
- Color - Select multiple colors using type = "color"
- Date - Pick a date by using type = "date."
- DateTime - Combination of date and time. Pick a date and time by using type = "datetime"
- Datetime-local - Doesn't include the timezone. Pick a date and time by using type = "datetime-local."
- Email - Enter one or more email addresses using type = "email."
- Month - Pick a month by using type = "month."
- Number - Inserts a numerical value with additional attributes like min and max. Enter one or many numerical values using type = "number."
- Search - Allows searching queries by inputting text. Enter one or many search queries by using type = "search."
- Tel - Allows different phone numbers. Each phone number is validated by the client side. Enter a phone number by using type = "tel."
- Placeholder - Displays a short hint in the input fields before entering a value. Write a short hint in the input field using type = "placeholder."
- Range - Inserts a numerical value within a specific range. Enter a numerical value within a range using type = "range."
- Time - Pick a time by using type = "time."
- Url - URL input type used for the web address. Use one or more attributes using type = "URL"
- Week - Pick a week by using type = "week."
Question: What do you understand by image maps in HTML5? How many types does it have?
Answer: Image maps allow users to click on images for opening new web pages. As such, these are a combination of images and URLs. Image maps are of two types:
- Client-side Image Map - Created using <area> and <map> elements. The map element holds the map information, and the area element takes the attributes for defining each section of the map.
- Server-side Image Map - Created using the <usemap> attribute, which is the name of the map.
Question: Why do we need the MathML element in HTML5?
Answer: MathML stands for Mathematical Markup Language. It is a form of XML for describing the Math notation. MathML is a markup language for displaying mathematical and scientific expressions over web pages.
For implementing the MathML element i.e. displaying a mathematical equation, we put it inside the <math> and </math> tags.
Question: Please explain Microdata in HTML5.
Answer: Microdata is a new simple semantic syntax used for new global attributes in HTML5. It adds the nested groups of name and value pairs to documents mostly based on the web page content.
Question: What does a hyperlink mean? Can it be only text?
Answer: Upon clicking, a hyperlink moves the user from one web page or document to some other web page. A hyperlink can be used upon a text as well as on an image. For converting an image into a link we use:
<a href = " "...</a>>Question: Write HTML5 code for creating a hyperlink.
Answer:
<!DOCTYPEhtml>
<html>
<body>
<title> Hyperlink Example </title>
<h3> HTML Cheat Sheet </h3>
<a href = "https://hackr.io/blog/html-cheat-sheet"> Visit HTML Cheat Sheet </a>
</body>
</html>Use the compiler to see how this looks online.
Question: What are the most popular audio and video formats for embedding on an HTML5 web page?
Answer: Popular audio formats:
- MP3
- Ogg Vorbis
- WAV
- WebM
Popular video formats:
- MP4
- Ogg
- WebM
Question: What are the various common lists for designing a web page in HTML5?
Answer: Following are the common lists for designing a web page:
- <dl> - Definition list
- <dir> - Directory list
- <menu> - Menu list
- <ol> - Ordered list
- <ul> - Unordered list
Question: How will you add the autocomplete feature in a textbox?
Answer: For an <input> element, the <datalist> tag specifies a list of predefined options. It can be used for adding the autocomplete feature to a textbox. As a user inputs data, a dropdown list of available options will appear.
Question: Briefly explain various page structure elements in HTML5.
Answer: Following are the various page structure elements available in HTML5:
- <article> - Represents a set of information on a web page
- <aside> - Represents the sidebar of a web page
- <footer> - Represents the footer section of a web page
- <header> - Represents the header section of a web page
- <nav> - Represents the navigational elements of a web page
- <section> - Represents the set of instructions used inside an article block for defining the basic structure of a web page
Question: 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>Check this HTML code with the compiler below.
Question: 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). For example,
<p>Display ©</p>
Question: Explain the Advantage and Disadvantages of using HTML5.
Answer: Some advantages of HTML5 are:
- Better semantics and cleaner code.
- Consistency in coding a web page.
- Elegant and fancier forms reduced the need for JavaScript.
- Geolocation support.
- Many new features make animations and front-end elements easier to code and display on different browsers.
- Offline application cache which helps users to view a page even when they are not connected to the internet.
Some disadvantages of HTML5 are:
- Only modern versions of the browsers support HTML5. Not all users use the latest version of browsers.
- Many features are still not stable and are in the development stage.
- Due to licensing issues, the rich media is compressed into multiple formats to be compatible with most browsers.
Question: What is the useful API in HTML5?
Answer: Some of the useful APIs in HTML5 are:
- Fetch: Fetch has made HTTP requests easier than it was with XMLHttpRequest.
- Battery status: Check the battery status of the device.
- Geolocation: tells the device's location.
- Clipboard: copy the contents to the clipboard.
- Forms: new types have been added for validation and rendering.
- Drag and drop: easily drag and drop items in the app.
- Screen orientation: Checks the device’s screen orientation.
- Web audio: Process audio on the client side.
- Internalization: International formatting and string comparison.
- Web sockets: real-time communication between server and client.
Question: Is HTML5 backward compatible with old browsers?
Answer: No, old browsers can support some basic features, but the video and audio support, semantics, etc. are not backward compatible. Although, we can make the older browsers learn how to handle the unknown elements.
Question: What is the use of DateTime-local input control in Web form 2.0?
Answer: It indicates the date and time (year, month, day, hour, minute, second, a fraction of a second) encoded as per ISO 8601 without timezone information.
Question: 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 need a URL address. It will not accept any other values like text input. The accepted formats are: http://www.<webaddr> or http://<webaddr>
Question: What are the drawbacks of cookies?
Answer: The most important drawback is privacy as cookies keep track of all the websites a user visits, and any third-party can access the cookies' information. This could be misused by hackers or malicious persons to access confidential information like passwords or credit card details.
Question: What is the server-sent events in HTML5?
Answer: The events that flow from the webserver to the browsers are called server-sent events. DOM events can be continuously pushed from the webserver to the browser of a user. To use a server-sent event (SSE), you should add an <eventsource> element to the document. The src attribute of this element describes the HTTP connection location, which sends a data stream having the events.
Example: <eventsource src = "/cgi-bin/myfile.cgi" />
Question: How to utilize a server-sent event in HTML5?
Answer: Server-sent events are most useful when we need a long-term connection with the web server. In such cases, the web page can hold an open connection to a web server, and the server can send a response anytime without having to reconnect.
Question: What are web sockets?
Answer: Web sockets are APIs or protocols that define persistent socket connections between the web browser and the server. A WebSocket connection can be opened by calling the WebSocket constructor and passing the URL in the URL schema. URL schema can be ws, wss. Optionally, other subprotocols like soap, XMPP, etc. can be passed to the constructor. WebSockets help in two-way communication and handle proxies and firewalls.
Question: Briefly explain some of the most-used APIs in HTML5.
Answer: Following are the most-used APIs in HTML5:
- Canvas API - Enables drawing graphics via J.S. and the <canvas> element.
- Console API - Allows developers to perform various debugging tasks.
- Constraint Validation API - Helps in checking (validating) user-entered values into form controls prior to submitting these values to the server.
- Credential Management API - Enables a website to store and retrieve federated, public, and user key credentials. In other words, it allows users to sign in without entering passwords.
- Drag and Drop API - Allows grabbing and dragging an HTML object with the cursor.
- Geolocation API - Enables users to share their location details with web applications.
- History API - Grants access to the browser navigation history.
- Media API - A JavaScript API that allows interaction with the audio and video elements. Provides the HTMLMediaElement programming interface.
- Service Worker API - Allows:
- Access to push background sync APIs and push notifications.
- Creating effectual offline experiences
- Intercepting network requests and taking relevant actions thereof
- Updating assets residing on the server
- WebVTT API - WebVTT stands for Web Video Text Tracks Format. Provides access to the various text tracks available for an HTML5 video using the <track> element.
- Web Storage API - Provides a faster and better mechanism to allow browsers to store key/value pairs.
Conclusion
At last, we've completed our pick of the 50 top HTML5 interview questions. I hope you find them useful in preparing for your upcoming HTML5-based job interview and/or assessing how good you've gotten in HTML5. Check out this HTML cheat sheet to go in-depth on HTML5 tags.
When studying gets tough, remember why you're doing this. HTML5 is among the highest-paying web technologies as of today. Hence, it is an ideal time to learn HTML5. If you've already done so, then you must look forward to grabbing a lucrative HTML5-based job.
Preparing for an upcoming HTML5 interview? Consider checking this book to prepare for HTML5: Cracking the IT Architect Interview.
And yes, don't forget to leave your suggestions, corrections, appreciation remarks, and greetings via the comments section below. Thanks in advance!
People are also reading:
