HTML5 interview question for experienced/HTML5 Interview Questions and Answers for Freshers & Experienced

What is WebSQL?

WebSQL is database API for client (browser) database using SQL.
Similar to SQL, API are pretty simple.
Not all the browser supports WebSQL.
As of now WebSQL is deprecated.

Can a web page contain multiple <header> elements? What about <footer> elements?

Yes to both. The W3 documents state that the tags represent the header(<header>) and footer(<footer>) areas of their nearest ancestor "section". So not only can the page <body> contain a header and a footer, but so can every <article> and <section> element.

What are data- attributes good for?

The HTML5 data attribute lets you assign custom data to an element. When we want to store more information/data about the element when no suitable HTML5 element or attribute exists

Where and why is the rel="noopener" attribute used?

The rel="noopener" is an attribute used in <a> elements (hyperlinks). It prevents pages from having a window.opener property, which would otherwise point to the page from where the link was opened and would allow the page opened from the hyperlink to manipulate the page where the hyperlink is.

What is the difference between section and div?

<section> means that the content inside is grouped (i.e. relates to a single theme), and should appear as an entry in an outline of the page.

<div>, on the other hand, does not convey any meaning, aside from any found in its class, lang and title attributes.

How do you serve a page with content in multiple languages?

he question is a little vague, I will assume that it is asking about the most common case, which is how to serve a page with content available in multiple languages, but the content within the page should be displayed only in one consistent language.

When an HTTP request is made to a server, the requesting user agent usually sends information about language preferences, such as in the Accept-Language header. The server can then use this information to return a version of the document in the appropriate language if such an alternative is available. The returned HTML document should also declare the lang attribute in the <html> tag, such as <html lang="en">...</html>.

In the back end, the HTML markup will contain i18n placeholders and content for the specific language stored in YML or JSON formats. The server then dynamically generates the HTML page with content in that particular language, usually with the help of a back end framework.

When is it appropriate to use the small element?

The HTML <small> element makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size. In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation.


<img src="image.jpg" alt="London by night">
<small>The copyright of this image is owned by Aurelio De Rosa</small>

What does CORS stand for and what issue does it address?

Cross-Origin Resource Sharing (CORS) is a W3C spec that allows cross-domain communication from the browser. By building on top of the XMLHttpRequest object, CORS allows developers to work with the same idioms as same-domain requests. CORS gives web servers cross-domain access controls, which enable secure cross-domain data transfers.

What are the Benefits of Server Side Rendering (SSR) Over Client Side Rendering (CSR)?

a) We are using server side rendering for two reasons:

performance benefit for our customers
Consistent SEO performance
b) The main difference is that for SSR your server’s response to the browser is the HTML of your page that is ready to be rendered, while for CSR the browser gets a pretty empty document with links to your javascript. That means for SSR your browser will start rendering the HTML from your server without having to wait for all the JavaScript to be downloaded and executed.

c) for SSR, the user can start viewing the page while all of that is happening. For the CSR world, you need to wait for all of the above to happen and then have the virtual dom moved to the browser dom for the page to be viewable.

What happens if the list-style-type property is used on a non-list element like a paragraph?

If the list-style-type property is used on a non-list element like a paragraph, the property will be ignored and do not affect the paragraph.

What if there is no text between the tags or if a text was omitted by mistake? Will it affect the display of the HTML file?

If there is no text between the tags, then there is nothing to format. Therefore no formatting will appear. Some tags, especially tags without a closing tag like the <img> tag, do not require any text between them.

How to insert a picture into a background image of a web page?

To insert a picture into the background image, you need to place a tag code after the </head> tag in the following way:

<body background = “image.gif”>
Now, replace image.gif with the name of your image file. This will take the picture and make it the background image of your web page.

hat's the difference between an "attribute" and a "property" in HTML?

Attributes are defined on the HTML markup but properties are defined on the DOM. To illustrate the difference, imagine we have this text field in our HTML: <input type="text" value="Hello">.

const input = document.querySelector('input');
console.log(input.getAttribute('value')); // Hello
console.log(input.value); // Hello
But after you change the value of the text field by adding "World!" to it, this becomes:

console.log(input.getAttribute('value')); // Hello
console.log(input.value); // Hello World!

How Can I Get Indexed Better by Search Engines?

It is possible to get indexed better by placing the following two statements in the <HEAD> part of your documents:

<META NAME="keywords" CONTENT="keyword keyword keyword keyword">
<META NAME="description" CONTENT="description of your site">
Both may contain up to 1022 characters. If a keyword is used more than 7 times, the keywords tag will be ignored altogether. Also, you cannot put markup (other than entities) in the description or keywords list.

What is a self closing tag?

In HTML5 it is not strictly necessary to close certain HTML tags. The tags that aren’t required to have specific closing tags are called “self closing” tags.

An example of a self closing tag is something like a line break (<br />) or the meta tag (<meta>). This means that the following are both acceptable:

<meta charset="UTF-8">
<meta charset="UTF-8" />

What is Character Encoding?

o display an HTML page correctly, a web browser must know which character set (character encoding) to use. This is specified in the tag:


<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

<meta charset="UTF-8">

What were some of the key goals and motivations for the HTML5 specification?

HTML5 was designed to replace HTML 4, XHTML, and the HTML DOM Level 2. The key goals and motivations behind the HTML5 specification were to:

Deliver rich content (graphics, movies, etc.) without the need for additional plugins, such as Flash.
Provide better semantic support for web page structure through new structural element tags.
Provide a stricter parsing standard to simplify error handling, ensure more consistent cross-browser behaviour, and simplify compatibility with documents written to older standards.
Provide better cross-platform support whether running on a PC, Tablet, or Smartphone.

How can you highlight text in HTML?

If you are working with an HTML5 page, the <mark> tag can be a quick and easy way of highlighting or marking text on a page:

<mark>highlighted text</mark>
To highlight text with just HTML code and support for all browsers, set the background-color style, as shown in the example below, using the HTML tag.

<span style="background-color: #FFFF00">Yellow text.</span>

When is it appropriate to use frames?

Frames can make navigating a site much easier. If the main links to the site are located in a frame that appears at the top or along the edge of the browser, the content for those links can be displayed in the remainder of the browser window.

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.

State the difference between progress and meter tag?

The progress tag is used to symbolize the progress of the job only while the meter tag is used to calculate data within a given a choice.

Why is a URL encoded in HTML?

An URL is prearranged to change non-ASCII characters into an arrangement that can be utilized over the Internet because a URL is sent over the Internet by use of the ASCII nature-set only. If a URL contains characters exterior the ASCII set, the URL has to be rehabilitated. The non-ASCII names are replaced with a "%" followed by hexadecimal digits.

Tell me the minimum number of HTML5 tags that are required to create a web page?

Least 3 HTML5 tags are necessary to generate a Web page, such as (<HEAD>, <BODY>, <HTML>).

What happens if the list-style property is used on a non- list element like a paragraph?

If the list-style-type possessions are used on a non-list element like a section, the property will be unnoticed and do not influence the paragraph.

Do you think several selectors with class names be grouped together?

You can describe numerous selectors with the identical style meaning by unscrambling them with commas. This same system also works for selectors with class names.

What is the hierarchy that is being followed when it comes to style sheets?

If a single selector includes three diverse style definitions, the meaning that is closest to the real tag takes priority. Inline style takes the main concern over entrenched style sheets, which takes the leading care over external style sheets.

Is <br> tag the only way to separate sections of text?

No. The <br> tag is only one method to divide lines of text. Other tags, such as the <p> tag and <blockquote> tag, also separate sections of text.

What is the difference between Html5 application cache and regulate Html browser cache?

The new HTML5 specification allows browsers to prefetch some or all of website assets such as HTML files, images, CSS, JavaScript, and so on, while the client is connected. It is not necessary for the user to have accessed this content previously, for fetching this content. In other words, application cache can prefetch pages that have not been visited at all and are thereby unavailable in the regular browser cache. Prefetching files can speed up the site’s performance, though you are of course using bandwidth to download those files initially.

List some new tags introduced in HTML5?

Some of the new elements introduced in the HTML5 are,

<article> - It is used to define an article.
<aside> - It is used to define content aside from the page content.
<details> - It defines additional details that can be viewed or hidden.
<header> - It defines a header of a document.
<footer> - It defines a footer of a document.
<mark> - It defines marked or highlighted text.
<meter> - It is used to define scalar measurement.
<ruby> - It defines a ruby annotation.
<time> - It defines date and time.
<figure> - It defines a self-contained text.
<nav> - It is used to define navigation links.
<rt> - It is used to define the pronunciation of a character.

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.

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.

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.

How do you create a link that will connect to another web page when clicked?

To create hyperlinks, or links that connect to another web page, use the href tag. The general format for this is: <a href=”site”>text</a>
Replace “site” with the actual page URL that is supposed to be linked to when the text is clicked.

How do we declare a custom attribute in HTML?

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.

How do you create multicolored text in a webpage?

To create text with different colors, use the <font color=”color”>…</font> tags for every character that you want to apply color. You can use this tag combination as many times as needed, surrounding a single character or an entire word.

What is the sessionStorage Object in HTML5 ? How to create and access?

The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window. like below we can create and access a sessionStorage here we created “blogName” as session

<script type="text/javascript">

What is < !DOCTYPE>? Is it necessary to use in HTML5 ?

The < !DOCTYPE> is an instruction to the web browser about what version of HTML the page is written in. AND The < !DOCTYPE> tag does not have an end tag and It is not case sensitive.

The < !DOCTYPE> declaration must be the very first thing in HTML5 document, before the tag. As In HTML 4.01, all < ! DOCTYPE > declarations require a reference to a Document Type Definition (DTD), because HTML 4.01 was based on Standard Generalized Markup Language (SGML). Where as HTML5 is not based on SGML, and therefore does not require a reference to a Document Type Definition (DTD).

List different types of API's available in HTML5?

There are lots of APIs available in HTML5 that add additional abilities to your application. Some of the popular API's are:

Media API - It is used to add video and audio elements to your application. It has in-built methods to pause, play, load, etc.
Text Track API - It is used to add text tracks to audio and video source. The subtitle is a good use of the Text Track API.
High-Resolution Time API - It is used to provide accurate current time in sub-millisecond.
Vibration API - It is used to offer vibration response to user touch. It enhances the user experience by providing a great response.
Drag and Drop API - It is used to add drag and drop functionality to your application.
HTML Geolocation - This API is used to get a geographical position of a user.
HTML Web Workers - It is used to run JavaScript files in the background without interrupting the user interface.

What is Graphics in HTML5?

In HTML5, graphics can be drawn using two graphics elements.

1. Canvas element:

It is a graphics element that is used to draw shapes using JavaScript. It has several methods for drawing paths, boxes, circles, and even add images.


<canvas id="myCanvas" width="100" height="100"></canvas>
The above canvas code designs a square with 100 by 100 size.

2. SVG (Scalable Vector Graphics):

SVG is based on vector graphics. It is used to define graphics in XML format. Graphics designed by SVG doesn’t lose quality when zoomed in or resized.


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

What use of the article tag in HTML5?

The <article> tag is used to create independent sections in the HTML. It is a self-contained element that is used to represent an article. This element can be used to create a blog entry, forum post, comment section, or magazine article.

The default value of the article tag

article {
Example for article tag

<article class="day-forecast">
<h2>04 February 2020</h2>
<p>Clear sky with no hint of rain.</p>

What is Canvas in HTML5 ? How to write a Canvas ?

Canvas is a 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>

Can we specify fractional weight values such as 670 or 973 for font-weight?

Implementation mainly depends on the browser, but the normal does not hold up fractional mass values. Satisfactory values must end with two zeroes.

How are active hyperlinks different from normal links?

The evasion colour for usual and active links is blue. Some browsers distinguish an active link when the mouse cursor is located over that link; others distinguish active connections when the link has a focal point. Those that don’t have a mouse cursor over that hyperlink is measured a normal link.

Define marquee?

A marquee permits you to put a scrolling text on a web page. To do this, put whatever text you desire to emerge scrolling within the <marquee> and </marquee> tags.

Tell the limits of the text field size?

The non-payment size for a text field is around 13 characters. However, if you comprise the size attribute, you can place the size value to be as low as 1. The maximum size value will be firm by the browser width. If the size quality is set to 0, the size will be set to the non-payment size of 13 characters.

State the difference between the directory and menu lists and the unordered list?

The type dissimilarity is that the index and menu lists do not comprise attributes for altering the bullet style.

What will happen if we overlap sets of tags?

If the two sets of HTML tags are overlapped, only the primary tag will be documented. You will find this difficulty when the text does not show correctly on the browser screen.

Why are there both numerical and named character entity values?

The mathematical values are taken from the ASCII values for the different characters, but these can be hard to remember. Because of this, named character body values were shaped to make it easier for web page designers to use.

Do older HTML files work on present-day browsers?

Yes, older HTML files are agreeable to the HTML standard. Older HTML files work on the newer browsers, though some features may not work.

What are the rules established for HTML5 ?

Some rules for HTML5 were established:

New features should be based on HTML, CSS, DOM, and JavaScript
Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
The development process should be visible to the public.

R4R Team
R4R provides HTML5 Freshers questions and answers (HTML5 Interview Questions and Answers) .The questions on website is done by expert team! Mock Tests and Practice Papers for prepare yourself.. Mock Tests, Practice Papers,HTML5 interview question for experienced,HTML5 Freshers & Experienced Interview Questions and Answers,HTML5 Objetive choice questions and answers,HTML5 Multiple choice questions and answers,HTML5 objective, HTML5 questions , HTML5 answers,HTML5 MCQs questions and answers Java, C ,C++, ASP, C# ,Struts ,Questions & Answer, Struts2, Ajax, Hibernate, Swing ,JSP , Servlet, J2EE ,Core Java ,Stping, VC++, HTML, DHTML, JAVASCRIPT, VB ,CSS, interview ,questions, and answers, for,experienced, and fresher R4r provides Python,General knowledge(GK),Computer,PHP,SQL,Java,JSP,Android,CSS,Hibernate,Servlets,Spring etc Interview tips for Freshers and Experienced for HTML5 fresher interview questions ,HTML5 Experienced interview questions,HTML5 fresher interview questions and answers ,HTML5 Experienced interview questions and answers,tricky HTML5 queries for interview pdf,complex HTML5 for practice with answers,HTML5 for practice with answers You can search job and get offer latters by studing .learn in easy ways .