HTML Interview Questions & Answers

Complete Guide for Freshers & Beginners — 30 Questions

1. What is a Tag in HTML? Can you define HTML attributes?

A Tag in HTML is a keyword enclosed in angle brackets (< >) that tells the browser how to display
content. Tags usually come in pairs — an opening tag and a closing tag. For example, <p> is an
opening tag and </p> is its closing tag.
HTML Attributes provide additional information about an element. They are always placed inside
the opening tag and come in name/value pairs like name="value".
Example: <a href="[Link] target="_blank">Click Here</a>
Here, href and target are attributes of the anchor tag.

2. What is the key difference between HTML Elements and Tags?

An HTML Tag is just the markup label enclosed in angle brackets (e.g., <p>). An HTML Element,
on the other hand, includes everything — the opening tag, the content in between, and the closing
tag together.
Example:
Tag: <p>
Element: <p>This is a paragraph.</p>
In short, a tag is a component of an element. An element is the complete unit from opening to
closing tag.

3. Can you separate sections of text in HTML?

Yes! HTML provides several tags to separate and structure sections of text:
• <p> — Defines a paragraph with spacing above and below.
• <br> — Inserts a single line break (self-closing).
• <hr> — Creates a horizontal rule/line to visually divide sections.
• <div> — A block-level container for grouping content.
• Heading tags (<h1> to <h6>) — Define headings of different levels, naturally separating content.
• <section>, <article>, <aside> — Semantic HTML5 tags to separate logical sections.
Using these tags together gives your page clear, readable structure.

4. If you want to display HTML data in tabular format, which tags will you use?
To display data in a table, HTML provides the following tags:
• <table> — Defines the entire table.
• <tr> — Defines a table row.
• <th> — Defines a header cell (bold & centered by default).
• <td> — Defines a standard data cell.
 • <thead> — Groups header rows.
• <tbody> — Groups body rows.
• <tfoot> — Groups footer rows.
• <caption> — Adds a caption/title to the table.
• colspan / rowspan — Attributes to merge cells.
Example structure:
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alice</td><td>25</td></tr>
</table>

5. What are Attributes in HTML?

Attributes provide extra information about HTML elements. They are always written inside the
opening tag and follow the format: attribute="value".
Common attributes include:
• id — Gives a unique identifier to an element.
• class — Assigns one or more class names for CSS styling.
• src — Specifies the source URL for images/scripts.
• href — Specifies the link URL in anchor tags.
• alt — Alternative text for images.
• style — Inline CSS styling.
• type — Specifies the type of an input element.
• disabled, readonly, required — Boolean attributes for form controls.

6. What is an Anchor Tag in HTML?

The anchor tag <a> is used to create hyperlinks in HTML. It allows users to navigate from one
page or location to another.
Syntax: <a href="URL">Link Text</a>
Key attributes:
• href — The destination URL.
• target — Specifies where to open the link (_blank opens in a new tab).
• title — Tooltip text on hover.
• rel — Specifies the relationship (e.g., nofollow, noopener).
Example: <a href="[Link] target="_blank">Visit Google</a>

7. What are Lists in HTML?

HTML supports three types of lists:
1. Ordered List (<ol>) — Displays items in a numbered sequence.
 <ol><li>First</li><li>Second</li></ol>
2. Unordered List (<ul>) — Displays items with bullet points.
<ul><li>Apple</li><li>Mango</li></ul>
3. Description List (<dl>) — Pairs terms with descriptions.
<dl><dt>HTML</dt><dd>HyperText Markup Language</dd></dl>
Each list item is wrapped in the <li> tag (or <dt>/<dd> for description lists).

8. Define HTML Layout

HTML Layout refers to the way web page content is visually arranged and structured. HTML5
introduced semantic layout tags that make page structure clearer:
• <header> — Top section (logo, navigation).
• <nav> — Navigation links.
• <main> — Primary content area.
• <section> — Thematic grouping of content.
• <article> — Self-contained content (blog post, news article).
• <aside> — Sidebar or related content.
• <footer> — Bottom section (copyright, contact info).
• <div> — Generic container used with CSS for layout.
CSS (Flexbox or Grid) is typically used alongside these elements to position them on the page.

9. What are Forms in HTML?

