5/24/2021 HTML Interview Questions and Answers (2021) - InterviewBit

Self-Assessment Test

Looking to crack SDE Interviews?

Get a personalise Learning Plan for FREE!

ttempt Now! (https://www.scaler.com/event/know-where-you-stand-free-self-

ssessment-test? 15000
Develope
tm_source=ib&utm_medium=top_nudge&utm_campaign=sat&utm_content=/html- Registere
terview-questions)

HTML Interview Questions

This article will cover the introduction of the HTML language, basic to advanced interview questions, how
to clear HTML interviews, and some MCQs for you to solve.

Introduction:
Before starting with the interview questions on HTML Language, let’s first go through HTML, what is HTML,
the career opportunities it provides, etc.

HTML stands for Hyper Text Markup language. It is a standard text formatting language used for
developing web pages released in 1993. HTML is a language which is interpreted by the browser and it
tells the browser what to display and how to display.

HTML is a must to learn language, if anyone wants to work in the web development domain [Web
designers, Web Developers]. HTML alone is not sufficient for a web developer because HTML only defines
the structure of the data that will be rendered on the browser in a webpage, to make it visually appealing
and to make it functional, we will need to use CSS and Javascript respectively.

The latest version of HTML is HTML5. There are two main components in HTML language, Tags and
Attributes. The below image shows some basic HTML tags and attributes.

https://www.interviewbit.com/html-interview-questions/ 1/18
5/24/2021 HTML Interview Questions and Answers (2021) - InterviewBit

Interview Questions:
1. What are some of the advantages of HTML5 over its
previous versions?
Some advantages of HTML5 are:-

1. It has Multimedia Support.

2. It has capabilities to store offline data using SQL databases and application cache.
3. Javascript can be run in the background.
4. HTML5 also allows users to draw various shapes like rectangles, circles, triangles, etc.
5. Included new Semantic tags and form control tags.

2. How can we include audio or video in a webpage?

HTML5 provides two tags: <audio> and <video> tags using which we can add the audio or video directly in
the webpage.

3. Are the HTML tags and elements the same thing?

No. HTML elements are defined by a starting tag, may contain some content and a closing tag.For
example, <h1>Heading 1</h1> is a HTML element but just <h1> is a starting tag and </h1> is a closing
tag.

4. What are tags and attributes in HTML?

Tags are the primary component of the HTML which defines how the content will be structured/ formatted,
whereas Attributes are used along with the HTML tags to define the characteristics of the element. For
example, <p align=”center”>Interview questions</p>, in this the ‘align’ is the attribute using which we will

https://www.interviewbit.com/html-interview-questions/ 2/18
5/24/2021 HTML Interview Questions and Answers (2021) - InterviewBit

align the paragraph to show in the center of the view.

5. What are void elements in HTML?

HTML elements which do not have closing tags or do not need to be closed are Void elements. For
Example <br />, <img />, <hr />, etc.

6. Inline and block elements in HTML?

Inline Block

Inline elements just take up the space that is Block elements start on a new line and
absolutely necessary for the content and does consume the full width of the page
not start from a new line.Example:- <span>, available.Example:- <div>, <p>, <header>,
<a>, <strong>, <img>, <button>, <em>, <footer>, <h1>...<h6>, <form>, <table>,
<select>, <abbr>, <label>, <sub>, <cite>, <canvas>, <video>, <blockquote>, <pre>,
<abbr>, <script>, <label>, <i>, <input>, <ul>, <ol>, <figcaption>, <figure>, <hr>,
<output>, <q>, etc. <article>, <section>, etc.

7. What is the difference between <strong>, <b> tags and

<em>, <i> tags?
The effect on a normal webpage of the tags <strong>, <b> and <em>, <i> is the same. <b> and <i> tags
stands for bold and italic. These two tags only apply font styling and bold tag <b>, just adds more ink to the
text, these tags don't say anything about the text.

Whereas, <strong> and <em> tags represents that the span of text is of strong importance or more
importance and emphatic stress respectively, than the rest of the text. These tags have semantic meaning.

8. What is the difference between <figure> tag and <img> tag?

https://www.interviewbit.com/html-interview-questions/ 3/18
5/24/2021 HTML Interview Questions and Answers (2021) - InterviewBit

The <figure> tag specifies the self-contained content, like diagrams, images, code snippets, etc. <figure>
tag is used to semantically organize the contents of an image like image, image caption, etc., whereas the
<img> tag is used to embed the picture in the HTML document.

9. How to specify the metadata in HTML?

To specify we can use <meta> tag which is a void tag,i.e., it does not have a closing tag. Some of the
attributes used with meta tags are: name, content, http-equiv, etc. The below image tells how to specify the
metadata.

10. What is the significance of <head> and <body> tag in

HTML?
<head> tag provides the information about the document. It should always be enclosed in the <html> tag.
This tag contains the metadata about the webpage and the tags which are enclosed by head tag like
<link>, <meta>, <style>, <script>, etc. are not displayed on the web page. Also, there can be only 1
<head> tag in the entire Html document and will always be before the <body> tag.

<body> tag defines the body of the HTML document. It should always be enclosed in the <html> tag. All
the contents which needs to be displayed on the web page like images, text, audio, video, contents, using
elements like <p>, <img>, <audio>, <heading>, <video>, <div>, etc. will always be enclosed by the <body>
tag. Also, there can be only 1 body element in an HTML document and will always be after the <head> tag.

11. Is the <datalist> tag and <select> tag same?

No. The <datalist> tag and <select> tag are different. In case of <select> tag a user will have to choose
from a list of options, whereas <datalist> when used along with the <input> tag provides a suggestion that
the user selects one of the options given or can enter some entirely different value.

https://www.interviewbit.com/html-interview-questions/ 4/18
5/24/2021 HTML Interview Questions and Answers (2021) - InterviewBit

12. Can we display a web page inside a web page or Is

nesting of webpages possible?
Yes, we can display a web page inside another HTML web page. HTML provides a tag <iframe> using
which we can achieve this functionality.

<iframe src=”url of the web page to embed” />

13. Define Image Map?

Image Map, lets a developer to map/link different parts of images with the different webpages. It can be
achieved by the <map> tag in HTML, using which we can link images with clickable areas.

<img src=”image_url” , usemap=”#workspace” />

<map name=”workspace”>

<area shape=”rect” coords=”34, 44, 270, 350” , href=”xyz.html” />

<area shape=”rect” coords=”10, 120, 250, 360” , href=”xyz.html” />

</map>

14. What is the advantage of collapsing white space?

In HTML, a blank sequence of whitespace characters is treated as a single space character, Because the
browser collapses multiple spaces into a single space character and this helps a developer to indent lines
of text without worrying about multiple spaces and maintain readability and understandability of HTML
https://www.interviewbit.com/html-interview-questions/ 5/18
5/24/2021 HTML Interview Questions and Answers (2021) - InterviewBit

codes.

15. What are Semantic Elements?

Semantic elements are those which describe the particular meaning to the browser and the developer.
Elements like <form>, <table>, <article>, <figure>, etc., are semantic elements.

16. What are HTML Entities?

In HTML some characters are reserved like ‘<’, ‘>’, ‘/’, etc. To use these characters in our webpage we
need to use the character entities called HTML Entities. Below are a few mapping between the reserved
character and its respective entity character to be used.

Entity
Character Entity Name
Number

< &lt; &#60;

> &gt; &#62;

& &amp; &#38;

(non-breaking space) Eg. 10 &nbsp;Eg.

&#160;
PM <p>10&nbsp&nbspPM</p>

17. What are different types of lists in HTML?

https://www.interviewbit.com/html-interview-questions/ 6/18
5/24/2021 HTML Interview Questions and Answers (2021) - InterviewBit

