HTML Interview Questions and Answers

html interview questions and answers

We have covered the list of top and most frequently asked HTML Interview Questions and Answers. Below “HTML interview questions” are suitable for new, intermediate, and advanced learners. HTML developer interview questions and answers will help you to prepare and crack HTML interviews.

Topic Navigation :

HTML Interview Questions and Answers for Freshers

HTML Interview Questions for Experienced Professionals

HTML5 Interview Questions

HTML Interview Questions for Freshers

What is HTML?

HTML stands for HyperText Markup Language.

  • It is the language of the World Wide Web.
  • It is a standard text formatting language.

What is the basic structure of HTML?

<html>
      <head>
            <title>Hello World</title>
      </head>
      <body>
            <h1>Welcome to Interview Questions Blog</h1>
      </body>
</html>

What are HTML tags?

We use HTML tags to build a DOM tree. HTML elements have both start and end tags.

Start Tag is generally called an Opening tag.

End Tag is generally called a Closing tag.

What is Doctype in HTML?

A Doctype or document type declaration is an instruction that tells the web browser about the markup language in which the current page is being present. The Doctype lets the browser know about the version or standard of HTML or any other markup language in the document model.

What are HTML start and end tags?

<html> is start tag and </html> is end tag.

Where is the title tag located?

The title tag is present in the head section of the HTML document.

Explain the Anchor tag and its use?

The Anchor tag acts as a link to any internal or external path. A destination URL is present in the href attribute of the Anchor tag.

Anchor Tag Example :
<a href="google.com">Go To Google</a>

Explain the target attribute?

The target attribute specifies the browser to open a link in a new tab or the existing tab.

If target=_blank –> New Tab

If target=_self –> Same Tab

Target Attribute Example :
<a href="google.com" target="_blank">Opens Google in new tab</a>
<a href="google.com" target="_self">Opens Google in same tab</a>

Explain HTML Comments?

There are two types of HTML Comments.

  • Single Lined
  • Multi Lined.
<!-- This is a commented Line in HTML -->

How many types of headings do we have in HTML? What are they?

There are six types of headings from h1 to h6. Below are the syntax and view of heading tags.

<h1>This is H1 Tag</h1> -- Syntax

This is H2 Tag

This is H3 Tag

This is H4 Tag

This is H5 Tag
This is H6 Tag

What are Meta Tags?

Meta tags are snippets of text that describe a page’s content. Meta tags are very much helpful for SEO.

<meta name="" content="">

Why we use the lang attribute?

Lang attribute is included in the tag to declare the language of the web page. Screen readers will pronounce the text of the page if we use it.

<html lang="en-US">

Explain the usage of the style tag?

Style tag can be used in this format CSS here. We can keep all the CSS in between the start and end of style tags.

Explain the usage of the style attribute?

Firstly, the Style attribute is different from the style tag. Secondly, the Style attribute applies specific CSS to that particular element only. Below is an example of the style attribute.

style="CSS goes here"

Explain the usage of the link attribute?

We can link any external CSS or image or js with the help of the link attribute.

Explain about script tag?

Script tags will be useful to load JS files. We can even include direct JS code in between them.

Can we differentiate anchor link states?

Yes. There are three states to differentiate.

Unvisited: Blue.

Visited: Purple.

Active: Red.

How do we keep email settings to a link?

We can use the “mailto” attribute for email.

<a href="mailto:sampleemail">sampleemail</a>

HTML Interview Questions and Answers for Experienced Professionals

What happens if the href has # value?

If href has # value and when user clicks on it he will be redirected towards page top.

<a href="#">Go To Top of the Page</a>

What happens if href is blank ?

Firstly, When we click on blank href nothing would happen. Secondly, as per WCAG standards, href should not be kept blank.

What is HTML Web Worker?

Web workers are the scripts run as a background thread thereby reducing the load on the main execution thread.

More about Web Workers in HTML5 – Web Workers HTML

Explain Marquee?

Marquee is a tag that has an animation effect of scroll. whatever we keep inside marquee tag that will be scrolling infinitely from one end to the other.

Which attribute do we use for manual focus on an element on order?

we use tabindex to the elements to get focus applied. we can specify the order of priority and the browser will select elements based on that order.

What is Quirks mode?

For instance, If an HTML document doesn’t have Doctype, then elements will be rendered based on the browser. As a result, the content will be browser-specific.

What is SVG ?

SVG stands for Scalable Vector Graphics. It is a W3C standard to define graphics for web.

Explain Canvas Element ?

Canvas element will be useful for drawing graphics via scripting in the webpage with the help of Javascript.

Explain the usage of IFrame ?

The HTML <iframe> tag specifies an inline frame. An Inline frame will be useful to Embed one document inside the current HTML document.

Explain types of storage browsers have ?

There are two main popular storages namely local and session.

Differentiate between preload and prefetch ?

Preload is a declarative fetch which forces the browser to make request to fetch the resource without blocking DOM events.

Prefetch will indicate the browser that it needs the resource but delegates to browser if needs to load or not.

What is dns-prefetch ?

DNS prefetch – Attempt to resolve domain names before requested.

How do we use keywords for site in meta tag ?

<meta name="keywords" content="HTML, CSS, JavaScript">

Why we use itemscope and itemtype ?

An element with the itemscope attribute specified creates a new item , a group of name-value pairs that describe properties, and their values, of the thing represented by that element. Elements with an itemscope attribute may have an itemtype attribute specified, to give the item types of the item.

Explain viewport ?

