Loading…

Top HTML5 Interview Questions and Answers

By Umesh Singh
Last update: 18 May 2020, 45 Questions
Introduction to HTML5
HTML5 Interview Questions

Are you fed up with using browser plugins? HTML5 is for you. It is a Hypertext Markup Language that offers everything; animation, apps, movies, and music. Using HTML5 will help you to build complicated applications that can be easily run on a browser. Moreover, it is cross-platform that is you don’t need to think about the device on which you are using it. On bestinterviewquestions.com, you would be introduced to HTML5 interview questions and more related information through our detailed blogs. It can be any-smartphone, tablet, ultrabook, Smart TV, etc. Moreover, you can write web applications when not connected to the internet.

Features of HTML5

  • Editing content within element and "required" form attribute
  • Figure tag and SVG element
  • Web fonts
  • Transition and Animation
  • Web Icons
  • Easily implemented audio, video, map with these tags
Quick Facts About HTML5
What is HTML5? It is a MARK UP language that is mainly used for creating interfaces rather than analytical works or logical.
What is the latest version of HTML5? HTML5.2 released on December 2017
Who developed HTML5? WHATWG
When was HTML5 first released? 28 October 2014
Official Website https://www.w3.org

Best HTML5 Interview Questions And Answers

1. What is the difference between HTML and HTML5?
  HTML HTML5
1. The primary language for making web pages. The fifth and latest version of HTML
2. Audio/Video not a part Audio/Video an important part
3. Browser cache used for temporary storage Application cache, web SQL DB, ad web storage used as temporary storage.
2. What is an API and list the API's available in HTML5?

API (Application Programming Interfaces) in HTML5 is a way to build different applications using pre-built components. Developers can integrate the relevant features of existing APIs into their new websites.

The APIs in HTML5 are:
  • HTML Web Workers
  • HTML Drag and Drop
  • HTML Application Cache
  • HTML Local Storage
  • HTML SSE
  • HTML Geolocation
3. What is semantic elements in html5? List some semantic elements.

A semantic element absolutely describes its that means to each the browser and the developer. Elements such as header, footer and article are all viewed semantically due to the fact they precisely describe the reason for the aspect and the kind of content material that is inner them.

HTML5 Semantic Elements
  • header
  • section
  • nav
  • aside
  • footer etc
4. What is the new Structural Elements in HTML5?

HTML5 has introduced the following structural elements for defining different parts of a web page:

  • <header>: Represents HTML's header data
  • <footer>: Footer of the page
  • <nav>: Represents page's navigation elements
  • <article>: Content that is self-contained
  • <section>: Defines sections or groups content into sections
  • <aside>: Refers to side bar contents
5. List out the page structure elements of HTML5?
Here is a list of page structure in HTML 5:
  • <header> - Used to define header for a document or a section
  • <nav> - Used to define container for navigation links
  • <section> - Used to define a section inside a document
  • <article> - Used to tag an independent self-contained article
  • <aside> - Defines the content separately (just like a sidebar)
  • <footer> - Used for tagging a footer inside a document or a section
  • <details> - Usd to define any additional details
  • <summary> - Used to define a heading inside the <details> element
6. Is HTML5 tags are case sensitive?

No, HTML is not case sensitive. It means that <P> is the same as <p>. However, W3C advises writing HTML in lowercase especially when working on an XHTML document.

7. How do you optimize a website's assets & reduce page load time?

Follow these steps to optimize assets and also reduce the page load time of any website:

  • Properly naming all assets.
  • Using a content delivery network (CDN) for media files.
  • Hosting assets on different domains while also reducing DNS lookups
  • Using a cookie-free domain to place assets and splitting them among domains
  • Using CSS Sprites for Images.
  • Disabling etags.
  • Minimizing the use of JS in code.
  • Minimizing inline CSS and using internal and external style sheets.
8. What is the use of Scalable Vector Graphics (SVG) in HTML5?

SVGs or Scalable Vector Graphics are used in HTML 5 to display 2-D graphics and its applications in XML which is later on rendered by an SVG viewer. The SVG element is used to contain SVG graphics.

Example

                                                    

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

9. What are the different types of <!DOCTYPE> are available in HTML5?

It is used to create a reference to a Document Type Definition. In HTML 5, Doctype declaration is only needed to enable a standard mode for documents which are written with the HTML syntax. Hence, the Doctype for HTML 5 is short and case-insensitive.

  • <!DOCTYPE html>
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
10. What is the difference between the SVG and Canvas?
Canvas SVG
1. Resolution dependent Resolution independent
2. No support for event handlers Provides support for event handlers
3. Suitable for graphic-intensive Ideal for creating graphics similar to CAD software
3. Works best for small rendering areas Works even for large rendering areas
11. What is local storage in HTML5? How it is used?

HTML5 has introduced the concept of Local Storage, which is used to access a web page's local storage area without any time limit. Local storage is available whenever the user wants to use the web page.

The data stored in Local Storage does not get automatically deleted when the browser window is closed; it only gets removed when deleted manually. In local storage, the data is stored using a key and value.

12. What are the different types of storage in html5? Explain

In HTML5, data can be stored in 2 ways – session storage and local storage.

  • Session Storage: The data or details from the current browsing session are stored. Once the browser gets closer by the user, the storage data gets removed.
  • Local Storage: The data does not get cleared automatically when the user closes the browser.
13. What is the use of <audio> and <video> tags in Html5?

The <audio> tag in HTML5 is used to embed voice in an HTML document. Designers use <source> tag to specify media type along with other attributes.

The <video> tag in HTML5 is used to embed a video file in an HTML document. Designers can use <source> tag to specify media type along with other attributes.

14. What is the use of <fieldset>?

The <fieldset> tag in HTML5 is used to group together related form elements. A <fieldset> must begin with a <legend> tag because this tag will define the title of the fieldset. By using <fieldset> tag and <legend> tag together, designers can make their forms easier to understand and use.

The syntax for <fieldset> tag is: <fieldset>Controls</fieldset>

15. What is image map in Html5?

In HTML 5, an Image map is one having clickable areas. The tag map defines an image-map.

Example

                                                    

<img src="https://www.bestinterviewquestion.com/storage/blog/small/1585841464.png" alt="Workplace" usemap="#workmap">
<map name="workmap">
    <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
    <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
    <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

16. What is the application cache in HTML5 and why it is used? The application cache is a feature in HTML 5 which is used to store website data inside a cached version, thus allowing accessibility without net connectivity. It is very useful for desktop-based web applications requiring to store data on local systems.
17. What is MathML in Html5?

MathML is Mathematical Markup Language. This language is used to show scientific and mathematical content on web pages. HTML5 allows you to use MathML elements in a document using <math>...</math> tags.

A mathematical expression should be inserted in the element <math> with a specified namespace as shown below: <math xmlns="http://www.w3.org/1998/Math/MathML"> </math>

19. What is a Web Worker in Html5?

A web worker in HTML5 is a script that runs on a separate thread in the background without the need for the main web page to wait for it to complete. Web Workers enable long tasks to be achieved without keeping the web page responsive.

There are two types of web workers - Dedicated workers and Shared workers.

20. What are the web storages present in HTML5?
In HTML5, users will receive two types of web storages as following.

1. Local Storage: Here, data will be stored in the local storage, and will not be cleared automatically or when we close the browser.

2. Session Storage: With this type, the user’s browser current session data will be stored. Once the browser is closed, the storage will be cleared.

21. What does WHATWG stand for in the world of HTML5?

The abbreviation WHATWG stands for Web Hypertext Application Technology Working Group in HTML5. This is an organization which both develops and maintains the HTML and API for web applications.

22. In HTML5, what is a Microdata?

Microdata is a newly introduced, simple semantic syntax which can be used by developers to add the nested groups of name and value pair of data to documents, that are based on the page content commonly. It’s used with new global attributes of HTML5.

23. What is the purpose of <! Doctype html>?

The in HTML5 refers to indicating to the web browser about the version of HTML in which the page is created. Neither there is an end tag is not is it case sensitive.

In HTML5, declaration should be the first thing before HTML tag. This is because of all previous version before HTML5 followed Standard Generalized Markup Language (SGML). Because HTML5 does not follow SGML, it does not require references to DTD (Document Type Definition).

24. What is Meta tags? Why it is used?

HTML5 has introduced a way to let designers take charge of the web page area that is visible to the users through tags. The tag tells information related to an HTML document. Some of the examples are Link, Style, and Title. With meta tag, we can add meta ketwords, meta description and meta title that helps for SEO Purposes.

25. What is html5 new input type?

HTML5 has introduced new input types for forms. Designers can build interactive and user-friendly web forms by using these input types. The new input types also provide improved data validation, better color picker controls, and enhanced input control.

The new input types are:

  • Time
  • Date
  • Datetime
  • Datetime-local
  • Week
  • Month
  • Email
  • Color
  • Number
  • Range
  • Search
  • Telephone
  • URL
28. What is the Geolocation API in HTML5? Explain

The Geolocation API in HTML5 allows the users to share their physical location with selected websites. This happens when JavaScript captures a user’s latitude and longitude and sends it to the back-end server for enabling location-aware features such as finding local businesses or showing location on a map.

29. What are the features of html5?
  • Editing content within element and "required" form attribute
  • Figure tag and SVG element
  • Webfonts
  • Transition and Animation
  • Web Icons
  • Easily implemented audio, video, map with these tags
30. Is local storage secure?

No. Local storage is not very secure because it was not designed to be used as secured storage in a web browser. Local storage was only designed to be a simple key/value storage that developers would use to build single page apps.

31. What is a list tag and mention the most commonly used list tags?

HTML5 users implement list tags to list out the required information. The most commonly used list tags are mentioned below for your acknowledgment.

Definition List: This list tag offers a list in it and takes Definition Term (<dt>...</dt>) and a detailed definition (<dd>...</dd>).

1. Ordered List: This list tag provides the required list by the user in a numbered format.

Syntax:
<ol>...</ol>

2. Unordered List: This one offers the user required a list in a bullet format.

Syntax:
<ul>...</ul>

