HTML interview question set 2/HTML Interview Questions and Answers for Freshers & Experienced

What is Web SQL?

Web SQL Database API isn’t actually part of the HTML5 specification but it is a separate specification which introduces a set of APIs to manipulate client-side databases using SQL.

What is Modernizr in HTML5?

Modernizr is a JavaScript library which detects the HTML5 and CSS3 features your visitor’s browser supports. In detecting feature support, it allows developers to test for some of the new technologies and then provide fallbacks for browsers.

What is Server-Sent Event in HTML5?

Server-sent events standardize how we stream data from the server to the client. Along with HTML5, WHATWG Web Applications 1.0 introduces events which flow from the web server to the web browsers are known as Server-Sent Events (SSE).

Why should we use IndexedDB?

IndexedDB is a newer facility for storing large amounts of data in the browser. You can use it to store data of any JavaScript type, such as an object or array, without having to serialize it.

What is the major improvement with HTML5 in reference to Flash?

Flash is not supported by major mobile devices such as iPad, iPhone, and universal android applications. Those mobile devices have a lack of support for installing flash plugins. While compared to Flash, HTML5 is very secured and protected which eliminates major concerns that we have seen with Flash.

What is the difference between HTML5 interaction in Sencha and Twitter/Bootstrap?

Sencha and Twitter/Bootstrap are both HTML development frameworks that integrate HTML5, CSS3, and JavaScript. The major difference is that in Sencha, the three languages are all comingled together in code, whereas in Bootstrap, HTML, and CSS and decoupled.

What is the lifetime of local storage?

Local storage does not have a lifetime it will stay until either the user clears it from the browser or you remove it using JavaScript code.

What are web sockets?

It’s is a next-generation bidirectional communication technology for web applications which operates over a single socket and is exposed via a JavaScript interface in HTML 5 compliant browsers.

Once you get a Web Socket connection with the web server, you can send data from browser to server by calling a send() method, and receive data from server to browser by an onmessage event handler.

What are the drawbacks of cookies?

1. These are included with every HTTP request, thereby slowing down your web application by transmitting the same data.
2. And are included with every HTTP request, thereby sending data unencrypted over the internet.
3. They are limited to about 4 KB of data. Not enough to store required data.

Can you use MathML tags directly in HTML5 without any plugin?

Yes! The HTML syntax of HTML5 allows for MathML elements to be used inside a document using <math>…</math> tags.

What is the purpose of the ‘autofocus’ attribute in HTML5?

It is a simple one-step pattern, easily programmed in JavaScript at the time of document load, automatically focus one particular form field.

What are the reasons to use preprocessor

you write css in high level with some special syntax (declaring variable, nested syntax, mathematical operations, etc.) and that is compiled to css. Preprocessor helps you to speed up develop, maintain, ensure best practices and also confirms concatenation, compression, etc.

How to create a zebra striped table with CSS?

To create a zebra-striped table, use the nth-child() selector and add a background-color to all even (or odd) table rows:

tr:nth-child(even) {
background-color: #f2f2f2

What is pseudo element? what is pseudo class?

pseudo elements helps you to add cosmetics contents. pseudo elements generates content where as pseudo class deals with state of the element. for example, you can style :first-letter of every paragraph. similarly, :first-line and fancy stuff with :before, :after

What is the purpose of the ‘placeholder’ attribute in HTML?

HTML introduced a new attribute called placeholder. This attribute on <input> and <textarea> elements provides a hint to the user of what can be entered in the field.

What is Web Forms 2.0?

This is an extension to the forms features found in HTML4. Form elements and attributes in HTML5 provide a greater degree of semantic mark-up than HTML4. And also remove a great deal of the need for tedious scripting and styling that was required in HTML4.

How can you clear sides of a floating element?

If you clear a slide of an element, floating elements will not be accepted on that side. With 'clear' set to 'left', an element will be moved below any floating element on the left side. clear is used to stop wrap of an element around a floating element.

What are the benefits of CSS sprites?

If a web page has large no. of images that takes a longer time to load because each image separately sends out an HTTP request. The concept of CSS sprites is used to reduce the loading time for a web page because it combines the various small images into one image. It reduces the number of HTTP requests and hence the loading time.

CSS sprites combine multiple images into one image, limiting the number of HTTP requests a browser has to make, thus improving load times. Even under the new HTTP/2 protocol, this remains true.

Under HTTP/1.1, at most one request is allowed per TCP connection. With HTTP/1.1, modern browsers open multiple parallel connections (between 2 to 8) but it is limited. With HTTP/2, all requests between the browser and the server are multiplexed on a single TCP connection. This means the cost of opening and closing multiple connections is mitigated, resulting in a better usage of the TCP connection and limits the impact of latency between the client and server. It could then become possible to load tens of images in parallel on the same TCP connection.

However, according to benchmark results, although HTTP/2 offers 50% improvement over HTTP/1.1, in most cases the sprite set is still faster to load than individual images.

To utilize a spritesheet in CSS, one would use certain properties, such as background-image, background-position and background-size to ultimately alter the background of an element.

What is RWD (Responsive web design) ?

This technique is used to display the designed page perfectly on every screen size and device. For example: Mobile, Tablet, desktop, laptop etc. You don't need to create a different page for each device.

What is the purpose of using alternative texts in images?

The basic purpose of using alternative texts is to define what the image is about. During an image mapping, it can be confusing and difficult to understand what hotspots correspond to a particular link. These alternative texts come in action here and put a description at each link which makes it easy for users to understand the hotspot links easily.

Name 3 ways to decrease page load?

1. LocalStorage
2. Caching resources
3. DNS-prefetch (sample below)
4. Keep resources on a CDN

What is Critical Rendering Path?

Constructing the DOM Tree
Constructing the CSSOM Tree
Running JavaScript - parser blocking resource
Creating the Render Tree
Generating the Layout

How can you make a bulleted list in HTML?

An unordered list (<ul>) is used to create a bulleted list in HTML. Below is a simple example to create bulleted list in HTML.

<p>Fruits List</p>

What isCell Spacing and Cell Padding?

Cell Spacing is referred to space/gap between the two cells of the same table.
Cell Padding is referred to the gap/space between the content of the cell and cell wall or Cell border.

<table border cellspacing=3>
<table border cellpadding=3>
<table border cellspacing=3 cellpadding=3>

What is the difference between standards mode and quirks mode?

In Quirks mode, layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In Standards mode, the behavior is described by the HTML and CSS specifications.

For HTML documents, browsers use a <!DOCTYPE html> in the beginning of the document to decide whether to handle it in quirks mode or standards mode.

<!DOCTYPE html>
<html lang="en">
<meta charset=UTF-8>
<title>Hello World!</title>

How does the browser rendering engine work?

In order to render content the browser has to go through a series of steps:

1. Document Object Model(DOM)
2. CSS object model(CSSOM)
3. Render Tree
4. Layout
5. Paint

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.

Explain some of the pros and cons for CSS animations versus JavaScript animations?

Regarding optimization and responsiveness the debate bounces back and forth but, the concept is:

CSS animations allows the browser to choose where the animation processing is done, CPU or the GPU. (Central or Graphics Processing Unit)

That said, adding many layers to a document will eventually have a performance hit.

JS animation means more code for the user to download and for the developer to maintain.

Applying multiple animation types on an element is harder with CSS since all transforming power is in one property transform

CSS animations being declarative are not programmable therefore limited in capability.

What is the purpose of the alt attribute on images?

The alt attribute provides alternative information for an image if a user cannot view it. The alt attribute should be used to describe any images except those which only serve a decorative purposes, in which case it should be left empty.

<img src="pancakes.png" alt="Stack of blueberry pancakes with powdered sugar">

What is HTML DOM?

HTML DOM is an object model for HTML and Application Programming Interface(API) for Javascript to work with HTML elements, properties and their methods.

What is the head tag used for?

Head tag (<head>) in Html is used to specify important information (metadata) about certain webpage.Common elements placed between <head> tag of html are <base>, <link>, <meta>, <noscript>, <script>, <style> <title>

How can you make a bulleted list in HTML?

An unordered list (<ul>) is used to create a bulleted list in HTML. Below is a simple example to create bulleted list in HTML.

<p>Fruits List</p>

What is an inline text?

Inline text or inline elements does not cause a line break on a HTML Page or container they takes only space bounded by its opening and closing tag. <span>, <a>, <b>,<input>, <kbd>, <label> are few examples of inline elements in HTML.

What is a block element?

A block level element in HTML always starts with a new line on document and expand to full width of the page or container. <address>, <p>,<dir>,<div>,<figure>, <header> are few examples of block level elements in HTML.

Who is Known as the father of World Wide Web (WWW) ?

Tim Berner Lee(Tim Berners-Lee) is known as the father of "World Wide Web".

How to create mailto link in HTML?

Basically, when we usually start with a hyperlink that is Mailto rather than using HTTP or others, the browser should be able to compose an email in the visitor’s default email program on their computer. There are two ways to insert a mailto link into a HubSpot page or email, just by inserting a hyperlink into the rich editor or inputting into the source code. Option one is basically nothing just to insert a mailto link as a hyperlink, also highlight the text or click on the image as you apply on the mailto link to for your contacts or visitors to click on and finally click Add the link to finish. Option two is to Insert a mailto link into the source code and Click Save to finish then Publish or Update your page.

<a href="" target="_top">Send

What is grouping in HTML?

Grouping is used to group several HTML controls like input, textarea, selects as well as labels ( <label>) within a web form. In HTML <fieldset> element is used for Grouping.

Can we modify the attribute’s value of the HTML tag dynamically?

Yes, it is possible to edit and modify the value of an attribute of an HTML tag. This can be done via Javascript by setting the attribute value via element’s id or class.


1. <input type=“text” id=“inputField”>
2. document.getElementById(“inputField”).attr(“type”, “password”);

What is the advantage of collapsing white space?

White spaces are a sequence of blank characters. Collapsing multiple spaces into one helps you indent your text effectively and improve the readability of the code.

What types of CSS can be included in HTML?

There are three types of CSS that you can include in your HTML program.

Inline CSS: This is one where the styling is kept within the body of the element.
Internal or embedded CSS: As and when you need to modify the appearance of a document, CSS rules are defined in the head section. Also, the styling is internal and is meant for a single document.
External CSS: As the name says, the style property is in a separate file. It should be noted that the file has a .css extension. Link this external document to the original page and in the head section. This is best when you need to have multiple pages of the same style.

What is the difference between DIV and SPAN in HTML?

The main difference between DIV and SPAN is that DIV is a block line element whereas span is an inline element. The former is used before and after huge chunks of code. On the other hand, span limits itself within a line or a paragraph.

What isCell Spacing and Cell Padding?

Cell Spacing is referred to space/gap between the two cells of the same table.
Cell Padding is referred to the gap/space between the content of the cell and cell wall or Cell border.


<table border cellspacing=3>
<table border cellpadding=3>
<table border cellspacing=3 cellpadding=3>

Can HTML files work well on the new browsers?

HTML files can effectively work with all browsers given that it is compatible with all of the basic standards of HTML.

What are the HTML tags used to display the data in the tabular format?

Here is the list of HTML tags that help display data in a tabular format.

<table>: To define a table.

<tr>: To define a table row.

<th>: To define a table’s header cell.

<td>: To define a cell within the table.

<caption>: To define a caption for the table.

<colgroup>: To specify groups of columns for table formatting.

<col>: Used along with <colgroup> to depict the property of every column.

<tbody>: To group the body content within a table.

<thead>: To group the header content.

<tfooter>: To group the footer content.

Cite differences between block-level and inline elements in HTML?

Conventionally, an HTML element has two parts:

1. Block-level element,
2. Inline element

Block-level elements begin with a newline and can have another block element within it. These have structures larger than that of inline elements. For example: <div>, <form>, <img>, etc.

On the other hand, inline elements do not start with a newline and can only have data or another inline element within it. Example: <input>, <a>, <b>, etc.

Is there any hierarchy that is followed on the style sheets?

Yes, there is a hierarchy that is followed on the style sheet, which includes three different style definitions. The first definition, which is closest to the actual tag, takes precedence. The second definition, which is Inline style, takes priority over the embedded style sheet. The third definition is the external style sheets, which take priority over the others.

Can the stylesheet limit the number of style definitions?

No, the style sheets do not limit the number of style definitions for a given selector, which can be included within the brackets. However, every new style definition needs to be separated from others using the semicolon symbol.

What is the difference between active links and regular links?

An active link is when they have the focus when the mouse is placed over them, while the standard links are those who do not have the mouse cursor over the link.

Can the text appear outside the browser?

By default, the text cannot appear outside the browser, but, in case the text is part of a table cell with a predefined width, it could extend beyond the browser window.

What would happen if the HTML Document does not contain <!DOCTYPE>?

It instructs the Web Browser about the version of HTML used for creating the Web page.
If the developer misses declaring the DOCTYPE information in the code, then new features and tags provided by HTML5, like <article>, <footer>, and <header> will not be supported. Additionally, the Browser may automatically go into Quirks or Strict Mode.

R4R Team
R4R provides HTML Freshers questions and answers (HTML 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,HTML interview question set 2,HTML Freshers & Experienced Interview Questions and Answers,HTML Objetive choice questions and answers,HTML Multiple choice questions and answers,HTML objective, HTML questions , HTML answers,HTML 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 HTML fresher interview questions ,HTML Experienced interview questions,HTML fresher interview questions and answers ,HTML Experienced interview questions and answers,tricky HTML queries for interview pdf,complex HTML for practice with answers,HTML for practice with answers You can search job and get offer latters by studing .learn in easy ways .