HTML Interview Questions and Answers

A List of top and most frequently asked html interview questions and answers.

What is HTML ?

HTML stands for Hyper Text Markup Language. It is a language of World Wide Web. It is a standard text formatting language.

What are tags ?

We use tags to build DOM tree. Tags can be opening and closing.

What is Doctype in HTML?

A Doctype or document type declaration is an instruction which tells the web browser about the markup language in which the current page is written. The Doctype is not an element or tag, it lets the browser know about the version of or standard of HTML or any other markup language that is being used in the document.

Syntax:

<!DOCTYPE html>

What is HTML5 ?

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

What are html start and end tags ?

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

Where title tag is located ?

Title tag is located in head section of html document.

Explain Anchor and its use ?

Anchor tag will be used as link to any other path. we have an option to give href path of destination element in anchor.

Example Anchor:

<a href="sampleurl">sample text</a>

Explain target attribute ?

Target attribute specifies browser how a link should be opened. For example, if target=_blank then browser will open a link in new tab but if target=_ self then browser will open link in the same tab.

What happens if href has # value ?

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

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.

Explain HTML Comments ?

HTML Comments are categorized into two categories : single lined and multilined.

How many types of headings we have in HTML and what are they ?

There are six types of headings starting from h1 to h6.

Example Heading:

<h3>HTML Interview Questions and Answers</h3>

What are Meta tags ?

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

Why we use lang attribute ?

Lang attribute should be included in <html> tag to declare language of web page. Screen readers will prounounce the text of page properly if we use it.

Explain usage of style tag ?

Style tag can be used in this format <style>css here</style>. whatever css is present we can keep that between start and end of style tags.

Explain usage of style attribute ?

Firstly, Style attribute is different from style tag. Secondly, Style attribute applies specific css to that particular element only. style attribute can be used on elements in the below way.

Example Style Attribute:

Explain the usage of link attribute ?

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

Example Link Tag:

Explain about script tag ?

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

Example Script Tag:

What is HTML Web Worker ?

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

More about Web Workers in HTML5 - Web Workers HTML

Explain marquee ?

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

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

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

What is Quirks mode ?

For instance, If html document doesn't have Doctype, then elements will be rendered based on browser. As a result, 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.

Can we differentiate anchor link states ?

Yes. There are 3 states to differentiate.

Unvisited : blue in color.

Visited : purple in color.

Active : red in color.

How do we keep email setting to a link ?

In the below way we can keep email setting to a link.

Example mailto:

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 ?

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.

Example Preload Syntaxes:

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 ?

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 Id path in href:

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 is HTML datalist ?

The HTML <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.

Watch out this space for more html interview questions and answers.

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

Related Article : HTML Interview Questions

Thanks for Visiting !!!