HTML Forms are used to collect user input and submit it to a server. They are created using the
<form> tag.
Key form elements:
• <input> — Various input types: text, password, email, checkbox, radio, submit, etc.
• <textarea> — Multi-line text input.
• <select> and <option> — Dropdown menus.
• <button> — Clickable button.
• <label> — Describes an input field.
Key attributes of <form>:
• action — URL where data is sent.
• method — HTTP method: GET or POST.
Example:
<form action="/submit" method="POST">
<input type="text" name="username">
<button type="submit">Submit</button>
</form>
10. What is the Use of Comments in HTML?
HTML comments are used to insert notes in the source code that are not displayed in the browser.
They help developers document the code, temporarily disable code, or leave reminders.
Syntax: <!-- This is a comment -->
Uses:
• Explain the purpose of a section of code.
• Debug by commenting out code temporarily.
• Add TODO notes for future changes.
• Improve code readability for teams.
Comments are visible in the browser's page source, so never put sensitive information
(passwords, keys) in HTML comments.

11. What is HTML5?

HTML5 is the fifth and current major version of HTML (HyperText Markup Language). It was
standardized by the W3C and WHATWG to modernize web development.
Key features of HTML5:
• New semantic elements: <header>, <footer>, <article>, <section>, <nav>, <aside>.
• Multimedia support: <audio> and <video> tags without plugins.
• Canvas & SVG: For drawing graphics directly in the browser.
• Web Storage: localStorage and sessionStorage APIs.
• Geolocation API: Access to user location.
• Improved forms: New input types (date, email, range, color, etc.).
• Web Workers: Background JavaScript processing.
• Offline support via Application Cache / Service Workers.
HTML5 eliminated the need for Adobe Flash and made websites more dynamic, mobile-friendly,
and accessible.

12. What is Semantic HTML?

Semantic HTML means using HTML elements that clearly describe their purpose and meaning —
both to the browser and to the developer.
Non-semantic: <div>, <span> — tell nothing about their content.
Semantic: <article>, <nav>, <header>, <footer>, <main> — clearly describe their role.
Benefits of semantic HTML:
• Accessibility: Screen readers can navigate meaningful structure.
• SEO: Search engines better understand page content.
• Readability: Easier for developers to read and maintain.
• Browser consistency: Browsers render semantic pages more predictably.
Always prefer semantic tags over generic <div> containers wherever possible.
13. What is an Image Map?
An Image Map allows you to define clickable areas on a single image, each linking to a different
URL. It is created using the <map> and <area> tags.
Syntax:
<img src="[Link]" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="34,44,270,350" href="[Link]">
<area shape="circle" coords="337,300,44" href="[Link]">
</map>
Shapes supported: rect (rectangle), circle, poly (polygon).
Coords define the boundaries of each clickable region.
Image maps are useful for geographic maps, diagrams, and infographics.

14. Why is the Embed Tag Used in HTML?

The <embed> tag is used to embed external content or media directly into an HTML page. It is a
self-closing tag.
Common uses:
• Embedding PDF files.
• Embedding videos or audio.
• Embedding Flash content (legacy).
• Embedding external web pages or plugins.
Syntax: <embed src="[Link]" type="application/pdf" width="600" height="400">
Key attributes: src, type, width, height.
Note: For modern HTML5 development, <video> and <audio> tags are preferred for media.
<embed> is mainly used for PDFs or plugin-based content.

15. What is a 'Marquee' Tag in HTML?

The <marquee> tag was used to create scrolling text or images on a web page. The content inside
it would scroll horizontally or vertically.
Syntax: <marquee direction="left" scrollamount="5">Scrolling Text</marquee>
Attributes: direction (left/right/up/down), scrollamount (speed), behavior (scroll/slide/alternate),
bgcolor, width, height.
Important: The <marquee> tag is deprecated in HTML5 and should no longer be used. Modern
developers use CSS animations or JavaScript to achieve scrolling/moving text effects.

16. How do we add a copyright symbol on a browser page?

There are two ways to add the copyright symbol (c) in HTML:
1. HTML Entity (recommended): &copy;
Example: <p>&copy; 2024 My Company</p>
 Renders as: (c) 2024 My Company
2. Unicode Character: ©
Example: <p>&#169; 2024 My Company</p>
3. Direct character: You can also type the (c) symbol directly if your file is saved in UTF-8
encoding.
Using HTML entities is the safest and most compatible approach across all browsers and
character encodings.

17. How many tags can one use to segregate a section of texts?
HTML provides multiple tags for separating and organizing sections of text:
1. <p> — Paragraph, adds spacing between blocks of text.
2. <br> — Line break within text.
3. <hr> — Horizontal rule, a visual separator line.
4. <div> — Block-level container.
5. <span> — Inline container.
6. <h1> to <h6> — Six heading levels.
7. <section> — Thematic section.
8. <article> — Independent content block.
9. <aside> — Side content.
10. <header> and <footer> — Top and bottom sections.
11. <blockquote> — Quoted block of text.
12. <pre> — Preformatted text.
So there are at least 12+ tags that can be used to segregate text sections.

