Scribd
Upload
27 views

30 Top HTML Interview Questions and Answers

Uploaded by

hamishussein01
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
27 views

30 Top HTML Interview Questions and Answers

Uploaded by

hamishussein01
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

30 Top HTML Interview Questions and

Answers [2022 LIST]


List of Most Popular HTML Interview Questions For Freshers and Experienced
Professionals:

In this tutorial, we have covered HTML interview questions which include both the basic as well
as advanced portions of HTML which are helpful for freshers as well as experienced candidates.

HTML is a very basic language from which we begin our work on Web development.

Very strong knowledge of HTML is highly recommended to crack the interviews for any web
development posts. I hope this informative tutorial would help you much to clear the interviews
successfully at the first attempt.

Most Frequently Asked HTML Interview Questions

Given below is the list of most popular HTML interview questions with the answers and
examples codes for your easy understanding.

Let’s Start!!

Q #1) What does HTML stand for?

Answer: HTML stands for Hypertext Markup Language.

Q #2) Describe HTML.

Answer: Hypertext Markup Language or HTML is a markup language that is used to create
website templates or WebPages to present the content on the World Wide Web.

HTML pages are saved by adding .html or .html in web page name.

Q #3) Write the basic structure of the HTML template?

Answer: The basic structure of the HTML template is:

<html>

<head>

<title></title>

</head>

<body>
</body></html>

Q #4) What is HTML5?

Answer: HTML5 is the latest or updated version of the markup language that defines HTML.

Q #5) Name some new features which were not present in HTML but are added to
HTML5?

Answer: Some new features in HTML5 include:

• DOCTYPE declaration: <!DOCTYPE html>


• section: Section tag defines a section in the document, such as a header, footer or in other
sections of the document. It is used to define the structure of the document.
<section></section>
• header: Header tag defines the head section of the document. A header section always sticks at
the top of the document. <header></header>
• footer: Footer tag defines the footer section of the document. A footer section always sticks at
the bottom of the document. <footer></footer>
• article: Article tag defines an independent piece of the content of a document. <article>
</article>
• main: The main tag defines the main section in the document which contains the main content
of the document. <main></main>
• figcaption: Figcaption tag defines the caption for the media elements such as an image or video.
<figcaption></figcaption>

Q #6) What is Anchor tag and how can you open an URL into a new tab when clicked?

Answer: Anchor tag in HTML is used to link between two sections or two different web pages
or website templates.

To open an URL into a new tab in the browser upon a click, we need to add target attribute equal
to _blank.

<a href=”#” target=”_blank”></a>

Q #7) Write an HTML code to form a table to show the below values in a tabular form with
heading as Roll No., Student name, Subject Name, and values as

1. Ram, Physics
2. Shyam, Math
3. Murli, Chemistry

Answer: To represent the above values in an HTML table format, the code will be:

<!DOCTYPE html>
<html>

<head>

<style>

table, th, td {

border: 1px solid black;

</style>

</head>

<body>

<table >

<tr>

<th> Roll No. </th>

<th> Student Name </th>

<th> Subject Name </th>

</tr>

<tr>

<td> 1 </td>

<td>Ram</td>

<td> Physics </td>

</tr>

<tr>

<td> 2 </td>

<td> Shyam </td>

<td> Math </td>

</tr>

<tr>

<td> 3 </td>

<td> Murli </td>

<td> Chemistry </td>

</tr>
</table>

</body>

</html>

Output:

Q #8) Define Semantic elements in HTML.

Answer: Semantic elements are HTML elements that represent its meaning to the browser and
developer about its contents.

For Example – p tag represents a paragraph, a tag represents anchor tag, form tag, table tag,
article tag and many more are semantic elements in HTML. Whereas, div tag, span tag, bold tag
are not semantic elements.

Q #9) Define attributes in HTML tag.

Answer: The HTML tag contains a field inside their tag which is called attributes of that tag.

For Example:

<img src=”#”> here in this tag src is img tag attributes.

<input type=” text”> here in this tag type is input tag attributes.

Q #10) Can we modify the attribute’s value of the HTML tag dynamically?

Answer: Yes, we can modify the value of the attributes by using JavaScript.

Below is the input element whose attribute will be modified from text to password, JS code to
modify the attribute value:

<input type=“text” id=“inputField”>

document.getElementById(“inputField”).attr(“type”, “password”);

Q #11) How can we comment in HTML?


Answer: Comments are used by developers to keep a track of the code functionality and also
help the other developers in understanding the code functionalities easily.

The commented outlines will not be shown in the browser. To comment a line, the line should
start by this <!– and end by this –>. Comments can be of one line or of multiple lines.

For Example:

<!-- This is one line comment ?

<!-- This is multiple line of two or more line -->

Q #12) What are inline elements and block-level elements in HTML?

Answer: Block elements are the blocks that take the full available width and always start from a
new line. It will stretch itself to the full available width of the available container width. Block-
level elements are <div>, <p>, <img>, <section> and many more.

Inline elements are the elements that will only take the width that is required to fit into the
container.

For Example, take the flow of text on the page. When the line of the text takes the full width of
the container it wraps itself into a new line and again goes in the same way.

Whereas, the inline element will take only that much space or width that it is needed for them.
Inline elements are <span>, <label>, <a>, <b> and many more.

Q #13) Can we change inline elements into block-level elements?

Answer: Yes, we can change inline elements into block-level elements by adding display equal
to block in its CSS tag. Writing it will change the inline elements into block elements and then
inline elements will also take the full width of the container.

display: block;

Q #14) What are the different browsers that support HTML5?

Answer: All modern browsers support HTML5 elements except some old browsers. But
fortunately, most of the browsers will take html5 elements as inline elements.

Q #15) What are <br> tags in HTML?

Answer: <br> tags are used to enter a new line into the HTML contents. These tags are
generally used to separate two different lines of text between each other.

Q #16) Explain the structure of the HTML webpage.


Answer: The common structure which all HTML pages follow are enlisted below:

(i) DOCTYPE – It is a special tag in HTML which is always written at the top of the HTML
document, i.e. at the start of the HTML template. DOCTYPE is used to convey to the browser
about the HTML version.

<!DOCTYPE html>

(ii) HTML – After DOCTYPE tag, the HTML tag is written to start the template. All the code
will be placed into this HTMLtag. It works as the container for the whole HTML page elements.

<html>

<!-- Rest of the html code will come inside it -->

</html>

(iii) HEAD – <head> tag is the first element inside the <html> tag. It is used to provide
information to the browser about the page and its contents.

Search Engine Optimization (SEO) techniques are written inside this tag. <title>, <meta> tags
are written inside these tag. CSS and JS external links or internal CSS and JS are also written
inside this tag.

<head>

<meta charset="UTF-8">

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

<title>HTML Interview Questions</title>

</head>

(iv) BODY – <body> tags are written after the closing tag of the <head> tag, i.e. after </head>.
Whatever HTML code is written inside these tags will be shown by the browser as website
content.

<body>

<h2>Top HTML Interview Questions</h2>

<p>HTML stands for Hypertext Markup Language</p>

</body>

Together the whole body will be:

<! DOCTYPE html>


<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,


initial-scale = 1.0">

<title>HTML Interview Questions</title>

<style type="text/css">

<!-- CSS Code will be written into these -->

h2{

color: #1855b5;

p{

color: #3bd256;

font-weight: 600;

</style>

<script type="text/javascript">

<!-- Javascript code will be written into these


-->

</script>

</head>

<body>

<h2>Top HTML Interview Questions</h2>

<p>HTML stands for Hypertext Markup Language</p>

</body>

</html>

Output:
Q #17) Why Meta tags are used in HTML?

Answer: Meta tags in HTML are used by the developer to tell the browser about the page
description, author of the template, character set, keywords and many more.

Meta tags are used for search engine optimization to tell the search engine about the page
contents.

<meta charset="UTF-8">

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

<meta name="description" content="HTML interview questions">

<meta name="author" content="Author Name">

<meta name="copyright" content="All Rights Reserved">

Q #18) Explain list elements in HTML.

Answer: Enlisted below are the list elements in HTML:

• Ordered List (<ol>) – An Ordered List or ol tag is the list that lists the items in an ordered way,
i.e. numbered or alphabetically.
• Unordered List (<ul>) – An Unordered List or ul tag is the list which will list the items in an
unordered way, i.e. in bulleted format or in any other format.
• Definition List (<dl>) – A Definition List or dl tag arrange the items in the way in which they are
arranged in a dictionary.

Ordered List:

<!DOCTYPE html>

<html>

<head>

<title>HTML Interview Questions Ordered


List</title>

</head>

<style>

h1{

color: red;

li{

color: #0070ff;
}

</style>

<body>

<h1>Ordered List : </h1>

<ol>

<li>HTML</li>

<li>CSS</li>

<li>Bootstrap</li>

<li>JavaScript</li>

</ol>

</body>

</html>

Output:

Unordered List:

<!DOCTYPE html>

<html>

<head>

<title>HTML Interview Questions


Unordered List</title>

<style>

h1{

color: red;

li{

color: #0070ff;
}

</style>

</head>

<body>

<h1>Unordered List : </h1>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>Bootstrap</li>

<li>JavaScript</li>

</ul>

</body>

</html>

Output:

Definition List:

<!DOCTYPE html>

<html>

<head>

<title>HTML Interview Question Definition


List</title>

<style>

dt{

font-weight: 600;
font-size: 25px;

color: red;

dd{

font-weight: 500;

font-size: 15px;

color: #0070ff;

</style>

</head>

<body>

<dl>

<dt><strong>HTML</strong></dt>

<dd>HTML stands for Hypertext


Markup Language</dd>

<dt><bold>CSS</bold></dt>

<dd>CSS stands for Cascading Style


Sheets</dd>

</dl>

</body>

</html>

Output:

Q #19) Define iframe in HTML.

Answer: Iframe tag is written as <iframe>.


An iframe is used to display different document content inside the different document content in
a rectangular region in the browser. When different document content is embedded into a current
HTML content, then it is known as an inline iframe.

The src attribute contains the path to the document that occupies the inline iframe.

<!DOCTYPE html>

<html>

<head>

<title>HTML Interview Questions


Iframes</title>

</head>

<body>

Iframe HTML Code

<iframe src = "demo_iframe.htm" width = "300"


height = "300">

Sorry your browser does not


support inline frames.

</iframe>

</body>

</html>

Output:
Q #20) Define forms in HTML.

Answer: Forms in HTML are required when we want to collect the user information whenever a
user fills any form or provides any details and when we want to save it into our database.

<!DOCTYPE html>

<html>

<head>

<title>HTML Interview Question Form


tag</title>

<style>

form {

width: 200px;

border: 2px solid blue;

margin: 0 auto;

padding: 60px 100px;

p{

color: red;

font-size: 16px;

font-weight: 600;

input::placeholder{

color: blue;

button{

line-height: 20px;

text-align: center;

background: green;

border: 0;

color: #ffffff;
font-size: 14px;

padding: 15px 64px;

margin-top: 20px;

</style>

</head>

<body>

<form >

<p>Name:</p>

<input type = "text" name = "user_name" placeholder


= "Enter Name"/>

<br/>

<br/>

<p>Email: </p>

<input type = "email" name = "user_email"


placeholder = "Enter email"/>

<br/>

<br/>

<p>Password: </p>

<input type="password" name = "user_pwd"


placeholder = "Enter Password" />

<br/>

<button> Submit </button>

</form>

</body>

</html>

Output:
Q #21) In how many ways can a heading be written in HTML?

Answer: A heading can be defined as a block-level element that is used to give a heading to a
particular section or topic.

Example using 6 types of headings in HTML:

<!DOCTYPE html>

<html>

<head>

<style>

h1{

color: red;

h2{

color: blue;
}

h3{

color : green;

h4{

color: purple;

h5{

color: yellow;

h6{

color: orange;

</style>

</head>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

</body>

Output:
Q #22) How can we create a hyperlink in HTML?

Answer: An anchor tag or <a> tag in HTML is used to create hyperlinks. This creates a path
between two different HTML web pages.

Hyperlinks can be displayed in three ways:

• Unvisited Link – These links are blue in color and underlined.


• Visited Link – These links are purple in color and underlined.
• Active Link – These links are red in color and underlined.

Q #23) Why do we use the required attribute in HTML?

Answer: The required attribute is used in HTML to make the field mandatory. It forces the user
to fill that particular field to submit the form.

If the field is input then it will throw a default HTML error.

<input type="email" name = "user_email" required />

Q #24) How can we include Google maps on a website?

Answer: HTML code to include Google maps on our web page:

<!DOCTYPE html>

<html>

<body>

<h1>HTML Interview Questions Google Map</h1>


<div id="map" style="width: 400px; height: 400px; background:
yellow">

</div>

<script>

function myMap() {

var mapOptions = {

center: new google.maps.LatLng(51.5, -0.12),

zoom: 10

var map = new


google.maps.Map(document.getElementById("map"), mapOptions);

</script>

<script src=
"https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-
916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>

</body></html>

Output:
Q #25) Differentiate between HTML and XHTML.

Answer: The differences between HTML and XHTML are:

• HTML stands for Hypertext Markup Language, whereas XHTML stands for Extensible Markup
Language.
• A static webpage is an HTML web page and dynamic web pages are XHTML.
• XHTML are more stricter than HTML.
• An XML application of HTML is defined as XHTML.
• All modern browsers support XHTML.

Q #26) What are Web Workers?

Answer: Web Workers is a code of JavaScript which runs in the background threads without
disturbing the performance of the page. It is used for computing-heavy tasks like an access
database or function.

Q #27) What is the SVG element?


Answer: SVG is a followed XML format; it stands for Scalable Vector Graphics which is used
to create vector graphics with the support for interactivity and animation.

SVG is resolution independent as it does not lose its quality when they are resized or zoomed.

Q #28) Explain about Canvas.

Answer: Canvas is a pixel-based graphics and it is one of the new features of HTML5.

It provides a space in the document where we can draw graphics by using JavaScript and it is
resolution dependent, hence the quality will be affected when it’s zoomed or resized.

Example:

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;


color: #c9cc18;">

Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var can = document.getElementById("myCanvas");

var canvas = can.getContext("2d");

canvas.font = "20px Hind-sanserif";

canvas.fillText("Canvas Example",30,60);

</script>

</body>
Q #29) Explain new form elements in HTML5.

Answer: The new form elements that were added into HTML5 are:

• Datalist – It’s used as a list of options for input control.


• Keygen – This tag defines a key-pair generator (Private/Public) field.
• Output – It’s used to show the result of a calculation.

Q #30) What is Quirks mode in HTML5?

Answer: If we do not include the <!DOCTYPE> element in our HTML page or Document, it
will go to Quirks Mode. In this mode, the HTML element depends on the browser. Hence the
content will be displayed according to the browser.

Conclusion

These interview questions and answers will help you to crack the Web development interview
successfully. Most questions include the HTML expert’s answers during their interviews.

Suggested reading =>> HTML Cheat Sheet

Hope, these interview questions would have enriched your knowledge of the HTML concept!!

We wish you all success!!

You might also like