2024

HTML interview Questions

TCA
3/2/2024
Q1. What is HTML?

HTML stands for Hypertext Markup Language. It is the standard markup language
used to create and design web pages. HTML provides the structure and layout of
content on a webpage by using a system of tags and attributes.

HTML tags are elements enclosed in angle brackets < >, and they are used
to define different parts of a webpage such as headings, paragraphs, links,
images, tables, and more. Attributes provide additional information about an
element and are added within the opening tag of an HTML element.

HTML documents are composed of a series of nested elements that create

a hierarchical structure. Browsers interpret HTML documents and render them
into visual web pages that users can interact with.

HTML is often used in conjunction with Cascading Style Sheets (CSS) and
JavaScript to create visually appealing and interactive web pages. While HTML
provides the structure and content of a webpage, CSS is used to style the
appearance of the elements, and JavaScript is used to add interactivity and
functionality to the webpage.

Q2. What is the difference between HTML elements and tags?

Elements Tags

An HTML element is a fundamental HTML tags are markers that define the
building block of an HTML document. It beginning and end of an HTML element.
consists of an opening tag, content, and a They consist of angle brackets < >
closing tag (in most cases). The content is surrounding the name of the element. Tags
the information that appears between the are used to indicate the start and end of an
opening and closing tags, and it can include element, and they are essential for
text, other elements, or multimedia browsers to interpret and render HTML
content. Elements are used to define the documents correctly.
structure and semantics of a webpage.
Example of HTML tags:
Example of an HTML element:
• Opening tag: <p>
<p>This is a paragraph element. </p> • Closing tag: </p>

In this example, <p> is the opening tag,

This is a paragraph element. is the
content, and </p> is the closing tag.

TCA 1
Q3. What are Attributes and how do you use them?

Attributes are additional pieces of information that can be added to HTML

elements to provide extra details or modify the behaviour of the element.
Attributes are always specified in the opening tag of an HTML element and
consist of a name-value pair. The name of the attribute is followed by an equal’s
sign = and the attribute value, which is enclosed in quotation marks " ".

Example:

<img src="image.jpg" alt="Description of the image">

In this example, src and alt are attributes of the <img> element. The src
attribute specifies the URL of the image to be displayed, while the alt
attribute provides alternative text for the image, which is displayed if
the image cannot be loaded or by screen readers for accessibility.

Q4. What is the difference between a block-level element and an

inline element?

Block Inline
A block-level element is drawn as a block Inline elements are drawn where they are
that stretches to fill the full width available defined and only take up space that is
to it i.e, the width of its container and will absolutely needed. The easiest way to
always start on a new line. understand how they work is to look at how
Elements that are block-level by text flows on a page.
default: <div>, <img>, <section>, <form>, Examples of elements that are inline by
<nav>. default: <span>, <b>, <strong>, <a>,
<input>.

Q5. How to create a Hyperlink in HTML?

To create a hyperlink in HTML, you use the <a> (anchor) element. The <a>
element defines a hyperlink, which is used to link from one webpage to another
or to link within the same webpage. Here's the basic syntax

<a href="URL">Link text</a>

TCA 2
Explanation of the attributes:

• href: This attribute specifies the URL (web address) of the page the link
goes to. It could also be a file path or an email address.
• Link text: This is the text that will be displayed as the clickable link.

Example:

<a href="https://www.example.com">Visit Example</a>

In this example, when a user clicks on "Visit Example," the browser navigates to
https://www.example.com.

You can also create links that navigate to specific sections within the same
webpage using the href attribute combined with the id attribute of an element.
For example:

<a href="#section2">Go to Section 2</a>

<h2 id="section2">Section 2</h2>

In this example, clicking on "Go to Section 2" will scroll the page to the <h2>
element with the id attribute set to "section2".

Q6. What are the HTML tags used to display the data in the tabular
form?

The list of HTML tags used to display data in the tabular form include:

Tag Decsription
<table> It defines a table
<tr> This tag defines a row in a table
<th> It defines a header cell in a table
<td> This is used to define a cell in a table
<caption> It defines the table caption
<colgroup> It specifies a group of one or more columns in a table for formatting
<col> This is used with <colgroup> element to specify column properties for
each column
<tbody> This tag is used to group the body content in a table.
<thead> It is used to group the header content in a table
<tfooter> It is used to group the footer content in a table

TCA 3
Q7. Name some common lists that are used when designing a
page.

There are many common lists used for design a page. You can choose any or a
combination of the following list types:

• Ordered list – The ordered list displays elements in a numbered format.

It is represented by <ol> tag.
• Unordered list – The unordered list displays elements in a bulleted
format. It is represented by <ul> tag.
• Definition list – The definition list displays elements in definition form
like in a dictionary. The <dl>, <dt> and <dd> tags are used to define
description list.

Q8. What is semantic HTML?

Semantic HTML refers to the use of HTML markup to convey the meaning or
purpose of the content within a web page, rather than just its appearance. It
involves using HTML elements that have descriptive names and reflect the
structure of the content they enclose.

In simpler terms, semantic HTML helps both search engines and web browsers
better understand the content of a webpage, which can improve accessibility,
search engine optimization (SEO), and overall code readability.

Examples of semantic HTML elements include:

1. <header>: Defines a header for a document or a section.

2. <nav>: Defines a section that contains navigation links.
3. <article>: Represents an independent piece of content that can stand
alone.
4. <section>: Defines a section in a document.
5. <aside>: Represents content that is tangentially related to the content
around it.
6. <footer>: Defines a footer for a document or a section.

By using semantic HTML elements appropriately, developers can create web

pages that are easier to understand, maintain, and navigate for both humans
and machines.

TCA 4
Q9. What is the difference between DIV and SPAN in HTML?

<div> and <span> are both HTML elements used for grouping and styling
content, but they serve different purposes and are typically used in different
contexts:

1. <div> (Division):

• <div> is a block-level element, which means it creates a block of

content that typically starts on a new line and stretches the full
width of its container.

• It is used to group together sections of HTML content for layout

purposes or to apply CSS styles to a larger section of content.

• <div> elements are commonly used to structure the layout of a

webpage by dividing it into sections such as headers, footers,
sidebars, and main content areas.

Example:

<div> <p>This is a paragraph inside a div.</p> </div>

2. <span> (Inline):

• <span> is an inline-level element, which means it does not create a

new line and only takes up as much width as necessary to contain
its content.

• It is used to apply styles to small pieces of text within a larger block

of content or to target specific portions of text for scripting or
styling purposes.

• <span> is often used to apply CSS styles to individual words,

phrases, or inline elements within a paragraph or heading.

Example:

<p>This is a <span style="color: blue;">blue</span> word.</p>

In summary, <div> is used for grouping and structuring larger sections of

content, often for layout purposes, while <span> is used for applying styles or
targeting specific portions of text within a block of content.

TCA 5
Q10. What are the entities in HTML?

In HTML, entities are special characters that have a reserved meaning and
cannot be directly used in the text of a webpage. Instead, you must use their
entity name or entity number to display them correctly. Entities are primarily
used to represent characters that have special significance in HTML, such as
reserved characters like <, >, &, as well as characters with special formatting or
non-ASCII characters.

Here are some commonly used entities in HTML:

1. Reserved Characters:

• &lt; for < (less than)

• &gt; for > (greater than)

• &amp; for & (ampersand)

2. Formatting and Presentation:

• &nbsp; for a non-breaking space

• &copy; for © (copyright symbol)

• &reg; for ® (registered trademark symbol)

• &trade; for ™ (trademark symbol)

3. Non-ASCII Characters:

• &eacute; for é (e with acute accent)

• &Agrave; for À (A with grave accent)

• &Ouml; for Ö (O with umlaut)

Using entities ensures that your HTML code remains valid and that special
characters are displayed correctly in browsers. It's especially important when
dealing with characters that have special meanings in HTML or characters that
are not part of the ASCII character set.

TCA 6
Q11. Explain The Key Differences Between LocalStorage And
SessionStorage Objects.

localStorage and sessionStorage are both storage mechanisms provided by

modern web browsers as part of the Web Storage API. They allow web
applications to store data locally within the user's browser. However, there are
key differences between them:

1. Lifetime of Stored Data:

• localStorage: Data stored using localStorage persists even after

the browser is closed and reopened. It remains stored until
explicitly removed by the web application or until the user clears
their browser's cache.

• sessionStorage: Data stored using sessionStorage is available only

for the duration of the page session. Once the browser tab or
window is closed, the data is cleared and no longer accessible. Each
tab or window in a browser has its own separate sessionStorage
area, so data stored in one tab is not accessible from another.

2. Scope:

• localStorage: Data stored in localStorage is shared across all

pages from the same origin (i.e., the same protocol, domain, and
port). This means that any page from the same origin can access
and modify the data stored in localStorage.

• sessionStorage: Data stored in sessionStorage is scoped to the

specific tab or window in which it was created. It is not accessible to
other tabs or windows from the same origin.

3. Persistence:

• localStorage: Data stored in localStorage persists indefinitely until

explicitly removed or until the user clears their browser's cache.

• sessionStorage: Data stored in sessionStorage persists only for

the duration of the page session. It is automatically cleared when
the page session ends, such as when the tab or window is closed.

4. Use Cases:

• localStorage: Typically used for storing data that needs to persist

across browser sessions, such as user preferences, settings, or
cached data.

TCA 7
 • sessionStorage: Often used for storing temporary data that is only
needed for the duration of the page session, such as form data,
temporary authentication tokens, or session-specific state.

Q12. What are the features of HTML5

HTML5 introduced several new features and improvements over its

predecessors. Here are some key features of HTML5:

Semantic Elements:

HTML5 introduced new semantic elements like <header>, <footer>, <nav>,

<section>, <article>, <aside>, <main>, etc., which provide more meaningful
structure to web pages.

Audio and Video Support:

HTML5 introduced native support for embedding audio and video content
directly into web pages without the need for third-party plugins like Flash. This is
achieved through the <audio> and <video> elements.

Canvas and SVG:

HTML5 introduced the <canvas> element, which provides a drawing surface for
dynamically generating graphics, charts, animations, and games using JavaScript.

HTML5 also added native support for Scalable Vector Graphics (SVG), allowing
vector-based graphics to be embedded directly into HTML documents.

Improved Forms:

HTML5 introduced several new input types and attributes for forms, including
email, URL, date, time, number, range, color, and more, making it easier to
create user-friendly and accessible forms.

Additionally, HTML5 introduced the <datalist> element, which provides a

predefined list of options for input fields, and the placeholder attribute, which
displays a hint or example text within an input field.

Offline and Storage:

HTML5 introduced the Application Cache (AppCache) and Local Storage API,
allowing web applications to work offline and store data locally within the user's
browser even when the internet connection is unavailable.

TCA 8
HTML5 also introduced the Web Storage API, which provides a more efficient
way to store data locally using key-value pairs through the localStorage and
sessionStorage objects.

Geolocation API:

HTML5 introduced the Geolocation API, which allows web applications to access
the user's geographic location using JavaScript, enabling location-based services
and personalized content.

Web Workers:

HTML5 introduced the concept of Web Workers, which allows scripts to run in
the background independently of the main browser thread, improving
performance and responsiveness, especially for tasks that are CPU-intensive or
time-consuming.

Responsive Design and Accessibility:

While not directly part of HTML5 specifications, the HTML5 era coincided with a
focus on responsive web design principles, making it easier to create websites
that adapt to different screen sizes and devices.

HTML5 also promotes accessibility through its semantic elements and attributes,
making it easier for developers to create web pages that are more accessible to
users with disabilities.

These are just a few of the key features of HTML5 that have had a significant
impact on web development and user experience. HTML5 continues to evolve,
with ongoing improvements and new features being introduced over time.

TCA 9