18. Why do we use alternative texts in images?

The alt attribute in the <img> tag provides alternative text that is displayed when an image cannot
be loaded, and read aloud by screen readers.
Syntax: <img src="[Link]" alt="A golden retriever playing in the park">
Reasons to use alt text:
• Accessibility: Screen readers use alt text to describe images to visually impaired users.
• SEO: Search engines index alt text to understand image content.
• Broken images: If the image fails to load, alt text is shown instead.
• Compliance: Web accessibility standards (WCAG) require meaningful alt text.
Best practice: Make alt text descriptive and concise. For decorative images, use alt="" (empty) so
screen readers skip them.

19. Is the DOCTYPE html tag considered an HTML tag?

No, <!DOCTYPE html> is not technically an HTML tag. It is a document type declaration (DTD)
that instructs the browser about the version of HTML being used.
 Key points:
• It must appear at the very first line of an HTML document, before the <html> tag.
• In HTML5, it is simply: <!DOCTYPE html>
• It is not case-sensitive.
• It has no closing tag.
• It tells the browser to render the page in standards mode (not quirks mode).
Without DOCTYPE, browsers may switch to quirks mode and render the page inconsistently
across different browsers.

20. Explain the key differences between SessionStorage and LocalStorage objects.
Both sessionStorage and localStorage are Web Storage APIs introduced in HTML5 for storing
data on the client side (in the browser).
LocalStorage:
• Data persists even after the browser is closed and reopened.
• Data is shared across all tabs/windows of the same origin.
• No expiration — data stays until explicitly deleted.
• Storage limit: ~5–10 MB.
• Use case: Remembering user preferences, login tokens.
SessionStorage:
• Data is cleared when the browser tab or window is closed.
• Data is isolated per tab (not shared between tabs).
• Storage limit: ~5 MB.
• Use case: Temporary data like form entries, single-session state.
Both use the same key-value pair API: setItem(), getItem(), removeItem(), clear().

21. How are active links different from normal links?

In HTML, links have different visual states that can be styled using CSS pseudo-classes:
• Normal link (:link) — A link that has not been visited yet. Default color: blue, underlined.
• Visited link (:visited) — A link the user has already clicked. Default color: purple.
• Active link (:active) — A link at the exact moment it is being clicked (mouse button held down).
Default color: red.
• Hover (:hover) — When the mouse cursor is over the link.
CSS example:
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: orange; }
a:active { color: red; }
The active state is very brief — only while the link is being pressed.
22. What is the difference between HTML and XHTML?
HTML (HyperText Markup Language) and XHTML (Extensible HyperText Markup Language) are
both markup languages for creating web pages, but XHTML follows stricter XML rules.
Key differences:
• Syntax strictness: XHTML requires all tags to be properly closed; HTML is more forgiving.
• Case sensitivity: XHTML tags must be lowercase; HTML is case-insensitive.
• Attribute quoting: XHTML requires all attributes to be quoted; HTML allows unquoted attributes.
• Self-closing tags: XHTML requires self-closing for void elements (<br />); HTML allows <br>.
• DOCTYPE: XHTML requires a strict DOCTYPE declaration.
• MIME type: XHTML is served as application/xhtml+xml; HTML as text/html.
HTML5 is the modern standard and is generally preferred over XHTML for its flexibility and ease of
use.

23. How to add a favicon in HTML?

A favicon is a small icon displayed in the browser tab next to the page title. To add one:
Place the favicon file (usually [Link] or .png) in your project root, then add this inside the
<head> section:
<link rel="icon" type="image/x-icon" href="/[Link]">
For PNG format:
<link rel="icon" type="image/png" href="/[Link]">
For multiple sizes (best practice):
<link rel="icon" sizes="16x16" href="/[Link]">
<link rel="icon" sizes="32x32" href="/[Link]">
Modern browsers also support SVG favicons:
<link rel="icon" type="image/svg+xml" href="/[Link]">
The favicon appears in browser tabs, bookmarks, and history.

24. What is meant by URL Encoding? Why should you encode URLs in HTML?
URL Encoding (also called percent-encoding) converts special characters in a URL into a format
that can be safely transmitted over the internet. URLs can only contain certain ASCII characters;
other characters must be encoded.
How it works: Each special character is replaced with a % followed by its two-digit hexadecimal
ASCII code.
Examples:
• Space → %20
• & → %26
• = → %3D
• # → %23
Why encode URLs?
 • Browsers and servers only accept ASCII characters in URLs.