18. Convert the below data into Tabular format in HTML?

S.no., Language, Mostly used for

1, HTML, FrontEnd

2, CSS, FrontEnd

3, Python, BackEnd

19. How is Cell Padding different from Cell Spacing?

Cell Spacing is the space or gap between two consecutive cells. Whereas, Cell Padding is the space or
gap between the text/ content of the cell and the edge/ border of the cell. Please refer to the above figure
example to find the difference.

20. How can we club two or more rows or columns into a

single row or column in an HTML table?
HTML provides two table attributes “rowspan” and “colspan” to make a cell span to multiple rows and
columns respectively.

21. Is it possible to change an inline element into a block level

element?
https://www.interviewbit.com/html-interview-questions/ 7/18
5/24/2021 HTML Interview Questions and Answers (2021) - InterviewBit

Yes, it is possible using the “display” property with its value as “block”, to change the inline element into a
block-level element.

22. In how many ways can we position an HTML element? Or

what are the permissible values of the position attribute?
There are mainly 7 values of position attribute that can be used to position an HTML element:

1. static: Default value. Here the element is positioned according to the normal flow of the document.
2. absolute: Here the element is positioned relative to its parent element. The final position is determined
by the values of left, right, top, bottom.
3. fixed: This is similar to absolute except here the elements are positioned relative to the <html> element.
4. relative: Here the element is positioned according to the normal flow of the document and positioned
relative to its original/ normal position.
5. initial: This resets the property to its default value.
6. inherit: Here the element inherits or takes the property of its parent.

23. In how many ways you can display HTML elements?

1. inline: Using this we can display any block-level element as an inline element. The height and width
attribute values of the element will not affect.
2. block: using this, we can display any inline element as a block-level element.
3. inline-block: This property is similar to inline, except by using the display as inline-block, we can
actually format the element using height and width values.
4. flex: It displays the container and element as a flexible structure. It follows flexbox property.
5. inline-flex: It displays the flex container as an inline element while it’s content follows the flexbox
properties.
6. grid: It displays the html elements as a grid container.
7. none: Using this property we can hide the HTML element.

Below are some of the display types which are rarely used:

1. table
2. inline-table
3. table-cell
4. table-column
5. table-row
6. inline-grid
7. list-item
8. inherit
9. initial
https://www.interviewbit.com/html-interview-questions/ 8/18
5/24/2021 HTML Interview Questions and Answers (2021) - InterviewBit

10. table-caption

24. What is the difference between “display: none” and

“visibility: hidden”, when used as attributes to the HTML
element.
When we use the attribute “visibility:hidden” for an HTML element then that element will be hidden from the
webpage but still takes up space. Whereas, if we use the “display: none” attribute for an HTML element
then the element will be hidden, and also it won’t take up any space on the webpage.

25. What is the difference between <meter> tag and

<progress> tag?
<progress> tag should be used when we want to show the completion progress of a task, whereas, if we
just want a scalar measurement within a known range, or fraction value. Also, we can specify multiple extra
attributes for <meter> tags like ‘form’, ‘low’, ‘high’, ‘min’, etc.

26. How to specify the link in HTML and explain the target
attribute?
HTML provides a hyperlink - <a> tag to specify the links in a webpage. The ‘href’ attribute is used to
specify the link and the ‘target’ attribute is used to specify, where do we want to open the linked document.
The ‘target’ attribute can have the following values:

1. _self: This is a default value. It opens the document in the same window or tab as it was clicked.
2. _blank: It opens the document in a new window or tab.
3. _parent: It opens the document in a parent frame.
4. _top: It opens the document in a full-body window.

27. What is the ‘class’ attribute in HTML?

The class attribute is used to specify the class name for an HTML element. Multiple elements in HTML can
have the same class value. Also, it is mainly used to associate the styles written in the stylesheet with the
HTML elements.

28. What is the difference between the ‘id’ attribute and the
‘class’ attribute of HTML elements?
Multiple elements in HTML can have the same class value, whereas a value of id attribute of one element
cannot be associated with another HTML element.

https://www.interviewbit.com/html-interview-questions/ 9/18
5/24/2021 HTML Interview Questions and Answers (2021) - InterviewBit

29. In how many ways can we specify the CSS styles for the
HTML element?
There are three ways in which we can specify the styles for HTML element:

1. Inline: Here we use the ‘style’ attribute inside the HTML element.
2. Internal: Here we use the <style> tag inside the <head> tag. To apply the style we bind the elements
using ‘id’ or ‘class’ attributes.
3. External: Here we use the <link> tag inside <head> tag to reference the css file into our HTML code.
Again the binding between elements and styles is done using ‘id’ or ‘class’ attributes.

30. Difference between link tag <link> and anchor tag <a>?
The anchor tag <a> is used to create a hyperlink to another webpage or to a certain part of the webpage
and these links are clickable, whereas, link tag <link> defines a link between a document and an external
resource and these are not clickable.

31. How to include javascript code in HTML?

HTML provides a <script> tag using which we can run the javascript code and make our HTML page more
dynamic.

https://www.interviewbit.com/html-interview-questions/ 10/18
5/24/2021 HTML Interview Questions and Answers (2021) - InterviewBit

<!DOCTYPE html>
<html>
<body>
<h1>
<span>This is a demo for </span>
<u><span id="demo"></span></u>
</h1>
<script>
document.getElementById("demo").innerHTML = "script Tag"
</script>
</body>
</html>

32. When to use scripts in the head and when to use scripts in
the body?
If the scripts contain some event-triggered functions or jquery library then we should use them in the head
section. If the script writes the content on the page or is not inside a function then it should be placed
inside the body section at the bottom. In short, follow below three points:

1. Place library scripts or event scripts in the head section.

2. Place normal scripts that do not write anything on the page, in the head section until there is any
performance issue.
3. Place scripts that render something on the web page at the bottom of the body section.

33. What are forms and how to create forms in HTML?

The HTML form is used to collect the user inputs. HTML provides a <form> tag to create forms. To take
input from the user we use the <input> tag inside the form so that all collected user data can be sent to the
server for processing. There are different input types like ‘button’, ‘checkbox’, ‘number’, ‘text’, ‘password’,
‘submit’ etc.

<form action="/submit_data.php">
<label>Enter your name: </label>
<input type="text" name="name" />
<label>Enter Mobile number </label>
<input type="number" name="mobile_no"/>
<input type="submit" value="Submit">
</form>

34. How to handle events in HTML?

HTML allows event trigger actions in browsers using javascript or JQuery. There are a lot of events like
‘onclick’, ‘ondrag’, ‘onchange’, etc.

https://www.interviewbit.com/html-interview-questions/ 11/18
5/24/2021 HTML Interview Questions and Answers (2021) - InterviewBit

<!DOCTYPE html>
<html>
<body style="padding-top:50px">
<h3 id="event_demo">0</h3>
<input type="button" onclick="myFunction()" value="Click Me" />
<input type="reset" onclick="reset()" value="Reset" />
</body>

<script>
function myFunction() {
var value = document.getElementById("event_demo").innerHTML
value = parseInt(value) + 1;
document.getElementById("event_demo").innerHTML = value;
}
function reset() {
document.getElementById("event_demo").innerHTML = 0;
}
</script>
</html>

35. Define multipart form data?

Multipart form data is one of the values of the enctype attribute. It is used to send the file data to the
server-side for processing. The other valid values of the enctype attribute are text/plain and application/x-
www-form-urlencoded.

36. Is drag and drop possible using HTML5 and how?

Yes, in HTML5 we can drag and drop an element. This can be achieved using the drag and drop related
events to be used with the element which we want to drag and drop.

37/ Difference between SVG and Canvas HTML element?

SVG Canvas

It is Raster based i.e., composed

SVG is vector based i.e., composed of shapes.
of pixels.

Canvas works better with a

SVG works better with a larger surface.
smaller surface.

Canas can only be modified

SVG can be modified using CSS and scripts
using scripts.

SVG is highly scalable. So we can print at high quality

It is less scalable.
with high resolution

38. What type of audio files can be played using HTML?

https://www.interviewbit.com/html-interview-questions/ 12/18
5/24/2021 HTML Interview Questions and Answers (2021) - InterviewBit

HTML5 supports the following three types of audio file formats:

1. Mp3
2. WAV
3. Ogg

Practice HTML Questions asked in

Interviews

1. If you have used inline, internal, and external all the 3 stylings in HTML for a
single element then which style will be applied?

Inline

Internal

External

None of the above

2. Comments in HTML is done by:

<?-- -->

<!-- -->

<!-- --!>

</-- -->

3. Which of the following is correct HTML syntax for adding background color?

<p style=”backgroundColor: #a7b8c9”><p>

<p style=”background-color= #a7b8c9”></p>

<p style=”background-color: #a7b8c9”></p>

<p style=”color: #a7b8c9></p>

https://www.interviewbit.com/html-interview-questions/ 13/18
5/24/2021 HTML Interview Questions and Answers (2021) - InterviewBit

4. Which is the correct HTML syntax for adding a link to the image?

<a src=” image

(https://assets.interviewbit.com/assets/skill_interview_questions/react/react-way-
66f68fa8d80b677f487c70ee5e804ecaa70e0f78f63e1543a103ac56ed6e028e.png.gz) ”><img
src=”image path” /></a>

<a src=” image (undefined) ”><img href=”image path” /></a>

<link href=” image

(https://assets.interviewbit.com/assets/skill_interview_questions/react/react-way-
66f68fa8d80b677f487c70ee5e804ecaa70e0f78f63e1543a103ac56ed6e028e.png.gz) ”><img
src=”image path” /></link>

<a href=” image

(https://assets.interviewbit.com/assets/skill_interview_questions/react/react-way-
66f68fa8d80b677f487c70ee5e804ecaa70e0f78f63e1543a103ac56ed6e028e.png.gz) ”><img
src=”image path” /></a>

5. Which of the following is not semantic tags?

<div>

<nav>

<article>

<summary>

6. Which is the correct attribute to change the size of the text?

<p style=”textSize: 10px”></p>

<p style=”text-size: 10px”></p>

<p style=”font-size: 10px”></p>

<p style=”fontSize: 10px”></p>

7. What are the correct extensions for saving an HTML file?

.hml

.xml

.html

https://www.interviewbit.com/html-interview-questions/ 14/18
5/24/2021 HTML Interview Questions and Answers (2021) - InterviewBit

.htm

8. HTML attribute values are case-sensitive?

True

False

9. Using which attribute we can add a tooltip in the HTML element.

tooltip

title

ref

None of the above

10. Which of the following is not a value of the attribute display?

inline-flex

flexbox

flex

grid