Both the ordered and unordered list item tags use the list item tags (<ul>...</ul>) in them.

32. What are custom attributes in Html5? Explain

Custom attributes are one of the most important new features in HTML5. They play an integral role in semantic development. Custom attributes are designed to store custom data private to web pages or applications for which there are no other attributes. Because custom attributes are valid in HTML5, they get used in all browsers that support HTML5 doctypes.

All attributes in HTML5 on an element starts with "data-" like data-type="best", data-distance="4km", data-identifier="bestinterviewquestion.com".

33. How many ways to use colors apply on html elements?

We can color HTML elements in three different ways, as mentioned below.

  • #efefef or Hex Color
  • By using the color name such as blue, red, etc.
  • RGB(10,234,128). This is a combination of red, green, and blue.
34. Describe the usage of <footer>, <article>, <section>, and <header> HTML5 semantic elements.

<footer>: This semantic element is used to contain information that should appear at the very end of the content section. It also contains additional information of the section such as copyright information, Author's name, and related links.

<article>: This one contains a self-contained composition which can logically be recreated by developers outside of the page without losing its primary meaning. For example news stories and blog posts.

<section> : This HTML5 semantic element holds content that shares a common informational purpose or theme.

<header>: Developers use this to contain navigational and introductory information about a section of the page, such as section heading, publication date and time, author’s name, content table, etc.

35. What is Web SQL Database in Html 5?

Web SQL is not a part of HTML5. It is a separate specification that helps in developing web apps. Web SQL is used to manage the client-side database because it stores data on the client side, not on the server side. A Web SQL database works only in latest versions of Google Chrome, Safari, and Opera browsers.

36. What is <iframe> and why we can use this?

The <iframe> tag is used to indicate an inline frame, or, a browsing context that is nested. It allows outside documents to be inserted in the main HTML document seamlessly. Inline frames are mostly used in online advertising, where the contents of the iframe can e an ad from a third party.

37. What is w3c and Whatwg?

The World Wide Web Consortium (W3C) is a community of developers working towards setting global standards for development.

WHATWG is short for Web Hypertext Application Technology Working Group. It was created during a W3C workshop session by working individuals of Apple, Mozilla and Opera Software in 2004. WHATWG is a community of developers focused more on HTML rather than XHTML and working on standards to improve on user needs.

38. What are the various formatting tags in HTML5?

Formatting tags are used in HTML 5 to display different styles of text. Here are the formatting tags in HTML 5:

  • <b> - Used to bold text
  • <strong> - Use to mark text as Important
  • <i> - Used to write in Italics
  • <em> - Used to emphasize text
  • <mark> - Used to mark text
  • <small> - Used to make the text small
  • <del> - Used to Delete text
  • <ins> - Used to Insert text
  • <sub> - Used to make a subscript text.
  • <sup> - Used to make a superscript text
39. How many tags were removed in HTML5?
  • <frame>
  • <basefront>
  • <applet>
  • <frameset>
  • <big>
  • <center>
  • <bigcenter>
  • <noframes>
  • <dir>
  • <tt>
  • <acronym>
  • <basefont>
40. What is a manifest file in HTML?

In HTML 5, the manifest file is a normal text file used for listing resources in the browser which are to be cached for offline access. It also helps in loading resources faster and reducing server load time.

41. What is drag and drop in HTML5?

The Drag and Drop feature is primarily a part of HTML 5. It is used to grab an object and move it towards another location. In HTML 5, every element is draggable by default. Hence, there is no need for a separate function.

42. What is a tag in HTML5?

The <a> tag in HTML 5 is used to define a hyperlink. The <a> tag is used to link one page to another. The most vital function of the <a> element is having the href attribute, which accurately indicates the link's destination. By default, the hyperlinks will automatically appear in all browsers

43. What are the new attributes of form tag in HTML5?

Here is a list of the new form attributes introduced in HTML 5

  • novalidate
  • autocomplete
44. What is Server Sent Events?

A server-sent event is when a net page automatically receives updates from a server. This used to be additionally possible before, however, the internet web page would have to ask if any updates had been available. With server-sent events, the updates come automatically.

45. What is the difference between server sent events and Websockets in html5?
  • Websockets and SSE (Server-Sent Events) are each successful of pushing records to browsers, however, they are no longer competing for technologies.
  • Websockets connections can both ship statistics to the browser and acquire information from the browser. A true example of an application that ought to use WebSockets is a chat application.
  • SSE connections can solely push statistics to the browser. Online inventory prices or twitters updating timeline or feed are excellent examples of a utility that ought to benefit from SSE.
  • In exercise considering the fact that the whole lot that can be executed with SSE can also be executed with Websockets, Websockets is getting a lot greater attention and love, and many more browsers help Websockets than SSE.

HTML5 includes extensive processing models to encourage interoperable implementations. HTML5 aims to extend and improve the markup available for existing documents. The latest version has also introduced markup and APIs for complex web apps. HTML5 is suitable for cross-platform mobile apps as this version contains features that are designed keeping low-powered devices in mind — going through HTML5 interview questions for experienced before your job interview can enhance your chances of getting your dream job.

Add Review