• Special characters like spaces, &, =, # have special meanings in URLs.
• Encoding prevents misinterpretation of URL parameters.
• Ensures consistent behavior across different browsers and servers.
In HTML forms, the browser automatically URL-encodes form data before submission.

25. What is a Datalist Tag?

The <datalist> tag provides an autocomplete feature for input fields. It defines a list of predefined
options that appear as suggestions when a user types in an associated <input> field.
Syntax:
<input list="fruits" name="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Mango">
<option value="Banana">
</datalist>
Key points:
• The input's list attribute must match the datalist's id.
• Users can still type any value — it's a suggestion, not a strict dropdown.
• It's different from <select> which forces choosing from the list only.
• Introduced in HTML5.

26. What are the different ways to display HTML elements?

The CSS display property controls how an element is rendered. Common display values for HTML
elements:
• block — Takes full width, starts on a new line. (e.g., <div>, <p>, <h1>)
• inline — Takes only as much width as needed, no line break. (e.g., <span>, <a>, <strong>)
• inline-block — Like inline but allows width/height. (e.g., <img>, <button>)
• none — Hides the element completely (no space taken).
• flex — Flexible box layout for 1D alignment.
• grid — CSS Grid for 2D layout.
• table — Behaves like a table element.
• list-item — Behaves like an <li> element.
• contents — The element itself is invisible, children are rendered.
You can override any element's default display using CSS: display: block; or display: flex; etc.

27. What is the difference between EM, I and STRONG, B tags?

Both pairs look visually similar but carry different semantic meaning:
 <em> vs <i>:
• <em> (Emphasis) — Semantically marks text as stressed/emphasized. Screen readers change
tone. Used for meaningful emphasis.
• <i> (Italic) — Just visually italicizes text. No semantic meaning. Used for technical terms, foreign
words, or stylistic italic.
<strong> vs <b>:
• <strong> — Semantically marks text as important/urgent. Screen readers may emphasize it.
Used for warnings, key terms.
• <b> — Just visually bolds text. No semantic importance. Used for stylistic bold without implying
importance.
Rule of thumb: Use <em> and <strong> for meaningful emphasis; use <i> and <b> for purely
visual styling.

28. What is an SVG Tag in HTML?

SVG (Scalable Vector Graphics) is an XML-based markup language for describing 2D vector
graphics. The <svg> tag in HTML embeds SVG graphics directly into a web page.
Key features:
• SVGs are resolution-independent — they scale perfectly to any size without pixelation.
• Defined in XML, so they can be styled with CSS and manipulated with JavaScript.
• Smaller file size than raster images for simple graphics.
Common SVG elements:
• <circle>, <rect>, <ellipse> — Basic shapes.
• <line>, <polyline>, <polygon> — Line-based shapes.
• <path> — Complex custom shapes.
• <text> — Text within SVG.
Example:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
SVGs are ideal for icons, logos, charts, and illustrations.

29. What is the advantage of collapsing white space?

In HTML, multiple consecutive white spaces (spaces, tabs, newlines) are automatically collapsed
into a single space when rendered in the browser. This is the default browser behavior.
Advantages:
• Cleaner code: Developers can format HTML with indentation and line breaks for readability
without affecting the visual output.
• Consistent rendering: The page looks the same regardless of how the HTML source is formatted.
• Reduced unintended gaps: Prevents accidental large spacing from indentation.
 Exception: The <pre> tag preserves white space exactly as typed.
CSS white-space property can also control behavior:
• white-space: pre — Preserves spaces and line breaks.
• white-space: nowrap — Prevents line wrapping.
• white-space: normal — Default collapsing behavior.
Collapsing white space is one reason HTML code can be freely indented for readability.

30. Describe the HTML Layout Structure.

A complete HTML page follows a standard layout structure. Here is a full breakdown:
Outer Structure:
• <!DOCTYPE html> — Document type declaration.
• <html> — Root element wrapping the entire page.
• <head> — Metadata section (not visible to user).
- <meta charset>, <meta name="viewport">
- <title> — Page title in browser tab.
- <link> — Stylesheet links.
- <script> — JavaScript links.
• <body> — Visible content of the page.
Semantic Layout inside <body>:
• <header> — Logo, site name, top navigation.
• <nav> — Navigation menu with links.
• <main> — Primary content:
- <section> — Grouped thematic content.
- <article> — Independent content blocks.
- <aside> — Sidebar, related links, ads.
• <footer> — Copyright, social links, contact info.
This semantic structure improves accessibility, SEO, and code maintainability.

End of HTML Interview Q&A — Good Luck!