HTML Interview Questions and Answers

I have provided you top HTML Interview Questions and Answers based on my working experience. These are very helpful to get a web designing or development job in 2021.

According to my working experience, I have provided the best collections of HTML Questions with answers and examples. It will help to face the technical interview round.

Table of Contents

HTML Interview Questions and Answers

You will the top 48 HTML Interview Questions that can help you to raise your confidence in the interview. So, you must begin to revise all the given questions. Don’t skip any one of the given HTML questions that may be asked by the interviewer.

PHP Interview Questions and Answers 2021

Most HTML Important Interview Questions

This category is the collection of the most important HTML Interview Questions with answers and examples. It is more necessary for beginners & experienced developers.

1. What is HTML?

HTML is the short form of HyperText Markup Language

It is used to create the structure of the static web page.

It sends the information to the browser to display content/text in a proper format based on its element.

2. What is <!DOCTYPE>?

<!DOCTYPE> is not an HTML tag. It is a representation of the type of document.

It gives information about the current version of HTML.

We have to always declare it before the <html> tag

It is not case sensitive means that We can declare it like <!doctype> or <!DOCTYPE>

3. What is the viewport?

The viewport is the section of the webpage where content/text is visible to the users.

It is used to optimize the visible content according to the different screen sizes of the device.

We have to add the following meta tag within the <head> tag.

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

4. What is difference between HTML4 & HTML5?

HTML4

The doctype declaration is too long and complex.
It can’t support multimedia like an audio, video without flash player.
It supports all the old web browser.
Drag and Drop content can’t work.
Nav, Header & footer do not have their own element.

HTML5

The doctype declaration is very simple like <!DOCTYPE>
It can support multimedia like audio & video
It supports both old & new web browser
Drag & drop content can work
Nav, Header & footer have their own element like <nav>,<header> & <footer>.

5. What is the difference between the HTML tag and the HTML element?

HTML Tag

It is the representation of HTML content or text.

It always comes in pairs like <tagname></tagname>

<tagname> Open tag/start-tag
</tagname> close tag/end tag

Example

<p></p>     <!--paragraph tag-->
<h2></h2>   <!--heading tag-->
<a href=""></a> <!--anchor tag-->

HTML Element

It is a group of open tag, close tag, and plain text.

It always comes in a group like

<opentag>Plaintext</closetag>

Example –

<p>paragraph element</p>
<h2>Heading element</h2>
<a href="">anchor element</a>

6. What is an empty element?

An empty element does not have a closing tag.

It does not come in pairs.

Example –

<br>, <hr>, <img> etc

7. How to set an image to the web page?

We can set an image to the web page using <img> tag with source attribute like the following declaration.

<img src="address of image">

8. How to set the background image of the web page?

We can set the background image to the web page using the following inline CSS

<div style="background-image:url(address of image)"></div>

9. What is the use of an alt attribute?

an alt attribute is used with an image tag to display the information of an image in case the image will not display on the web browser.

Example –

Suppose that We have passed the wrong address to the src attribute or images do not display due to any reasons, the value of alt attribute will display.

<img src="wrong address of image" alt="This is child image">

10. What is the difference between the inline element & block element?

Inline Element

The inline element does not cover full width(100%) of the screen.

Its width depends on the length of its content

Example –

<span>this is span</span>

<img src="">

<a href="">this is link</a>

Block Element

The block element always covers full width(100%) of the screen.

Its width does not depend on the length of its content

Example –

<p>this is paragraph</p>
<h2>this is heading</h2>

11. How to open the link into a new tab?

We can open the link into a new tab like following

<a href="new-tab.html" target="_blank">open new tab</a>

Basic HTML interview Questions for Freshers

This is the collection of the basic HTML Interview Questions with answers and examples. It is more necessary for beginners & experienced.

These types of HTML questions are asked in a face to face or telephonic round. So, you must prepare it.

1. Is HTML case sensitive?

No. because all the HTML elements can be written uppercase or lowercase.

<h2>This is a lowercase element</h2>
<H2>This is an uppercase element</H2>