Blog (https://blog.interviewbit.com) About Us (/pages/about_us/) FAQ (/pages/faq/)

Contact Us (/pages/contact_us/) Terms (/pages/terms/) Privacy Policy (/pages/privacy/)

Scaler Academy Review (/scaler-academy-review)

System Design Interview Questions (/courses/system-design/)

Google Interview Questions (/google-interview-questions/)

Facebook Interview Questions (/facebook-interview-questions/)

Amazon Interview Questions (/amazon-interview-questions/)

https://www.interviewbit.com/html-interview-questions/ 15/18
5/24/2021 HTML Interview Questions and Answers (2021) - InterviewBit

Microsoft Interview Questions (/microsoft-interview-questions/)

SQL Interview Questions (/sql-interview-questions/)

Python Interview Questions (/python-interview-questions/)

Javascript Interview Questions (/javascript-interview-questions/)

MVC Interview Questions (/mvc-interview-questions/)

React Interview Questions (/react-interview-questions/)

jQuery Interview Questions (/jquery-interview-questions/)

Angular Interview Questions (/angular-interview-questions/)

Spring Interview Questions (/spring-interview-questions/)

Data Structure Interview Questions (/data-structure-interview-questions/)

Selenium Interview Questions (/selenium-interview-questions/)

HTML Interview Questions (/html-interview-questions/)

Directi Interview Questions (/directi-interview-questions/)

Yahoo Interview Questions (/yahoo-interview-questions/)

LinkedIn Interview Questions (/linkedin-interview-questions/)

VMware Interview Questions (/vmware-interview-questions/)

eBay Interview Questions (/ebay-interview-questions/)

Flipkart Interview Questions (/flipkart-interview-questions/)

C Interview Questions (/c-interview-questions/) Php Interview Questions (/php-interview-questions/)

C Sharp Interview Questions (/c-sharp-interview-questions/)

Web Api Interview Questions (/web-api-interview-questions/)

Hibernate Interview Questions (/hibernate-interview-questions/)

Node Js Interview Questions (/node-js-interview-questions/)

https://www.interviewbit.com/html-interview-questions/ 16/18
5/24/2021 HTML Interview Questions and Answers (2021) - InterviewBit

Cpp Interview Questions (/cpp-interview-questions/)

Oops Interview Questions (/oops-interview-questions/)

Devops Interview Questions (/devops-interview-questions/)

Machine Learning Interview Questions (/machine-learning-interview-questions/)

Docker Interview Questions (/docker-interview-questions/)

Mysql Interview Questions (/mysql-interview-questions/)

Css Interview Questions (/css-interview-questions/)

Laravel Interview Questions (/laravel-interview-questions/)

Asp Net Interview Questions (/asp-net-interview-questions/)

Django Interview Questions (/django-interview-questions/)

Dot Net Interview Questions (/dot-net-interview-questions/)

Kubernetes Interview Questions (/kubernetes-interview-questions/)

Operating System Interview Questions (/operating-system-interview-questions/)

React Native Interview Questions (/react-native-interview-questions/)

Aws Interview Questions (/aws-interview-questions/)

Git Interview Questions (/git-interview-questions/)

Java 8 Interview Questions (/java-8-interview-questions/)

Mongodb Interview Questions (/mongodb-interview-questions/)

Dbms Interview Questions (/dbms-interview-questions/)

Spring Boot Interview Questions (/spring-boot-interview-questions/)

Power Bi Interview Questions (/power-bi-interview-questions/)

Pl Sql Interview Questions (/pl-sql-interview-questions/)

Tableau Interview Questions (/tableau-interview-questions/)

https://www.interviewbit.com/html-interview-questions/ 17/18
5/24/2021 HTML Interview Questions and Answers (2021) - InterviewBit

Linux Interview Questions (/linux-interview-questions/)

Ansible Interview Questions (/ansible-interview-questions/)

Java Interview Questions (/java-interview-questions/)

Jenkins Interview Questions (/jenkins-interview-questions/)

Agile Interview Questions (/agile-interview-questions/)

Networking Interview Questions (/networking-interview-questions/)

Azure Interview Questions (/azure-interview-questions/)

Software Testing Interview Questions (/software-testing-interview-questions/)

Automation Testing Interview Questions (/automation-testing-interview-questions/)

Android Interview Questions (/android-interview-questions/)

Hr Interview Questions (/hr-interview-questions/)

 Like Us (https://www.facebook.com/interviewbit)  Follow Us (https://twitter.com/interview_bit)

 Email (mailto:[email protected])

Click here to start solving coding interview questions (/)

https://www.interviewbit.com/html-interview-questions/ 18/18