HT ML Interview Questions f or prof essionals with 10 years of experience

Top HTML Interview Questions and Answers

Here are the HT ML interview questions most likely to be asked during the interviews.
This list also covers some HTML CSS interview questions to help you start or move
ahead in your web development or HTML career. Here we have gathered both the
basic and advanced HTML Interview questions for freshers and experienced-level
candidates.

Must Check: Free HT ML course and Certif icate

Basic HTML Interview Questions

Here is the list of the most important basic HTML interview questions for freshers:

Q1. What is HTML?

Ans. HT ML or Hypertext Markup Language, was created by Berners-Lee in 1991. It is a

markup language used to create and structure website templates or web pages to
present content on the World Wide Web. It consists of a series of elements, and the
HTML elements tell the browser how to display the content. HTML helps in making
the text more interactive and dynamic. You can save an HTML page by adding .html
or .html in the web page name.

Read Also: What is HT ML

Explore popular courses on Shiksha Online:

Popular Programming Languages Courses Popular Python Courses

Best Java Courses Best JavaScript Courses

Q2. What are t he f eat ures of HTML?

Ans. T he f ollowing are the f eatures of HT ML:

It is a markup language that provides f lexibility to design web pages with text.

Disclaim e r:
o n 0 1-No v-20 23.
 It is easy to use and learn.

HT ML is platf orm-independent and can be used on Windows, Linux, Macintosh, etc.

It enables programmers to add images, video, and audio to a web page to make it more
interactive.

HT ML allows programmers to add a link on web pages, helping the readers to browse
the inf ormation of their interest.

It is case-insensitive. You can use tags either in lower-case or upper-case.

Q3. What is t he dif f erence bet ween HTML element s and t ags?

Ans. T he dif f erences between HT ML elements and tags are:

HT ML Elements T ags

1. T he element is an individual component of the

1. HT ML tag (either opening or
HT ML web page or document that consists of a start
closing) marks the start or end
tag, its attributes, an end tag, and everything in
of an element.
between.

2. T hey begin with < symbol and

2. T hey usually contain a start tag, content, and an end with > symbol. Whatever is
end tag. written inside < and > are called
tags.

3. HT ML T ags hold the HT ML

3. HT ML Elements hold the content.
element.

4. HT ML tags are like keywords.

4. T hey specif y the general content.
Each tag has a unique meaning.

5. For example, <a> is an opening

5. For example, <p>T his is an example of a paragraph.
anchor tag and </a> is a closing
</p>
anchor tag.

Read Also: Understanding HT ML Attributes with Examples

Q4. Do all HTML t ags have an end t ag?

Ans. No, all HT ML tags do not have an end tag. For example, the <br> tag is used to break

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
the line, and <image> tag is used to insert an image into a document. T hey are considered
self -closing tags and do not require an end tag.

If you are a beginner and want to learn HTML or a professional who wants to upskill to get
ahead in your career, check out the popular HTML courses here.

Q5. Which HTML t ags are used while displaying t he dat a in t he t abular f orm?

Ans. T he f ollowing HT ML tags are used to display the data in tabular f orm:

1 <table> Def ines a table.

2 <tr> Def ines a row in a table.

3 <th> It def ines a header cell in a table.

4 <td> Def ines a cell in a table.

5 <caption> T his tag def ines the table caption.

T his tag specif ies a group of one or more columns in a table f or

6 <colgroup>
f ormatting.

It is used with <colgroup> element to specif y column properties f or

7 <col>
each column.

8 <tbody> T his tag groups the body content in a table.

9 <thead> It groups the header content in a table.

10 <tf ooter> It groups the f ooter content in a table.

Q6. Writ e t he basic st ruct ure of t he HTML t emplat e.

Ans. T he basic structure of the HT ML template is:

<html>

<head>

<title>T itle of the page</title>

</head>

<body>content of the page</body>

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
</html>

Must Read: Basic Structure of HT ML

Q7. What is HTML5? What are some of it s new f eat ures t hat were not present
in HTML?

Ans. HT ML5 is the latest version of the Hypertext Markup Language. Some of the new
f eatures of HT ML5 are:

HT ML5 supports SVG, canvas, and other virtual vector graphics. In HT ML, vector
graphics can only be used with Flash, VML (Vector Markup Language), or Silverlight.

HT ML5 allows JavaScript to run within a web browser. T he previous version allowed
JavaScript to run in the browser interf ace thread.

HT ML5 is not based on SGML. It comes with enhanced parsing rules f or improved
compatibility.

In HT ML5, web SQL databases are used to store data temporarily. Previously, only the
browser cache was used.

Some elements have been removed – applet, isindex, nof rames, acronym, dir, f ont,
f rame, f rameset, and big are removed.

New elements have been added – time, summary, aside, audio, command, and data.

Read Also: T op 10 f eature of HT ML5 with examples

Q8. What are t he most commonly used list s used while designing a page?

Ans. T he f ollowing are the most commonly used lists that are used while designing a page:

unordered list (<ul> tag) – displays elements in a bulleted f ormat.

ordered list (<ol> tag) – displays elements in a numbered f ormat.

def inition list (<dl>, <dt> and <dd> tags) – displays elements in def inition f orm like in a
dictionary.

Also Read: Top JavaScript Interview Questions and Answers

Q9. What are HTML At t ribut es?

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
Ans. HT ML attributes provide additional inf ormation about HT ML elements. T hey are def ined
directly af ter the tag name. T hey only appear in opening tags and not in closing tags.

HT ML attributes usually contain name/value pairs like name=”value”. T he Attribute values

should always be enclosed in quotation marks. T he name parameter takes the property’s
name to be assigned to the element. T he value takes the property value or extent of the
property names that can be aligned over the element.

Some commonly used HT ML attributes include src Attribute, alt Attribute, id Attribute, and
href Attribute.

Q10. What is semant ic HTML?

Ans. Semantic HT ML is a coding style. It uses HT ML markup to reinf orce the semantics or
meaning of the content in webpages and web applications rather than just def ining its look
or appearance. It introduces meaning to the code we write.

For example: <f orm>, <table>, and <article>, these tags clearly def ine its content.

Also Read: Web Developer Interview Questions and Answers

Q11. What is t he HTML art icle element ?

Ans. T he HT ML <article> Element specif ies independent and self -contained content in a
document, page, application, or site which is independently distributable or reusable. Since it
is independent of the document or website, it can be viewed, reused, and distributed
separately.

For example, syndication. T he HT ML article element is used in the f ollowing:

Forum post

Blog post

Newspaper article

Q12. Explain t he layout of HTML.

Ans. HT ML layout represents how all the elements in the document are arranged. It is a vital

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
part of basic page design and is important f or creating a website to appear prof essional and
attractive. Every website has a specif ic layout to display content in a specif ic manner. T he
f ollowing HT ML elements are used to def ine the dif f erent parts of a webpage:

<header>: def ine a header f or a document or a section.

<nav>: def ines a container f or navigation links

<section>: it def ines a section in a document

<article>: def ine an independent, self -contained article

<aside>: it def ines content aside f rom the content

<f ooter>: def ine a f ooter f or a document or a section

<details>: def ine additional details

Q13. What is t he dif f erence bet ween a block-level element and an inline
element ?

Ans. T he dif f erences between block-level elements and inline elements are:

Block-level Elements Inline Elements

Do not start on a new line and can begin

T hey start on a new line.
within a line.

T ake up as much width as necessary. Its

Stretch to f ill the f ull width available to
width only extends as f ar as it is def ined by
them.
its tags.

Inline elements do not have a top and a

T hey have a top and a bottom margin.
bottom margin.

Examples of block-level elements in

Examples of inline elements: <span>, <img>,
HT ML: <div>, <img>, <f orm>, <main>,
<strong>, <code>, <input>, <time>, <i>.
<table>, <video>.

Check out the Top 10 Most-Popular Programming Languages to Learn

Q14. How t o insert an image in HTML?

Ans. Images can be inserted using an HT ML page’s <img> tags . It is an empty tag with

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
only attributes and does not require a closing tag. T he <img> tag must be used inside
<body>…</body> tag. T he f ollowing parameters will be required to insert an image using
<img> tag

src attribute – It is used to add the path to the image (URL of the image).

alt attribute – It is f or adding alternate text.

Width – T o add the width of the image

Height – T o add the height of the image

Example:

<img src=”img_pancakes.jpg” alt=”Blueberry Pancakes” width=”500″ height=”600″>

Below is the code to insert an image in an HT ML page:

Copy code

<!DOCTYPE html>
<ht ml>
<head>
…
</head>
<body>
…
<img src=”URL” alt =”add_alt t ext ” widt h=”widt h” height =”height ”>
…
</body>
</ht ml>

Q15. How t o align t ext in HTML?

Ans. HT ML content is aligned on a page using the CSS text-align property. It sets the

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
horizontal alignment of the content inside a block element or table-cell box. T he text-align
property works like a vertical-align but in the horizontal direction. It works on text and
all other content inside the block element, such as images and buttons.

Below is the code to align text in HT ML:

Copy code

<!DOCTYPE html>
<ht ml>
<head></head>
<body>
<h1>Heading</h1>
<p st yle="t ext -align:cent er/lef t /right /just if y;">t ext </p>
</body>
</ht ml>

Check out the Top Web Development Courses to Start a Career as a Web Developer

Q16. How t o writ e t ext on image in HTML

Ans. Below is the code to write text on image in HT ML:

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
 Copy code

<div class="cont ainer">

<img src="img_t ree_wide.jpg" alt ="T ree" st yle="widt h:100%;">
<div class="bot t om-lef t ">Bot t om Lef t </div>
<div class="t op-lef t ">T op Lef t </div>
<div class="t op-right ">T op Right </div>
<div class="bot t om-right ">Bot t om Right </div>
<div class="cent ered">Cent ered</div>
</div>

Q17. How can comment s be added in CSS?

Ans. We can add comments in CSS using /* and */.

Q18. How t o underline t ext in HTML?

Ans. We use the <u> tag to underline the text in HTML.

Q19. How do you bold t ext in HTML?

Ans. The <b> </b> tag or <strong> </strong> tag are used to bold text in HTML.

Advanced HTML Interview Questions and Answers

The following are the commonly asked advanced-level HTML interview questions:

Q20. What are t he new input t ypes in HTML5 f or f orms?

Ans. T he f ollowing are the new input types in HT ML5 f or f orms:

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
 INPUT
DESCRIPT ION HT ML MARKUP
T YPE

date Allows the user to select a date <input type=”date”>

Allows the user to select date and time using UT C <input

datetime
date and time f ormat type=”datetime”>

<input
datetime-
T o select the date and time as per the local time type=”datetime-
local
local”>

month Select month and year <input type=”month”>

time T he time of day <input type=”time”>

week Enables you to select the week and year <input type=”week”>

color Enables you to enter a simple color value <input type=”color””>

email Validates the input using the standard email f ormat <input type=”email”>

<input
search Searches a data set
type=”search”>

<input
number Accepts only numbers
type=”number”>

url Accepts only URLs <input type=”url”>

Also Read: 100+ Java Interview Questions and Answers

Q21. What is a marquee?

Ans. Marquee tag is a non-standard HT ML element that causes text to scroll up, down, lef t,
or right automatically. You can put the text which you want to scroll on a web page within the
f ollowing tag:

<marquee>……</marquee>

Q22. What happens if you open t he ext ernal CSS f ile in a browser?

Ans. If you try to open the external CSS f ile in a browser, the browser will not open the f ile.
T his is because the f ile has a dif f erent extension. T he only way to use an external CSS f ile

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
is to ref erence it using the <link/> tag within another HT ML document.

Q23. Which t ags are used t o separat e a sect ion of t ext s?

Ans. T he f ollowing three tags are used to separate a section of texts:

<br> – to separate the line of text. It breaks the current line and conveys the f low to the
next line

<p> – It contains the text in the f orm of a new paragraph.

<blockquote> – def ines a large quoted section.

Also Read: PHP Interview Questions and Answers

Q24. Explain t he use of an if rame t ag.

Ans. T he <if rame> tag specif ies an inline f rame. It is used to display a web page within a web
page (to embed another document within the current HT ML document).

For example – T he src attribute is used to specif y the URL of the document that occupies
the if rame.

Syntax:

<if rame src=”URL”></if rame>

Here’s the list of Top Universities Offering Free Online Programming Courses

Q25. What is t he dif f erence bet ween LocalSt orage and SessionSt orage
Object s?

Ans. T he dif f erences between LocalStorage and SessionStorage Objects are:

LocalStorage Object SessionStorage Object

1. It stores the data without an expiry date. 1. Stores the data f or only one session.

2. T he data can be shared between multiple 2. Data is accessible only in the current
windows of the browser. window of the browser.

3. Data is not deleted when the browser 3. T he data is deleted if the browser
window closes. window closes.

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
Q26. What are t he dif f erent media t ypes and f ormat s support ed by HTML?

Ans. HT ML supports a variety of media f ormats f or sound, music, videos, movies, and
animations. T he dif f erent f ormats supported by HT ML are:

Images: jpg, jpeg, png, gif , svg, apng, BMP ico

Audio: RealAudio, WMA, MIDI, AAC, WAV, MP3, MP4

Video: MPEG, AVI, QuickT ime, RealVideo, WMV, Flash, WebM, and MP4

Q27. Explain an image map in HTML.

Ans. An image map is defined by the <map> tag. Using this the image map tag, we
can linking the different web pages using a single image. We can add one or more
clickable areas in a single image using <area> tags.

Q28. How t o creat e mult i-colored t ext on a web page?

Ans. We can use <font color =”color”> </font> to create multi-colored text on a web
page for the specific texts that you want to color.

Q29. How t o add a f avicon in HTML?

Ans. Below is the code to add a f avicon. Access the code of your webpage and in the
<HEAD> section add the f ollowing code.

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

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

Also Read: 10 Best HT ML Editors

Q30. What is t he dif f erence bet ween HTML and XHTML?

Ans. T he dif f erences between HT ML and XHT ML are:

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
 HT ML XHT ML

HT ML stands f or Hypertext Markup XHT ML stands f or Extensible Hypertext

Language. Markup Language.

It is extended f rom SGML (Standard

It has f eatures of both XML and HT ML.
Generalized Markup Language).

HT ML is a static Web Page. XHT ML is a dynamic Web Page.

It uses a document f ile f ormat. It uses markup language.

HT ML is about displaying inf ormation. It is about describing the inf ormation.

XHT ML is case-sensitive. Every tag and

Not case sensitive.
attribute should be in lower case.

Not necessary to close the tags in the It is necessary to close the tags in the order
order they are opened. they are opened.

All content can be included in the body

All contents must be put in blocks.
element.

It requires a lenient HT ML-specif ic parser. Parsing is done with a standard XML parser.

Filename extensions are: .xhtml, .xht, .xml,

Filename extensions are: .html, .htm
.html, .htm

Q31. What is URL Encoding? Why are URLs encoded in HTML?

Ans. URL Encoding is the process of encoding non-ASCII characters in URLs to a f ormat
that is universally accepted by web browsers. URLs are sent over the Internet using the ASCII
character set. If a URL contains characters outside the ASCII set, the URL has to be
converted.

URL is encoded in HT ML as it converts non-ASCII characters into a f ormat that can be

transmitted over the web. T he URL encoding replaces non-ASCII characters with a “%”
f ollowed by hexadecimal digits.

Looking for one single place to learn and grow in your career? Here’s the list of Top Online IT
Courses for freshers and experienced professionals.

Q32. What is an empt y element ?

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
Ans. An empty element is an HTML element that has no content. Example <br>

Q33. How many t ypes of CSS can be included in HTML?

Ans. T his is one of the commonly asked HTML CSS interview questions.

T here are three types of CSS:

Inline CSS – using the style attribute inside HTML elements

Inline CSS is used f or styling small contexts. It contains the CSS property in the body section
attached to the element. The style attribute is used in the relevant tag to use inline
styles added.

Example:

Copy code

<!DOCTYPE html>
<ht ml>
<body st yle="background-color:whit e;">
<h1 st yle="color:red;">A Red Heading</h1>
<p st yle="color:blue;">A blue paragraph.</p>
</body>
</ht ml>

Internal or Embedded CSS – using <style> element in the <head> section

It requires you to add <style> tag in the <head> section of the HT ML document. It is most
suited f or styling a single page that has a unique style. However, using this style f or multiple
pages is time-consuming as CSS rules need to be added to every page of the website.

Example:

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
 Copy code

<head>
<st yle>
body {
background-color: black;
}
h1 {
color: red;
padding: 50px;
}
</st yle>
</head>

External CSS – using a <link> element to link to an external CSS file

It is used when the style is applied to many pages. T o use an external CSS, add a link to it in
the <head> section of each HT ML page.

Example:

Copy code

<head>
<link rel="st ylesheet " t ype="t ext /css" href ="myst yle.css" />
</head>

Also Read: HTML Lists – Ordered and Unordered List

Q34. What is t he use of t he f igure t ag in HTML 5?

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
Ans. T he <f igure> tag identif ies self -contained content related to the main content. It adds
self -contained content like photos, diagrams, illustrations, etc. T he f igure, its caption, and
its contents are ref erenced as a single unit f rom the main f low of the document. T he
<f igure> tag has two elements img src and f igcaption. Img src is used f or adding image
sources in a document, while f igcaption sets the caption of an image.

Example:

Copy code

<f igure>
<img src="pancakes.jpg" alt ="Blueberry Pancakes">
<f igcapt ion>A St ack of Blueberry Pancakes</f igcapt ion>
</f igure>

Also Read: Dif f erence between HT ML and HT ML5

Q35. What is a dat alist t ag?

Ans. T he <datalist> tag provides autocomplete f eature in the HT ML f iles. It enables users to
add the autocomplete f orm based on the predef ined options. It can be used with an input tag
so users can easily f ill the data in the f orms using predef ined options.

Example: If you press A, it will show a list of cars starting with A letter.

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
 Copy code

<label f or="car">Choose your car f rom t he list :</label>

<input list ="cars" name="car" id="car">
<dat alist id="cars">
<opt ion value="Honda">
<opt ion value="Hyundai">
<opt ion value="Marut i">
<opt ion value="Audi">
<opt ion value="BMW">
</dat alist >

Explore Free Online Courses with Certificates

Q36. What are HTML ent it ies?

Ans. A Group of characters that represent reserved and invisible characters in HT ML are
known as HT ML entities. T hese strings start with an ampersand(&) symbol and end with a
semicolon(;). T hey can also replace some characters that are challenging to type on a
standard keyboard.

Syntax: &entity_name; or &#entity_number;

Few entity symbols and their number are mentioned in below table:

Character Symbol Entity Name Entity Number

< Less than &lt; &#60;

> Greater than &gt; &#62;

“ Double quotation mark &quot; &#34;

© Copyright &copy; &#169;

® Registered T rademark &reg; &#174;

& Ampersand &amp; &#38;

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
Q37. What is t he dif f erence bet ween cell padding and cell spacing?

Ans.

Cell Padding Cell Spacing

cell padding is the white space that exists T he space that exists between specif ic
between the edge of a table cell and its neighboring cells is known as “cell
contents. spacing.”

It is associated with just one cell. It is associated with multiple cells.

Cellpadding’s def ault value is 1. Cellspacing’s def ault value is 2.

Also Read: Creating HT ML tables

Q38. What are t he dif f erent ways t o display HTML element s?

Ans. T he dif f erent ways to display HT ML elements are listed below:

inline: Any element at the block level can be shown as an inline element using this
technique. Aspect values f or the element’s height and width have no bearing.

none: T he HT ML element can be hidden by using this property.

block: used to display inline element as a block element.

inline-block: T his property is identical to inline, however utilizing the display as inline-block,
allows us to f ormat the element by using its height and width values.

f lex: T he element and container are shown as f lexible construction. It adheres to f lexbox
properties.

inline-f lex: While its content adheres to the f lexbox specif ications, the f lex container is
shown as an inline element.

grid: It presents the HT ML elements in a grid container.

Q39. What is t he dif f erence bet ween display: none and visibilit y: hidden?

Ans. When an HT ML element has the property “visibility: hidden,” it will be hidden f rom the
webpage yet still occupy space. However, if we apply the “display: none” property f or an
HT ML element, the element will be hidden and will not occupy any space on the website.

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
Also Read: HT ML Formatting: HT ML T ags f or T ext Formatting

Q40. What is t he canvas element in HTML5?

Ans. Using a scripting language such as JavaScript, the “canvas” element serves as a
container f or drawing visuals on web pages. It enables the rendering of bitmap pictures and
2D shapes in a dynamic and scriptable manner. In canvas, there are numerous ways to draw
pathways, boxes, circles, text, and add images.

Example:

Output:

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
Also Read: How to create HT ML Forms

Q41. Will HTML5 work if I don’t use <!DOCTYPE ht ml>?

Ans. No, the HT ML 5 tags won’t work properly and the browser won’t be able to tell that it’s
an HT ML document.

Q42. Why is t he required at t ribut e used in HTML5?

Ans. T his attribute is mainly used f or f orm validation. Bef ore submitting the f orm, it compels
the user to enter text in the text area or text f ield.

Q43. What is t he dif f erence bet ween <em>, <i> and <st rong>, <b> t ags?

Ans. T he ef f ects of the tags <strong>, <b> and <em>, <i> on a typical webpage are identical.
Italic and bold are indicated by the tags <b> and <i>. T hese two tags do little more than apply
f ont styles, while the bold tag (<b>) simply adds extra ink to the text.

While the <strong> and <em> tags indicate that a section of text is more important than
other material in both terms of importance and emphatic stress. T hese tags’ meanings are
semantic.

Also Read: HT ML Heading and Paragraph T ags

Q44. What is t he dif f erence bet ween <div> and <span> t ag?

Ans. T he dif f erence between the span and div elements is that the span element is in-line
and typically used f or a brief paragraph or another tiny block of HT ML inside a line. A div or
division element, on the other hand, is a block line, which is comparable to having a line break
bef ore and af ter it and is used to combine larger portions of code.

Scenario-Based HTML Interview Questions

Q1. If t here isn’t any t ext in bet ween t he HTML t ags, what will happen?

Ans. If no text is present in between the tags, there would be nothing to f ormat. As a result,
nothing will show up on the screen. Some tags, such as those that don’t have a closing tag,

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
like the <img> tag, don’t need any text in between them.

Q2. How can you t ell what charact er set an HTML5 document is using? What
dist inguishes t his f rom earlier HTML st andards?

Ans. In HT ML5, the charset attribute of a <meta> tag inside the document’s <head> element
can be used to specif y the encoding being utilized.

Since the charset attribute wasn’t present in earlier HT ML standards, this syntax is a little bit
simpler. T he f ollowing is an example of how the <meta> element would be used in an HT ML
4.01 document:

Q3. What is t he use of Geolocat ion API in HTML5?

Ans: One of the best HT ML5 APIs is Geolocation API which is used to determine the
geographical location of the user f or a web application. With HT ML5, you can now browse to
the visitor’s current website’s latitude and longitude coordinates. T hese coordinates can be
recorded by JavaScript and sent to the server, allowing it to display your position on the
page. T he geolocation API is used with navigation.geolocation object. A Geolocation object
that contains the user’s location inf ormation and can produce a customized result is

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
returned via the read-only property of the object.

Syntax:

Also Read: Creating HT ML Links

HTML Interview Questions f or Intermediate – 5 years experience

Q1. What is t he benef it of collapsing t he whit e space in HTML?

Ans. White space is a term used to describe empty or blank values in the code the browser
reads and displays. T he collapsing of these white spaces is a unique characteristic of HT ML.
T he advantage of this f eature is in its ability to reduce the time of transmitting data between
server and client by removing unused bytes taken up by the white spaces. If you accidentally
leave excess white space, the browser will disregard it and perf ectly display the UI.

Also Read: HT ML Horizontal Line

Q2. What is t he use of t he Mat hML element in HTML5?

Ans. Mathematics Markup Language is known as MathML. Like other HT ML elements, it is

used to display mathematical statements or equations in web browsers.

Example:

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
Output:

Q3. Is it possible f or t he t ext t o occasionally appear elsewhere ot her t han t he

browser?

Ans. T he text is automatically wrapped to f it the browser window by def ault. T he text might,
however, go outside the browser window if it is a component of a table cell with a f ixed
width.

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
Q4. In t erms of st yle sheet s, what is t he hierarchy t hat is being used?

Ans. T he style def inition that is closest to the actual tag takes precedence when a single
selector has three separate style def initions. External style sheets have a lower priority than
embedded style sheets, which have a lower priority than the inline style.

Q5. Compare and cont rast an HTML specif icat ion wit h a browser’s
implement at ion.

Ans. For a document to be considered “valid” in accordance with an HT ML specif ication,

such as HT ML5, it must f ollow a set of requirements. In addition, a specif ication gives
guidelines f or how a browser should comprehend and display such a document.

A browser is deemed to “support” a specif ication if it processes legitimate documents in

accordance with the specif ications’ guidelines. Although most of the HT ML5 specif ication is
supported by all of the main browsers, not all of it is supported by any browser as of yet,
hence it is up to the developer to determine whether the f eature they plan to utilize will be
supported by all of the browsers they intend to use to view their content.

Due to this, despite the enhanced specif ications, cross-browser support still causes
developers problems. Additionally, while HT ML5 specif ies certain guidelines f or invalid
documents (those with syntactical f aults), f aulty documents may contain anything, making it
hard f or the specif ication to f ully address every scenario. T hus, the browser is lef t in charge
of making numerous decisions regarding how to handle damaged documents.

Also Read : Learn How to write HT ML Comments

Q6. Can element s f rom art icles be f ound in sect ions? Can a sect ion element
be f ound in an art icle? Give usage illust rat ions.

Ans. T he answer to both queries is “yes,” meaning that both “section” and “article” elements
can be f ound in both a section and an article.

A personal dashboard page might, f or instance, have sections f or social network

interactions and the most recent news stories, the latter of which might have many article
elements.

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
On the other hand, an article can have a section at the end f or reader f eedback.

Q7. What is an SVG t ag in HTML? Give Example.

Ans. Scalable Vector Graphics is the abbreviation f or the HT ML SVG. A modularized

language called HT ML SVG is used to describe visuals in XML. Vector and hybrid
vector/raster graphics in two dimensions are described in XML. It comes f rom the W3C. T ext
f iles containing XML def ine the actions of SVG images. T he ability to produce and edit SVG
images as XML f iles means that they can be done with a text editor, but usually speaking,
drawing applications like Inkspace are pref erred f or this purpose.

Example:

Output:

Q8. What is t he dif f erence bet ween met er and progress t ag?

Ans. T he meter tag measures data within a specif ied range, whereas the progress tag just
represents the task’s progress.

Also Read: HT ML Underline T ags

HTML Interview Questions f or Intermediate – 10 years experience

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
Q1. How can websit e asset s be opt imized?

Ans. T o optimize website assets, we must comprehend a f ew f undamental optimization

principles. First, we need to reduce the download size and the number of HT T P queries. We
can use the f ollowing strategies to optimize website assets:

File compression

File concatenation

CDN Hosting

Of f loading assets

Re-organizing

Ref ining code

Q2. What is dat a t ransf er API?

Ans. T he management of data transf ers f rom one user to another within a domain is
handled by the Data T ransf er API. For example, this transf er can be used to redistribute
application data belonging to a user who has left the company. You must first define a
transfer before starting it with the insert method to use the Data Transfer API. The
transfer can include application-specific parameters and describes one or more apps
whose data will be transmitted.

Choose which application(s) you want to transmit data to.

Create a transf er resource that lists the users at the source and destination and the
programs to which the data will be sent.

T o add the transf er request, use the insert method.

Read Also: Dif f erence between HT ML and XML: Which one to use?

Q3. What does HTML5’s applicat ion cache do, and why is it necessary?

Ans. T he HT ML 5 application cache f unctionality is used to cache website data, making it

accessible even without an internet connection. It is highly helpful for desktop-based
web applications that need to save data on local systems.

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
Q4. What does an HTML5 web worker do?

Ans. A script that executes in the background on a dif f erent thread f rom the main web page
is known as a “web worker” in HT ML5. Long tasks can be completed with the help of web
workers without slowing down the website. Web workers cannot access the f ollowing
JavaScript objects because web workers reside in external f iles:

T he window object

T he document object

T he parent object

Also Read: HT ML T ags

Q5. How t o specif y t he met adat a in HTML5?

Ans. Metadata in HTML5 can be specified using the “head” element of an HTML
document. The “head” element contains information about the document, such as
its title, author, description, and keywords.

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
 Copy code

<!DOCTYPE html>
<ht ml>
<head>
<t it le>My Websit e</t it le>
<met a name="descript ion" cont ent ="T his is my personal websit e.">
<met a name="aut hor" cont ent ="John Doe">
<met a name="keywords" cont ent ="websit e, personal, blog">
</head>
<body>
<!-- The content of the website goes here -->
</body>
</ht ml>

Q6. What is Microdat a?

Ans. A standardized method of adding extra semantics to your web pages is by using
microdata.

You can def ine your unique elements using microdata and add unique attributes to your web
pages. Microdata is a general term f or a collection of name-value pairs.

Each name-value pair in the groups is ref erred to as a property. Regular elements are used
to represent objects and properties.

Q7. What is t he dif f erence bet ween SVG and Canvas HTML5 element s?

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
 SVG Canvas

Vector-based graphics Bitmap-based graphics

Uses XML to def ine shapes Uses JavaScript to draw graphics

Ideal f or static and interactive graphics Ideal f or complex animations and games

Can be scaled without losing quality Scaling can lead to loss of quality

Supports interactivity with CSS and

Requires scripting f or interactivity
JavaScript

Good f or high-resolution displays Good f or low-resolution displays

Ideal f or games, photo editing, and video

Ideal f or logos, icons, and charts
editing

Slower perf ormance f or complex

Faster perf ormance f or complex animations
animations

Supported in all modern browsers Supported in all modern browsers

Q8. What are t he cust om at t ribut es in HTML5?

Ans. Custom attributes are those that are specif ically designed and are not included in the
standard HT ML5 attributes. T hey enable us to customize HT ML tags by adding our own data.
T hese can be used with any HT ML element because they are not specialized. Custom
attributes allow storing additional data that is not required for a specif ic purpose.

T his inf ormation is kept within the program or website. T he term “data attributes” also
applies to the custom attributes. A custom attribute is one whose name begins with the
pref ix data-. Custom attributes can be included using the data-* attributes on any HT ML
element. T he user agent ignores these entirely. T he page’s JavaScript can make use of the
stored data. Additionally, we may style our elements using these data attributes.

Syntax:

Read Also: Understanding HT ML Elements

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.
Q9. What are t he essent ial goals of t he HTML5 specif icat ion?

Ans. The HTML5 specification was designed to achieve several significant goals,
including:

Compatibility: Ensure backwards and forward compatibility with older versions of

HTML and other web technologies.

Multimedia Support: Provide native support for multimedia content such as video
and audio, eliminating the need for third-party plugins like Adobe Flash.

Device Independence: Allow web applications to run on various devices, including

desktop computers, laptops, tablets, and smartphones.

Accessibility: Improve accessibility by providing support for assistive technologies

and making it easier to create web content that is accessible to users with
disabilities.

Semantic Markup: Promote semantic markup to make web content more meaningful
and understandable by humans and machines.

Consistency: Provide consistent features and behaviours across different browsers,

reducing the need for browser-specific code.

Security: Improve security by providing more robust mechanisms for handling user
input and data and preventing malicious code from executing on a user’s device.

Q10. What is t he use of t he <out put > t ag in HTML, and what are it s at t ribut es?

Ans. T he HT ML <output> tag is used to represent a result f or any calculation. Its attributes
are mentioned below:

f or: It outlines the connection between the calculation’s inputs and outputs.

f orm: T his specif ies the f orm to which the output element belongs.

name: An <output> element’s name is specif ied via the name attribute.

Example:

Disclaim e r: This PDF is auto -generated based o n the info rmatio n available o n Shiksha as
o n 0 1-No v-20 23.