2. Is the HTML programming language?

No. It is just a markup language. because it has no logic to create a dynamic web page.

3. Does HTML produce an error?

No.Because it is not a programming language but If We forget to declare end tag, the structure of content will not display in a proper format.

4. Which is the most important heading tag?

<h1></h1> tag is the most important heading tag.

5. How to comment in HTML

We can comment on a statement like the following format

<!--
   this is a comment line
 -->

6. What are the types of the list?

The list has two following types

Order List: <ol></ol>
Unorder List: <ul></ul>

7.How to define iFrame

an iframe is used to display another document like files, web page in the current web page.

<iframe src="https://codingstatus.com">
  <p>This browser does not support</p>
</iframe>

8. How to add favicon in HTML

We can add the favicon to the webpage in HTML like the following the example.

<link rel="icon" href="icon path" type="image/jpg">

9. What is the difference between subscript and superscript?

Subscript

Subscript moves downward from half of its normal position.

<p>H<sub>2</sub>O</p>

Superscript

Subscript moves upward from half of its normal position.

<p>2<sup>th</sup></p>

10. How to move content in HTML?

Html content can move using <marquee></marquee> tag

<marquee>I am moving</marquee>

Advanced HTML Interview Questions for Experienced

It is the collection of the basic Advanced HTML Interview Questions with answers and examples. It is more necessary for experienced developers. But freshers may prepare it

1.Explain HTML attribute

An attribute is used to add additional information to the HTML element.

It is always declared within the start tag like attribute="value"

We can declare attribute one or more time within the start tag.

Example –

<h2 align="center">This is an attribute</h2>
<img src="path" with="400px" height="200px" alt="child image">

2. What are the different types of heading?

HTML heading is divided into six categories such as the following tags.

HTML Heading	Syntax
First Heading	`<h1></h1>`
Second Heading	<h2></h2>
Third Heading	<h3></h3>
Fourth Heading	<h4></h4>
Fifth Heading	<h5></h5>
Sixth Heading	<h6></h6>

3. Explain the different values of the target attribute?

Target attribute has five values such as

Value	Definition
_self	It opens the link in the current tab.
_blank	It opens the link in new tab
_parent	It opens the link in parent tab
_top	It opens the link in the full body of the tab
_framename	It opens the link in the iframe that name is declared to the target attribute

4. Explain Image Map?

The image map is the defined area of an image where we can click.

An image map is created to redirect the link to the given address.

rect – rectangular area
circle – a circular area
poly – a polygonal area
default – the entire area is created by the following shape.

<img src="image path" usemap="mapname">

<map name="mapname">
  <area shape="rect" coords="34,44,270,350"  href="url">
  <area shape="rect" coords="290,172,333,250"  href="url">
  <area shape="circle" coords="337,300,44" href="url">
</map>

5. What are the grouping elements?

The HTML grouping element can create a section or subsection to bind more than one HTML element.

HTML has two grouping elements.

div element

A div element is used to group one or more HTML elements/content.

It is a block-level element

<div>
    <h2>section title</h2>
    <p>section paragraph</p>
   <div>first section</div>
   <div>second section</div>
</div>

span element

A span element is used to group one or more text of an element.

<h2> I <span>am</span> a grouping <span>element</span></h2>

6. What is the difference between semantic and non-semantic elements?

Semantic element

The name of a semantic element is always related to its content.

<form></form>   

<table></table>

<ol></ol>

<p><p>

non-semantic element

The name of a non-semantic element is not related to its content.

<div></div>

<span></span>

7. How to embed video to the web page?

We can embed video to the web page as

<video width="100%" height="auto" controls>
  <source src="video path" type="video/mp4">
   this video does not support your browser
</video>

8. How to embed audio into the webpage?

We can embed audio into the webpage.

<audio controls>
  <source src="audio path" type="audio/mpeg">
This audio does not support your browser
</audio>

Summery

Dear Developers, All the above HTML interview questions are enough to qualify for the interview. If you have any questions regarding this topic or another coding topic, kindly put your question into the below comment box.