The viewport is the user’s visible area of a web page. It varies with the device – For instance, it will be smaller on a mobile phone than on a computer screen. You should include the following element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Can we preload css, js and images ?

Yes. we can use link tag to preload in following way.

<link rel="preload" href="styles.js" as="script">

What is favicon icon and where is it present on UI ?

Favicon – A small file containing one or more icons which will be useful to represent the website or a blog. Other names are tab icon, website icon, URL icon, or a bookmark icon. This icon usually displays on the address bar, browser’s tab, browser history, bookmark bar.

How do we use async and defer attributes ?

<script src="async.js" async>
<script src="defer.js" defer>

What is the difference between async and defer ?

Each async script will execute at the first opportunity after finished downloading and before the window’s load event. Whereas the defer scripts executes in the order they occur in the page. However, both are useful in increasing page load speed.

With which attributes we integrate Angular with HTML ?

Angular can we used in html with its directives written as html attributes as shown below.

<div ng-init="loadFunction()">

What is the difference between ID and Class Selectors ?

Class selector: Represented with “.” – Used to identify multiple elements.

ID selector: Represented with “#” – Used to identify single element.

How pseudo selectors will be appended in HTML ?

Pseudo selectors like before and after are appended prepended based on the selectore. If we have before css to a div then ::before will be prepended to that div and if we have after css then ::after will be appended to that div.

What is the difference between Div and Span ?

A div is a block-level element and a span is an inline element. The div will be useful to wrap sections of document and spans will be useful to wrap small portions of text.

How do we navigate to a particular element from anchor href path ?

By giving id in href path as shown.

Example of Anchor with ID href :
<a href="#destinationId">

What is WCAG ?

Web Content Accessibility Guidelines 2.0 defines how to make web content more accessible to people with disabilities, and older people with changing abilities due to ageing/aging. WCAG provides a provide common definition for accessible content, a benchmark.

Is it necessary to keep alt attribute to image tag ?

Screen readers uses alt altribute and a person can interact the elements by listening to the audio.

Every image should have an alt attribute to be accessible, but it need not contain text.

Explain the usage of aria-attributes ?

Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities. They are normally useful as any other html attribute.

Is HTML rendered separately based on browser ?

When a web page is loaded, the browser first reads the TEXT HTML and constructs DOM Tree from it. Then it processes the CSS whether that is inline, embedded or external CSS and constructs the CSSOM Tree from it. After these trees are constructed, then it constructs the Render-Tree from it. Now if doctype is not present then it will go to quirks mode and content will be rendered based on browser.

What is DOM ?

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web.

The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

Can we dynamically change DOM tree ?

Yes. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

How execution will happen ?

The browser loads the html (DOM) at first. The browser starts to load the external resources from top to bottom, line by line. If a <script> is met, the loading will be blocked and wait until the JS file is loaded and executed and then continue.

Can we use multiple same IDs ?

Element IDs should be unique within the entire document. In other words, if we keep same then it will be a compliance with respect to WCAG standards.

What are the differences between local storage and session storage ?

Local Storage:
  • Local Storage data is permanent and have no expiration time.
  • Local Storage data can be shared between different tabs.
  • Local Storage is scoped to Document origin. No other origins can access the stored objects.
  • 5MB storage space.
  • Accessed by window.localStorage.
Session Storage:
  • Session Storage data is temporary and gets cleared when session ends that is when page is closed.
  • Session Storage data cannot be shared between different tabs even if we have same page on both tabs.
  • Session Storage is scoped to Document origin. No other origins can access the stored objects.
  • 5MB storage space.
  • Accessed by window.sessionStorage.

How DOM Tree is built ?

Steps involved in DOM Tree :
  • Firstly, browser requests the document from the server over HTTP/HTTPS/HTTP2 protocol.
  • Server sends a String response to the client browser.
  • Now, browser treats every html tag as an Object and builds a model and then renders it.
  • This is done in a recursive way which becomes tree structure and this is how DOM (Document Object Model) tree is built.

HTML5 Interview Questions

What is HTML5 ?

HTML5 is the latest version of Hypertext Markup Language, the code that describes web pages.

What is the design intent of HTML5 ?

HTML5 was designed to achieve below goals:

  • No need of external plugins like flash to deliver rich content like videos.
  • Structured and semantic elements.
  • Cross-browser compatibility checks and handlers.
  • Overcomes few issues of older html and xhtml.

What are the new features of HTML5 ?

  • Support for embedding rich content like graphics, videos with <canvas>, <video> tags.
  • No need of plugin support like Flash.
  • Web worker support to reduce javascript execution time.
  • Geolocation API.

Explain about Geolocation API?

Geolocation is basically an API which gets the geographical position of a user. This will happen only if user approves to read the location. Most of the businesses need the location so that they can target the location specific relevant data to the users. we can access the geolocation from navigator object of the browser. Geolocation works best for the devices which uses GPS.

What is HTML5 datalist?

The HTML5 <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls. It is having autocomplete option as well.

Can we include MathML in HTML5?

Yes. We do can include MathML in HTML5 with help of math tags.

Example of Math tags:

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
    </mrow>
</math>

Reference : MathML in HTML5

What are Web Sockets?

Web Socket is basically a bidirectional next generation technology for web applications which operates over a single socket via Javascript in client’s browser.

Below is the syntax to create new WebSocket API Object.

var mySocket = new WebSocket(URL, [protocol] );

We will be bringing up more html interview questions and answers very soon.

Please feel free to comment if you have any technical query on html interview questions.

Thanks for visiting Interview Questions Blog !!!

Related Article:

HTML Tutorial

Leave a Reply

%d bloggers like this: