Top HTML Interview Questions and Answers

PDF

Basic HTML Interview Questions for Freshers (With

Answers)

Q1. What is HTML?

This is going to be the most asked HTML interview questions for all experience-level
professionals. You must have a clear idea about the basics first.

HTML, also termed as Hyper Text Markup Language, is a language used on the World Wide
Web. It is a common text formatting language utilized for designing and displaying web
pages.

Today, text can become more dynamic and interactive because of HTML. It can change text
into links, tables, and images. By prefixing the web page name with.html or.html, HTML
pages can be stored.

Q2. What are the main features of HTML?

HTML has the following features and characteristics:
 ● It is a markup language that allows for the creation of text-based web pages.
● HTML is simple to use and understand.
● While using HTML, programmers can make a web page more interactive by adding
images, video, and audio.
● HTML is platform-independent and may be used on Windows, Linux, and others.
● It is not case-sensitive. Tags can be used in either lower or higher case.
● HTML allows programmers to include a link on web pages, allowing readers to
search for material of interest.

Q3. What are HTML tags, and how to use them?

An HTML tag comprises an opening tag, a content tag, and a closing tag. Some tags aren't
closed.

Two things are contained in HTML documents: content and tags.

A web browser examines an HTML document from top to bottom and from left to right.
HTML tags are used to construct HTML documents and render their features. It has its own
set of attributes.

<tag> content </tag>

Content is added between tags to display data on a web page.

Q4. What Is the difference between HTML elements & HTML tags?
Here is a tabular comparison of HTML elements vs HTML tags to understand the differences
between the two easily:

HTML Elements HTML Tags

An HTML element is a standalone HTML tags are used to indicate the
component of an HTML web page or beginning or conclusion of an element
document, including a start tag,
attributes, end tag, and everything in
between
Elements contain a start tag, content, HTML tags begin with ‘<’ and end with
and an end tag ‘>.’ Whatever is written in between <and>
is termed a tag
Content is hold by HTML elements HTML element is hold by HTML tags

HTML elements define the overall HTML tags are similar to keywords, as
content each tag has a distinct significance.
Example- Example-
<p> This is an example of a paragraph. <a> represents opening anchor tag </a>
</p> represents closing anchor tag
Q5. What Is HTML formatting?
HTML formatting is the method of formatting text to make it look and feel better. It employs
various tags to make text bold, italic and underlined.

For example:

<b> This text is bold </b>

<i> This text is italic </i>
<u> This text is underlined </u>

Q6. Do all HTML tags have an end tag?

No, not all HTML tags have an end tag. Some are self-closing tags that do not require an
end tag.

The br> tag, for instance, is used to break a line, and the image> tag is used to insert an
image into a page.

Q7. Which HTML tags are used to display the data in tabular
format?
To display the data in tabular form, the following HTML tags are used:

1 <table> Represents a table

2 <tr> Defines a row in a table
3 <th> Used for a header cell in a table
4 <td> Defines a cell in table
5 <caption> Represents the table caption
6 <col> Used with <colgroup> element to specify
each column property
7 <tbody> Group the body content in table
8 <thead> Groups the header content in table
9 <tfooter> Groups the footer content in a table

This is one of the most common HTML interview questions for freshers, as they should know
about all types of tags used.

Q8. What are HTML attributes & how to use them?

Each HTML tag has a unique attribute that affects how the tag operates or appears.

For example, a type attribute on an input> tag can be used to indicate whether it's a text
field, checkbox, radio button, etc.

Inside the two angled brackets, attributes are specified directly after the tag's name. They
should only be used in opening or self-closing tags. They can never appear in closing tags.
Using Attributes:
<!-- Text field -->
<input type="text" />
<!-- Checkbox -->
<input type="checkbox" />
<!-- Radio button -->
<input type="radio" value="on" />

Q9. What is the basic structure of an HTML template?

The basic structure of an HTML template is as follows that you must know while preparing
for HTML interview questions and answers for freshers:

<html>
<head>
<title>Page Title </title>
</head>
<body>Page content</body>
</html>

Q10. How many heading tags are there in HTML?

There are basically six different types of heading tags used in HTML. Each form of heading
tag has a different font size than the others. For instance, H1 is the biggest heading, while
H6 is the smallest one.

Example:
<h1>Heading no. 1</h1>
<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>

Q11. How to create an HTML hyperlink?

The HTML language has an anchor tag for creating a hyperlink that connects one page to
another. These tags can appear in the following formats:

● Unvisited Link– Displays underlined and blue

● Visited Link– Displays underlined and purple
● Active Link– Displays underlined and red
Q12. What is the difference between Block Level Element & Inline
Element in HTML?
You must know the differences between block level and inline elements because this can be
asked among the interview questions on HTML.

Here is a tabular comparison of block-level elements vs inline elements to understand the

differences between the two easily:

Block Element Inline Element

A block-level element is represented by Inline elements are defined and only
a block that stretches to occupy the take up the space that is required.
entire width available to it, i.e., the width
of its container, and will always begin on Looking at how text flows on a page is
a new line. the simplest method to understand how
they work.
For Example:
<div>, <img>, <section>, <form>, <nav> For Example:
<span>, <b>, <strong>, <a>, <input>

Q13. What are HTML comments?

You can add code comments to your HTML document to help you comprehend the code.
These are not visible in the browser, but they assist in notifying yourself and other
developers about the purpose of a part of HTML.

The beginning of the comment is denoted by !-, and the end is denoted by — >. Anything in
the middle will be ignored, even if it contains valid HTML.

For Example:
<!-- This is a comment! -->
<!-- Comments spanning multiple lines -->
<!-- This part is ignored in the browser -->

Q14. What is HTML5? What are new features in it that are not
available with HTML?
HTML5 is the most recent version of the Hypertext Markup Language (HTML). HTML5's new
features include the following:

● SVG, canvas, and other virtual vector graphics are supported by HTML5.
● Vector graphics could only be employed with Flash, VML, or Silverlight in HTML.
● JavaScript can now run within a web browser, thanks to HTML5.
● HTML5 does not use SGML. It has better parsing rules for more compatibility.
● Web SQL databases are used in HTML5 to temporarily store data.
Q15. What is Semantic HTML?
Semantic HTML is a code that uses HTML markup in web pages and web apps to reinforce
semantics. It also defines the meaning of the text rather than just defining its look or form.

Overall, semantic HTML gives meaning to the code that we write.

For Example:
<form>, <table>, and <article>, these tags clearly indicate the content.

Q16. How to create a nested webpage in HTML?

A nested webpage is displayed using the HTML iframe tag. In other words, it symbolizes a
webpage within a webpage. An inline frame is defined by the HTML iframe> tag.

For Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML example</h2>
Height and width attributes specify the iframe size:
<iframe src="https://www.wscube.co/" height="200" width="300"></iframe>
</body>
</html>

You must practice such concepts before going to the job interview, so that you are well
prepared for the top HTML interview questions and answers.

Q17. In HTML, can hyperlink only be applied to text?

No, hyperlinks can be placed in both text and graphics. The HTML anchor tag specifies a
hyperlink connecting one page to another.

The "href" attribute of the HTML anchor element is the most crucial.

Syntax:
<a href = "..........."> Link Text </a>

Q18. What is a style sheet in HTML?

A style sheet creates a uniform, transportable, and visually appealing style template. These
templates can be used on a variety of web pages.
It covers the appearance and formatting of a markup-language document. The Cascading
Style Sheet (CSS) is the most well-known type of style sheet, and it is used to style web
pages.

The style sheet provides the following formatting elements:

● Font
● bold, italics, underline
● Justification
● Color
● Superscript and subscript

Q19. What is an image map in HTML?

An image map connects multiple web pages with a single image. It is represented by map>
tag. You can describe the image shapes you want to include in an image mapping.

Q20. What is a marquee in HTML?

A marquee represents the scrolling text on a web page. It automatically scrolls the image or
text up, down, left, or right.

You should put the text to scroll within the marquee>....../marquee> tag.

Q21. What is a span tag in HTML? Explain with an example.

The span tag is used:

● To make text colorful

● To give the text a background
● Any text in a different color is highlighted.

Example:
<p>
<span style="color:#ffffff;">
In this page we use span.
</span>
</p>

Q22. What is the difference between DIV and SPAN In HTML?

The difference between SPAN & DIV is that a SPAN element is inline and typically used for a
tiny block of HTML within a line, such as within a paragraph.

On the other hand, A DIV or division element is a block line, comparable to having a line
break before and after it.
For Example:
<div id="HTML">
This is <span class="Web Dev">interview</span>
</div>

Q23. Who wrote the first version of HTML?

Tim Berners-Lee wrote the first-ever version of HTML in 1993. Since then, different versions
of HTML have been introduced.

Q24. What is the purpose of using HTML?

HTML can be used for various purposes, including writing code that is clear and easy to
understand. This language allows you to isolate meaning from text and style by writing
descriptive and semantic code.

Q25. When was HTML invented?

HTML, or Hyper Text Markup Language, was invented in 1993.

Q26. How to insert a picture onto a web page's background image?

To include a picture in the background image, place the following tag code after the </head>
tag:

<body background = “image.gif”>

Now, substitute image.gif with the name of your picture file. This will make the image the
background image of your web page.

Q27. How do you make the text on a webpage that, when clicked,
sends an email?
To do so, use the mailto command within the href tag. convert the text into a clickable link to
send an email. It is possible to write it as follows:

<a href=”mailto:[email protected]”>text to be clicked</a>

Q28. What is the HTML layout?

The HTML layout describes how the web page is organized. Every website has a distinct
layout that helps viewers focus on specific material.

The HTML5 components listed below define the distinct portions of a webpage.

● <header>: This tag is used to specify a document or section's header.

● <nav>: A container for navigation links is defined by this tag.
 ● <section>: It's used to specify a portion of a document
● <article>: It's a term for a self-contained, self-contained piece.
● <aside>: It's used to define content that's not part of the main content (like a sidebar)
● <footer>: This tag is used to specify a document's or section's footer.

Q29. What are empty elements in HTML?

Empty elements are HTML elements that have no content. For example, <br>, <hr>, and so
on.

So, these are some of the popular and top HTML interview questions for freshers. Mastering
these questions will surely place you in a good firm as a fresher web developer.

HTML Interview Questions and Answers for Experienced

Now, moving to some typical interview questions on HTML for experienced professionals.

Q30. Where is the iframe tag used?

An inline frame is specified via the iframe> tag. It displays a web page within a web page.
For instance, the src element specifies the URL of the document that occupies the iframe.

Syntax:
<iframe src=”URL”></iframe>

Q31. What is the difference between LocalStorage and

SessionStorage objects?
Here is a tabular comparison of LocalStorage and SessionStorage objects in HTML to
understand the differences easily:

LocalStorage Object SessionStorage Object

1. It keeps data that has no It only stores data for one session.
expiration date.
2. The data can be shared across Data is only available in the current
numerous browser windows. browser window.
3. When the browser window is If the browser is closed, the data is
closed, no data is removed. destroyed.

Q32. How many types of CSS can be included in HTML?

There are three methods for incorporating CSS into HTML:
 ● Inline CSS
This approach is used to style smaller contexts. To use inline styles, provide the style
attribute in the appropriate tag.

● External Style Sheet

When the style is applied to many pages, an external style sheet is used. Using the <link>
tag, each page must link to the style sheet. The <link> tag is placed within the head section.

Syntax:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

● Internal Style Sheet

An internal style sheet is employed when a single document has a distinct style. Internal
style sheets must be placed in the head section of an HTML page using the <style> tag.

Syntax:

<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>

Q33. What is the difference between cell spacing & cell padding?
This is yet another important thing that you must know and have in your list of HTML
interview questions and answers for experienced professionals.

The distance or gap between two cells in the same table is called cell spacing. On the other
hand, Cell Padding is defined as the gap or space between the cell's content and the cell
wall or cell border.

For Example:
<table border cellspacing=3>
<table border cellpadding=3>
<table border cellspacing=3 cellpadding=3>
Q34. Which HTML tag is used to separate sections of text?
Using the <br> tag, you can separate the lines of text.

Other tags, including <p> tag and <blockquote> tag, are also used to separate the text.

Q35. How many types of media formats does HTML support?

HTML supports a wide range of media forms, including music, video, movies, sounds, and
animations.

HTML supports the following formats:

● Images: jpg, jpeg, png, gif, SVG, apng, BMP icon

● Audio: RealAudio, WMA, MIDI, AAC, WAV, MP3
● Video: MPEG, AVI, QuickTime, RealVideo, WMV, Flash, WebM, and MP4

Q36. How are active links different from normal links in HTML?
Some browsers recognize it when the mouse cursor is above an active link. Others
recognize active links when the link has the attention. Those without a mouse cursor above
the link are considered normal. Blue is the default color for normal and active links.

Q37. What happens if the external CSS file is opened in a browser?

When you open the CSS file in a browser, nothing happens. It fails since the file has a
different extension. So the only way to use an external CSS file is to reference it within
another HTML document using the <link/> tag.

Q38. Is there any chance that the text will appear outside of the
browser window?
The text is wrapped by default to fit within the browser window. However, if the text is part of
a table cell with a fixed width, it may expand beyond the browser window.

Q39. What is the difference between HTML & XHTML?

This is among the crucial interview questions on HTML and you must know the correct
answer.

Please find the tabular comparison of HTML vs XHTML to know the differences better:

HTML XHTML
HTML is an abbreviation for XHTML is an abbreviation for
Hypertext Markup Language Extensible Hypertext Markup
Language
 It is derived from SGML (Standard It combines both XML and HTML
Generalized Markup Language) features
HTML is a type of static Web Page XHTML is a dynamic Web Page
language language
It employs the document file format It employs markup language
HTML is all about showing data XHTML is all about describing the
data
HTML is not case sensitive XHTML is case sensitive. Each tag &
attribute should be written in
lowercase.

Q40. How to include a favicon in HTML?

The code for adding a favicon is provided below. Enter the following code in your webpage's
<head> section.

<link rel=”icon” type=”image/png” href=”/favicon.png”/>

<link rel=”icon” type=”image/png” href=”https://example.com/favicon.png”/>

Q41. What is the use of figure tag in HTML5?

The <figure> tag is used to identify self-contained information connected to the main content.
It includes self-contained information such as images, diagrams, illustrations, etc.

The graphic, caption, and contents are all referred to as a single unit in the document's main
flow. The image src and figcaption elements are part of the <figure> tag. Img src is used to
insert an image source into a document, whereas figcaption is used to change the caption of
an image.

For Example:
<figure>
<img src=”pancakes.jpg” alt=”Blueberry Pancakes”>
<figcaption>A Stack of Blueberry Pancakes</figcaption>
</figure>

Q42. What is a datalist tag in HTML?

In HTML files, the <datalist> tag enables auto-complete functionality. It allows users to
include an auto-complete form based on predetermined options. It can be combined with an
input tag to allow users to conveniently fill out forms with predetermined options.

For Example: If you press A, it will show the car list starting with an A letter.
<label for=”car”>Choose your car from the list:</label>
<input list=”cars” name=”car” id=”car”>
<datalist id=”cars”>
<option value=”Honda”>
<option value=”Hyundai”>
<option value=”Maruti”>
<option value=”Audi”>
<option value=”BMW”>
</datalist>

If you have been working as a web developer for some years now, then this is going to be
one of the top HTML interview questions and answers for experienced professionals.

Q43. What is the benefit of collapsing white space?

In HTML, white spaces are interpreted as a single space character. You can indent lines of
text without worrying about numerous spaces because the browser combines several
spaces into a single space. It allows you to structure the HTML code and make it much more
readable.

Q44. What is the connection between border and rule attributes?

If the border attribute is set to a non-zero value, default cell boundaries with one-pixel
thickness are automatically placed between cells. When the rules attribute is introduced, a
default 1-pixel border appears if the border attribute is not specified.

Q45. What are the limitations of text field size?

A text field's default size is roughly 13 characters. If you add the size attribute, however, you
can set the size value to as low as 1. The browser width will decide the maximum size value.

Furthermore, if the size attribute is set to 0, the size is set to the default size of 13
characters.

Q46 What is HTML SVG?

HTML SVG is a two-dimensional vector graphics format. An X, Y coordinate system is
utilized for vector diagrams such as pie charts and 2-dimensional graphs. XML text files
define SVG pictures and their actions.

Syntax:
<!DOCTYPE html>
<html>
<body>
<h2>HTML SVG example</h2>
<svg width="400" height="400">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="6" fill="red" />
</svg>
</body>
</html>

Q47. What is canvas element in HTML5?

The <canvas> element is a container for drawing pictures on a web page using a
programming language such as JavaScript. It allows you to render 2D shapes and bitmap
pictures dynamic and scriptable. You may draw paths, boxes, circles, text, and images on
canvas using various methods.

Q48. What are lists in HTML?

HTML lists are used to organize a collection of similar objects into lists. It is identified by a
tag.

Some types of HTML lists:

● Ordered List
● Unordered List
● Description List
● Menu List
● Directory List

Q49. What is the use of figure tag in HTML?

It is one of the top HTML interview questions that can be asked to experienced
professionals.

The figure tag includes a photograph in a document on a web page. It manages a collection
of diagrams, images, code listings, and embedded material.

Syntax:
<p>The Taj Mahal is widely recognized as "The jewel of Muslim art in India.”</p>
<figure>
<img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>
</figure>

Q50. What are the logical and physical tags in HTML?

Logical tags are used to convey the meaning of the content included. The logical tag is
illustrated with the <strong> </strong> tag.

On the other hand, physical tags instruct the browser on how to display the text contained
within the physical tag.
Examples of physical tags include:
● <b>
● <big>
● <i>

What is the benefit of grouping multiple checkboxes together?

The checkboxes do not affect one another. However, placing these checkboxes together
aids in their organization. Checkbox buttons can be given a name and are not required to be
part of a group. A single web page can contain a variety of checkbox groups.

Q51. Which are the best HTML editors?

These are some of the most used HTML editors:
● UltraEdit
● Sublime Text
● Atom
● Visual Studio Code
● NoteTab
● TinyMCE

So, these are the top HTML interview questions and answers for experienced. We hope that
this set of questions is enough to crack your interview at a glance.

Upskill Yourself With Expert-led Online Training Programs!

● Web Development Course
● Wordpress Course
● Mern Stack Course
● Full Stack Developer Course
● HTML Course
● React Js Course
● Javascript Course
● PHP Curse
● Power BI Course
● Tableau Course
View All Courses

All Courses Include:

● Regular Live Classes
● Mentorship by Industry Experts
● Dedicated Doubt Sessions
● Industry-recognized Certification
● Career Support