Scribd
Upload
5 views49 pages

HTML Interview Questions

The document is a comprehensive guide on HTML interview questions and answers, covering various topics such as semantic elements, text formatting, links, and developer practices. It includes detailed explanations of HTML concepts, the importance of semantic HTML, and practical examples. The guide serves as a resource for developers to enhance their understanding of HTML and prepare for interviews.

Uploaded by

vptsenthamaraiselvan
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views49 pages

HTML Interview Questions

The document is a comprehensive guide on HTML interview questions and answers, covering various topics such as semantic elements, text formatting, links, and developer practices. It includes detailed explanations of HTML concepts, the importance of semantic HTML, and practical examples. The guide serves as a resource for developers to enhance their understanding of HTML and prepare for interviews.

Uploaded by

vptsenthamaraiselvan
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML Interview Questions &

Answers A Comprehensive Guide for Developers

Adhishthatri Singh

October 1, 2025
by Adhishthatri Singh

Contents

1 Introduction & Basics 3

2 Semantic & Structural Elements 6

3 Text, Formatting & Headings 9

4 Links & Navigation 12

5 Lists 14

6 Images & Multimedia 16

7 Tables 19

8 Forms & Inputs 21

9 Attributes, Classes, IDs 26

10 Scripting & Styles 28

11 HTML5 & APIs 30

12 Accessibility & SEO 33

13 Deprecated & Compatibility 34

14 Advanced / Miscellaneous 36

15 Practical/Code-Oriented 40

16 Meta Tags & SEO 43

17 Developer Practices / Usability 45

18 Layout & Structure 46

19 Browser & Device 47

1
by Adhishthatri Singh

20 HTML with Other Technologies 48

2
by Adhishthatri Singh

1 Introduction & Basics

1. What does HTML stand for?


HTML stands for HyperText Markup Language.

• HyperText: Refers to the "links" that connect web pages to one another.
• Markup: Refers to the tags used to define the structure of content.

2. Who invented HTML?


HTML was invented by Tim Berners-Lee in 1991. He is also known as the father
of the World Wide Web.

3. What is HTML?
HTML is the standard markup language used to create the structure and content of
web pages. It consists of a series of elements that you use to wrap different parts of
the content to make it appear or act in a certain way.

4. Why is HTML important in web development?


HTML is the fundamental building block of the web. It provides the essential structure
for all web pages, acting as the skeleton to which styling (CSS) and functionality
(JavaScript) are applied.

5. What is a tag in HTML?


An HTML tag is a keyword enclosed in angle brackets, like <p>. Tags are used to
mark the beginning and end of an HTML element. Most tags come in pairs: a start
tag (e.g., <h1>) and an end tag (e.g., </h1>).

6. What is an HTML element?


An HTML element is an individual component of an HTML document, typically
consisting of a start tag, the content, and an end tag.
1 <p > This entire line is one HTML element . </ p >
HTML Element Example

3
by Adhishthatri Singh

7. What are empty (void) tags?


Empty tags, or void elements, are HTML tags that do not have an end tag or content.
They are self-closing. Common examples include <br>, <hr>, <img>, <input>, and
<meta>.

8. What is the difference between containers and non-containers?


Container Elements have an opening and a closing tag and can hold text or other
HTML elements (e.g., <div>, <p>). Non-Container Elements (Void Elements) are
empty, self-closing tags that cannot contain other elements (e.g., <img>, <br>).

9. What is the basic structure of a simple HTML document?


A simple HTML document includes the document type declaration, the <html> ele-
ment, a <head> for metadata, and a <body> for visible content.
1 <! DOCTYPE html >
2 < html lang = " en " >
3 < head >
4 < meta charset = " UTF -8 " >
5 < title > Document Title </ title >
6 </ head >
7 < body >
8 < h1 > My Heading </ h1 >
9 <p > My paragraph . </ p >
10 </ body >
11 </ html >
Basic HTML Structure

10. What does <!DOCTYPE html> do?


The <!DOCTYPE html> declaration is an instruction that tells the browser the page
is written in HTML5. It ensures the browser renders the page in "standards mode,"
which helps with consistency and cross-browser compatibility.

11. List different document types (Doctypes).


While <!DOCTYPE html> is the standard for HTML5, older versions used more com-
plex Doctypes, such as those for HTML 4.01 Strict/Transitional and XHTML 1.0
Strict. For modern development, only the HTML5 doctype is necessary.

4
by Adhishthatri Singh

12. What is the lang attribute in the <html> tag?


The lang attribute (e.g., <html lang="en">) specifies the primary language of the
document’s content. This is important for accessibility (helping screen readers) and
SEO (helping search engines).

13. What is the relationship between HTML and CSS?


They have separate responsibilities: HTML defines the structure and content (the
skeleton), while CSS defines the visual presentation and layout (the appearance).
Keeping them separate makes code easier to maintain.

14. What is the difference between HTML, XML, and XHTML?


• HTML: For displaying data, with lenient syntax.
• XML: For storing and transporting data, with strict syntax and custom tags.
• XHTML: An XML-based, stricter version of HTML.

15. How is the source code of an HTML file viewed?


In most browsers, you can right-click on the page and select "View Page Source" or
use the keyboard shortcut Ctrl+U (on Windows/Linux) or Cmd+Option+U (on Mac).

16. What is W3C?


W3C stands for the World Wide Web Consortium. It is the main international
standards organization for the web, responsible for developing protocols and guidelines
like the HTML and CSS specifications.

5
by Adhishthatri Singh

2 Semantic & Structural Elements

17. What is semantic HTML? Why use it?


Semantic HTML is the practice of using HTML tags that convey the meaning and
structure of the content, rather than just its appearance. For example, using <h1> for
a main heading or <nav> for navigation links.
Why use it?

• Accessibility: Screen readers use semantic tags to understand the page structure
and help visually impaired users navigate.
• SEO: Search engines can better understand the context and importance of different
parts of your content, which can improve search rankings.
• Maintainability: It makes the code easier for developers to read and understand.

18. Name five semantic elements.


Five common semantic elements introduced in HTML5 are:

• <article>
• <section>
• <nav>
• <header>
• <footer>
• <aside>
• <main>

19. What is the <main> element for?


The <main> element is used to enclose the dominant or central content of a document.
The content inside <main> should be unique to that specific page and should not
include content that is repeated across pages, such as sidebars, navigation links, or
footers. There should only be one <main> element per page.

20. Purpose of <section>, <article>


• <article>: Represents a complete, self-contained piece of content that could be
distributed and reused independently. Examples include a blog post, a news story,
or a forum post.
• <section>: Represents a thematic grouping of content, typically with its own
heading. It is used to break up a page into logical parts when no more specific
semantic element is suitable.
An <article> can contain <section>s, and a <section> can contain <article>s.
The key difference is that an <article> should make sense on its own.

6
by Adhishthatri Singh

21. What does <header> do?


The <header> element represents introductory content or a set of navigational links
for its nearest ancestor sectioning content (like <body>, <article>, or <section>).
A page can have multiple <header> elements. It typically contains headings, logos,
author information, or search forms.

22. What is <footer> for?


The <footer> element defines a footer for a document or a section. It typically
contains information about the author, copyright data, links to related documents,
or contact information. Like <header>, a document can have multiple <footer>
elements.

23. What is <nav>?


The <nav> element is used to define a set of major navigation links. It is intended
for the primary navigation blocks of a site, such as the main menu, links to different
sections of the page, or breadcrumbs. Not all links on a page should be inside a <nav>
element.

24. What does <aside> represent?


The <aside> element represents a portion of a document whose content is only tan-
gentially related to the main content. It is often presented as a sidebar or a call-out
box. Examples include pull quotes, glossaries, or advertising.

25. When to use <div> vs semantic tags?


You should always try to use a semantic tag first. If your content fits the description
of an <article>, <nav>, <section>, or other semantic element, use that.
Use a <div> only as a last resort when no other semantic element is appropriate. A <div>
has no semantic meaning and should be used purely for styling or grouping content with
CSS or JavaScript.

26. What is <figure> and <figcaption>?


• <figure>: Is used to encapsulate self-contained content that is referenced from
the main document, such as an image, diagram, code snippet, or chart. Moving
the <figure> to another part of the page should not affect the main flow.
• <figcaption>: Is used to provide a caption or legend for the content within its
parent <figure> element. It is semantically linked to the figure.
1 < figure >
2 < img src = " image . jpg " alt = " Description of image . " >

7
by Adhishthatri Singh

3 < figcaption > Fig .1 - A caption for the image . </ figcaption >
4 </ figure >
Figure and Figcaption Example

8
by Adhishthatri Singh

3 Text, Formatting & Headings

27. List all HTML headings.


HTML provides six levels of heading tags, from <h1> to <h6>.
• <h1> - The most important heading
• <h2> - Subheading
• <h3>
• <h4>
• <h5>
• <h6> - The least important heading

28. Which heading tag has the highest importance?


The <h1> tag represents the highest level of importance. It should be used for the
main heading of a page, and ideally, there should only be one <h1> per page for good
SEO and accessibility.

29. Difference between <b>, <strong>, <i>, <em>.


The difference is semantic meaning versus visual presentation:
• <b> vs. <strong>:
– <b>: The "bring attention to" element. It bolds text for visual effect without
implying extra importance (e.g., keywords in a paragraph).
– <strong>: Indicates that the text has strong importance, seriousness, or ur-
gency. Screen readers may use a different tone of voice for it.
• <i> vs. <em>:
– <i>: The "idiomatic text" element. It italicizes text for visual effect, often used
for thoughts, technical terms, or foreign words.
– <em>: Indicates stress or emphasis on a word or phrase. Screen readers may
pronounce it with emphasis.
Rule of thumb: Use <strong> and <em> when the meaning is important; use <b>
and <i> when the styling is purely presentational.

30. What are generic inline formatting tags?


These are tags that apply formatting to a small, inline piece of text without creating
a new block. They are often used for presentational purposes. Examples include:
• <b> (Bold)
• <i> (Italic)
• <u> (Underline)
• <s> (Strikethrough)
• <small> (Smaller text)

9
by Adhishthatri Singh

31. What is the <mark> tag?


The <mark> tag is used to highlight a piece of text that has relevance in a specific
context. It functions like a digital highlighter pen. A common use case is to high-
light search terms in a list of results. By default, browsers render it with a yellow
background.

32. What is <code>?


The <code> tag is an inline element used to identify a short fragment of computer
code. Browsers typically render the content of a <code> tag in their default monospace
font.

33. What does <pre> do?


The <pre> (preformatted text) tag is a block-level element that displays text exactly
as it is written in the HTML source code. It preserves all spaces, tabs, and line breaks.
It is commonly used to display blocks of code or ASCII art.
1 < pre >
2 < code >
3 function greet () {
4 console . log ( " Hello , world ! " ) ;
5 }
6 </ code >
7 </ pre >
<pre> and <code> example

34. What is <blockquote>? <q>? <cite>?


These tags are used for citing and quoting content:
• <blockquote>: For long, multi-line quotations that are visually set apart from the
surrounding text (usually as an indented block).
• <q>: For short, inline quotations that do not require a paragraph break. Browsers
automatically add quotation marks around the content.
• <cite>: Used to define the title of a creative work (e.g., a book, song, movie, or
article). It is often nested within a <blockquote> to cite the source.

35. How to highlight text?


There are two main ways to highlight text:
1. Semantically with HTML: Use the <mark> tag. This is the best approach when
the highlight has contextual relevance.
2. Stylistically with CSS: For purely decorative highlighting, wrap the text in a
<span> and apply a background-color in your CSS file.

10
by Adhishthatri Singh

1 <! -- Semantic Method -- >


2 <p > Here are the < mark > search results </ mark >. </ p >
3

4 <! -- CSS Method -- >


5 < style > . highlight { background - color : yellow ; } </ style >
6 <p > This is < span class = " highlight " > important </ span > text . </ p >
Highlighting Methods

36. What does <sup> and <sub> do?


• <sup>: The superscript tag. It renders text smaller and raises it above the normal
line of text. Used for things like exponents (e.g., E = mc2 ) or ordinal numbers
(e.g., 1st ).
• <sub>: The subscript tag. It renders text smaller and lowers it below the normal
line of text. Used for things like chemical formulas (e.g., H2 O).

37. What is a horizontal rule?


A horizontal rule represents a thematic break between paragraph-level elements in an
HTML page. It is created using the self-closing <hr> tag and is typically rendered as
a horizontal line.

38. How do you create a line break?


A line break is created using the self-closing <br> tag. It forces the subsequent text
or element to start on a new line. It should be used for content where the division of
lines is significant, such as in poems or addresses.

39. How to add comments?


HTML comments are added using the <!– ... –> syntax. Anything placed between
these markers will be ignored by the browser and will not be displayed on the page.
Comments are useful for documenting your code.
1 <! -- This is a comment . It will not be displayed . -- >
2 <p > This is a visible paragraph . </ p >
HTML Comment Example

11
by Adhishthatri Singh

4 Links & Navigation

40. How do you create a hyperlink?


You create a hyperlink using the <a> (anchor) tag. The destination of the link is
specified in the href (hypertext reference) attribute.
1 <a href = " https :// www . google . com " > Visit Google </ a >
Hyperlink Example

41. Difference between href and src.


• href (Hypertext Reference): Specifies the destination URL for a hyperlink.
When a user clicks it, the browser navigates to that resource. It’s used by tags like
<a> and <link>.
• src (Source): Specifies the location of an external resource that should be em-
bedded as part of the current document. The browser fetches and displays this
resource. It’s used by tags like <img>, <script>, and <iframe>.

42. How do you open a link in a new tab?


To open a link in a new browser tab or window, you add the target="_blank"
attribute to the <a> tag. For security, it’s highly recommended to also include
rel="noopener noreferrer".
1 <a href = " https :// example . com " target = " _blank " rel = " noopener
noreferrer " >
2 Opens in a new tab
3 </ a >
Link in New Tab Example

43. What are anchor links?


Anchor links (or "page jumps") are hyperlinks that navigate to a specific section of
the same page. This is achieved by:
1. Giving the destination element a unique id attribute.
2. Setting the link’s href attribute to a hash symbol (#) followed by that unique id.
1 <! -- The link -- >
2 <a href = " # section2 " > Go to Section 2 </ a >
3

4 <! -- ... some content ... -- >


5

6 <! -- The destination element -- >


7 < h2 id = " section2 " > This is Section 2 </ h2 >

12
by Adhishthatri Singh

Anchor Link Example

44. How do you create navigation menus?


Navigation menus are typically created using an unordered list (<ul>) of list items
(<li>), where each item holds a hyperlink (<a>). This structure is semantic and
accessible. CSS is then used to style the list to look like a menu (e.g., horizontally,
without bullets).

45. What is the <nav> tag? Example?


The <nav> tag is a semantic HTML5 element used to define a block of major navigation
links. Wrapping the main site navigation in a <nav> tag helps screen readers and
search engines understand the page’s structure.
1 < nav >
2 < ul >
3 < li > <a href = " / home " > Home </ a > </ li >
4 < li > <a href = " / about " > About </ a > </ li >
5 < li > <a href = " / contact " > Contact </ a > </ li >
6 </ ul >
7 </ nav >
<nav> Tag Example

13
by Adhishthatri Singh

5 Lists

46. What types of lists are available in HTML?


HTML provides three types of lists:
• Unordered List (<ul>): A list of items where the order does not matter. It uses
bullet points.
• Ordered List (<ol>): A list of items where the order is important. It uses
numbers.
• Definition List (<dl>): A list of terms and their corresponding definitions.

47. What tags make an ordered list?


An ordered list is created with the <ol> tag. Each item within the list is created with
the <li> (list item) tag.
1 < ol >
2 < li > First item </ li >
3 < li > Second item </ li >
4 </ ol >
Ordered List Example

48. What tags make an unordered list?


An unordered list is created with the <ul> tag. Each item within the list is also
created with the <li> tag.
1 < ul >
2 < li > Apples </ li >
3 < li > Oranges </ li >
4 </ ul >
Unordered List Example

49. What makes a definition list? (<dl>, <dt>, <dd>)


A definition list is made up of three tags:
• <dl>: The definition list container.
• <dt>: The definition term.
• <dd>: The definition description for the term above it.
1 < dl >
2 < dt > HTML </ dt >
3 < dd > HyperText Markup Language </ dd >
4 < dt > CSS </ dt >
5 < dd > Cascading Style Sheets </ dd >

14
by Adhishthatri Singh

6 </ dl >
Definition List Example

50. How to nest lists?


To nest a list, you place a new list (<ul> or <ol>) inside an existing <li> element.
The nested list becomes a sub-item of its parent list item.
1 < ul >
2 < li > Fruit </ li >
3 < li >
4 Dairy
5 <! -- Nested List -- >
6 < ul >
7 < li > Milk </ li >
8 < li > Cheese </ li >
9 </ ul >
10 </ li >
11 </ ul >
Nested List Example

51. How to customize list item values?


For ordered lists (<ol>), you can use several attributes:
• type: Changes the marker style (e.g., type="A" for uppercase letters, type="i"
for lowercase Roman numerals).
• start: Specifies the starting number for the list (e.g., start="5").
• reversed: Reverses the numbering order.
• value on an <li>: Changes the number for a specific list item and all subsequent
items.
For unordered lists (<ul>), customization is done visually using the CSS list-style-type
property.

15
by Adhishthatri Singh

6 Images & Multimedia

52. How do you display an image?


You display an image using the self-closing <img> tag. The path to the image file is
specified in the src (source) attribute.
1 < img src = " path / to / your / image . jpg " alt = " Description of the
image " >
Image Example

53. What is the alt attribute?


The alt (alternative text) attribute provides a textual description of an image. It is
crucial for:
• Accessibility: Screen readers read the alt text aloud to visually impaired users.
• Broken Images: If the image fails to load, the alt text is displayed in its place.
• SEO: Search engines use alt text to understand the content of the image.

54. Which image formats are supported?


All modern browsers support several image formats, including:
• JPEG (JPG): Best for photographs with complex colors.
• PNG: Good for images with transparency or sharp lines (like logos).
• GIF: Supports simple animations.
• SVG: A vector format that is resolution-independent and ideal for logos and icons.
• WebP: A modern format that offers excellent compression and quality for both
still and animated images.

55. How to add width and height to images?


You can specify the dimensions of an image using the width and height attributes
directly on the <img> tag. It is a best practice to always include these attributes, as
they allow the browser to reserve space for the image before it loads, preventing con-
tent from shifting on the page (Cumulative Layout Shift). The values are interpreted
as pixels.
1 < img src = " photo . jpg " alt = " A photo " width = " 500 " height = " 300 " >
Image with Dimensions

56. How do you add a favicon?


A favicon (favorite icon) is added to the <head> section of your HTML document
using a <link> tag with the attribute rel="icon".

16
by Adhishthatri Singh

1 < head >


2 < link rel = " icon " type = " image / png " href = " / favicon . png " >
3 </ head >
Favicon Link Tag

57. How to make an image a hyperlink?


To make an image a hyperlink, you simply wrap the <img> tag inside an anchor <a>
tag.
1 <a href = " https :// www . google . com " >
2 < img src = " logo . png " alt = " Google ’ s logo " >
3 </ a >
Image as a Link

58. How do you embed audio?


You can embed audio using the <audio> tag. The controls attribute adds standard
playback controls (play, pause, volume).
1 < audio controls src = " sound . mp3 " >
2 Your browser does not support the audio element .
3 </ audio >
Embedding Audio

59. How to embed video?


You can embed video using the <video> tag. Like the audio tag, the controls
attribute adds playback controls. You can also set the width and height.
1 < video controls width = " 640 " height = " 360 " src = " movie . mp4 " >
2 Your browser does not support the video tag .
3 </ video >
Embedding Video

60. What is the <canvas> element used for?


The <canvas> element is used as a container to draw graphics, animations, or games
on the fly, usually with JavaScript. It provides a bitmap rendering surface with a rich
set of drawing functions.

17
by Adhishthatri Singh

61. What is the <svg> tag?


The <svg> (Scalable Vector Graphics) tag is a container for defining vector-based
graphics in an XML format. Unlike raster image formats (like JPEG or PNG), SVG
graphics can scale to any size without losing quality, making them perfect for logos
and icons.

62. How to add subtitles/captions to video?


You can add subtitles or captions to a video by using the <track> tag inside the
<video> element. The <track> tag points to a WebVTT file (.vtt) that contains
the timed text.
1 < video controls src = " example . mp4 " >
2 < track kind = " subtitles " src = " subtitles_en . vtt " srclang = " en "
label = " English " >
3 < track kind = " subtitles " src = " subtitles_es . vtt " srclang = " es "
label = " Spanish " >
4 </ video >
Video with Subtitles

63. What is <source>?


The <source> tag is used to specify multiple media resources for media elements like
<video> and <audio>. This is useful for providing the same media content in different
formats to ensure cross-browser compatibility. The browser will use the first format
it supports.
1 < video controls >
2 < source src = " movie . webm " type = " video / webm " >
3 < source src = " movie . mp4 " type = " video / mp4 " >
4 Sorry , your browser doesn ’ t support embedded videos .
5 </ video >
Using the <source> Tag

18
by Adhishthatri Singh

7 Tables

64. How do you create a table?


You create a table using the <table> element. Inside the table, you define rows with
<tr> (table row), and within each row, you define cells with <td> (table data).
1 < table >
2 < tr >
3 < td > Row 1 , Cell 1 </ td >
4 < td > Row 1 , Cell 2 </ td >
5 </ tr >
6 < tr >
7 < td > Row 2 , Cell 1 </ td >
8 < td > Row 2 , Cell 2 </ td >
9 </ tr >
10 </ table >
Basic Table Structure

65. What is the <caption> tag?


The <caption> tag is used to provide a title or caption for a table. It must be
inserted immediately after the opening <table> tag. A caption provides context and
is important for accessibility.

66. How are table headers defined?


Table headers are defined using the <th> (table header) tag instead of <td>. Text
within a <th> element is automatically rendered as bold and centered by browsers.
Using <th> is semantically important as it helps screen readers distinguish headers
from data cells.

67. What is <thead>, <tbody>, <tfoot>?


These tags are used to group the content of a table into logical sections:
• <thead>: Groups the header content of the table.
• <tbody>: Groups the main body content of the table.
• <tfoot>: Groups the footer content of the table.
Using these elements helps with styling and can allow a browser to scroll the table
body independently of the header and footer.

68. How to merge table cells?


You can merge table cells horizontally or vertically using the colspan and rowspan
attributes on a <td> or <th> element.

19
by Adhishthatri Singh

69. What is colspan and rowspan?


• colspan: Merges a cell with one or more cells to its right. The value specifies the
total number of columns the cell should span.
• rowspan: Merges a cell with one or more cells in the rows below it. The value
specifies the total number of rows the cell should span.
1 < table >
2 < tr >
3 < th colspan = " 2 " > Name </ th >
4 < th > Age </ th >
5 </ tr >
6 < tr >
7 < td > John </ td >
8 < td > Doe </ td >
9 < td rowspan = " 2 " > 30 </ td >
10 </ tr >
11 < tr >
12 < td > Jane </ td >
13 < td > Doe </ td >
14 </ tr >
15 </ table >
Colspan and Rowspan Example

70. How to group columns?


You can group columns to apply styling to them collectively using the <colgroup>
and <col> elements.

71. What is <colgroup> and <col>?


These tags are placed directly inside a <table> element, after the <caption>.
• <colgroup>: A container for one or more <col> elements.
• <col>: A self-closing tag used to specify properties for a single column or a group
of columns (using the span attribute).
This is useful for applying consistent styling, like a background color, to entire columns
with CSS.

72. How to style tables?


While HTML has attributes like border, cellpadding, and cellspacing, they are
deprecated. The modern and recommended way to style tables is with CSS. You
can control borders, colors, spacing, and layout using CSS properties like border,
padding, and border-collapse.

20
by Adhishthatri Singh

8 Forms & Inputs

73. How do you create a form?


You create a form using the <form> element, which acts as a container for all the
input fields, labels, and buttons.
1 < form action = " / submit - page " method = " post " >
2 <! -- Input elements go here -- >
3 </ form >
Basic Form Structure

74. What is the purpose of the action attribute?


The action attribute specifies the URL of the server-side script or endpoint where
the form data will be sent for processing when the form is submitted.

75. Explain different form methods: GET vs POST.


• GET: Appends the form data to the URL as a query string (e.g., /path?name=johnage=30).
It should be used for non-sensitive data, like search queries. GET requests can be
bookmarked and are limited in length.
• POST: Sends the form data in the body of the HTTP request. It is more secure
for sensitive information (like passwords) because the data is not visible in the
URL. It has no size limitations.

76. What is the enctype attribute?


The enctype attribute specifies how the form data should be encoded before being
sent to the server. It is primarily used when a form includes a file upload (<input
type="file">). The default value is application/x-www-form-urlencoded. For
file uploads, it must be set to multipart/form-data.

77. Name five common input types.


Five common input types for the <input> tag are:
• type="text" (for single-line text)
• type="password" (masks the input)
• type="email" (validates for an email format)
• type="submit" (a button to submit the form)
• type="checkbox" (for selecting zero or more options)
• type="radio" (for selecting one option from a set)

21
by Adhishthatri Singh

78. How do you set a placeholder?


You set a placeholder using the placeholder attribute on an <input> or <textarea>
element. The placeholder text provides a short hint describing the expected value and
disappears when the user starts typing.

79. How to make a field required?


You make a field required by adding the boolean required attribute to the input
element. The browser will prevent form submission if the field is left empty.

80. How to set a default value?


You can pre-populate an input field with a default value using the value attribute.
For a <textarea>, you place the default text between the opening and closing tags.

81. How to add a label to a field?


You add a label using the <label> element. A label describes the purpose of an input
field and is critical for accessibility.

82. What is the relationship between <label> and for?


The for attribute of a <label> is used to explicitly associate it with a form control.
The value of the for attribute must be the same as the id of the input element.
This link allows users to click on the label to focus on the corresponding input field,
improving usability and accessibility.
1 < label for = " username " > Username : </ label >
2 < input type = " text " id = " username " name = " username " >
Label and For Attribute

83. What is a textbox, radio button, checkbox?


• Textbox: A single-line text input field, created with <input type="text">.
• Radio Button: Allows a user to select only one option from a limited set of
choices. Created with <input type="radio">. Radio buttons with the same name
attribute belong to the same group.
• Checkbox: Allows a user to select zero or more options from a set. Created with
<input type="checkbox">.

84. How to group related fields?


You can group related form fields together using the <fieldset> element.

22
by Adhishthatri Singh

85. What is <fieldset> and <legend>?


• <fieldset>: A block-level element that draws a box around a group of related
form controls.
• <legend>: Provides a caption or title for its parent <fieldset>. It makes the
form more organized and easier to understand.

86. How do you validate inputs?


HTML5 provides built-in client-side form validation using attributes on input ele-
ments, such as:
• required: Ensures the field is not empty.
• type: (e.g., email, number, url) checks for a specific format.
• min and max: For numeric and date inputs.
• minlength and maxlength: For text inputs.
• pattern: For matching against a regular expression.

87. What is the pattern attribute for?


The pattern attribute allows you to specify a regular expression that the input’s
value must match for the form to be valid. It provides a powerful way to enforce
custom input formats (e.g., for phone numbers or postal codes).

88. What is the autocomplete attribute?


The autocomplete attribute gives the browser hints on how to automatically complete
form fields based on user history. It can be set to "on" or "off", or to more specific
values like "email" or "name" to improve the user experience.

89. What is the difference between readonly and disabled?


• readonly: The user cannot modify the input’s value, but the value is still sub-
mitted with the form. The user can focus on the element.
• disabled: The user cannot interact with the input at all (it’s greyed out and
unfocusable), and its value is not submitted with the form.

90. How to make a dropdown list?


You create a dropdown list using the <select> element, with each choice defined by
an <option> element nested inside it.

91. What is <select>, <option>, <optgroup>?


• <select>: The container for the dropdown list.

23
by Adhishthatri Singh

• <option>: Represents a single item in the list.


• <optgroup>: Used to group related <option> elements together, creating subhead-
ings within the dropdown list.

92. How do you make a multi-select dropdown?


You add the boolean multiple attribute to the <select> tag. This allows the user
to select more than one option, usually by holding down Ctrl (or Cmd on Mac) and
clicking.

93. What is <datalist>?


The <datalist> element provides an "autocomplete" feature for an <input> field. It
contains a list of predefined <option>s that the browser will suggest to the user as
they type, without restricting them from entering a different value.

94. How do you upload files in HTML?


File uploads require two things:
1. An <input> element with type="file".
2. The parent <form> must have enctype="multipart/form-data" and method="post".

95. What is <output>?


The <output> tag is a semantic element used to display the result of a calculation or user
action, typically performed by a script.

96. What is <textarea>? How do you set its size?


The <textarea> element creates a multi-line plain-text editing control. You can set
its visible size using the rows and cols attributes, which define the number of visible
text lines and the visible width, respectively.

97. How to set max/min values for input?


For input types that accept a range, such as number, range, date, and others, you
can use the min and max attributes to define the minimum and maximum acceptable
values.

98. What is <progress> and <meter>?


• <progress>: Represents the completion progress of a task. It is typically used
for things like file downloads or loading bars.

24
by Adhishthatri Singh

• <meter>: Represents a scalar measurement within a known range, or a fractional


value. It is used for things like disk usage, search result relevance, or a password
strength indicator.

99. How do you reset a form?


You can add a reset button to a form using either <input type="reset"> or <button
type="reset">. When clicked, it will revert all form controls within the parent
<form> to their initial values.

25
by Adhishthatri Singh

9 Attributes, Classes, IDs

100. What are attributes? Examples?


Attributes provide additional information about an HTML element and are always
specified in the start tag. They usually come in name/value pairs like name="value".
Examples include:
• href on an <a> tag to specify the link’s destination.
• src on an <img> tag to specify the image source.
• alt on an <img> tag for alternative text.
• style on any element to apply inline CSS.

101. List five global attributes.


Global attributes are attributes that can be used on any HTML element. Five of the
most common are:
• id: Specifies a unique identifier for an element.
• class: Specifies one or more class names for an element.
• style: Used to apply inline CSS styles.
• title: Provides extra information about an element, often shown as a tooltip.
• lang: Specifies the language of the element’s content.

102. What is the difference between class and id?


• id: Must be unique within the entire HTML document. An element can only
have one ID. It is used to target a single, specific element for styling or scripting.
• class: Can be used on multiple elements. An element can have multiple classes
(separated by spaces). It is used to group elements that share common styling or
behavior.

103. What are custom data-* attributes?


Custom data-* attributes are used to store private, custom data for a page or applica-
tion, which can then be easily accessed by JavaScript. The attribute name must start
with data-. This is a way to embed data in the HTML without using non-standard
attributes.
1 < div id = " user " data - user - id = " 12345 " data - role = " admin " > John
Doe </ div >
Data Attribute Example

104. Why use IDs?


IDs are used for specific targeting:

26
by Adhishthatri Singh

1. JavaScript Hooks: Using [Link]() is a very fast and direct


way to select a unique element.
2. Anchor Links: To create fragment identifiers that allow users to jump to a specific
part of a page (e.g., <a href="#section1">).
3. High-Specificity CSS: To apply styles that should only ever affect one specific
element on the page.

105. How can multiple classes be used?


An element can be assigned multiple classes by listing them in the class attribute,
separated by spaces. This allows you to combine different CSS rule sets on a single
element.
1 < button class = " btn btn - primary btn - large " > Submit </ button >
Multiple Classes Example

27
by Adhishthatri Singh

10 Scripting & Styles

106. How do you add CSS to HTML?


There are three ways to add CSS to an HTML document:
1. External CSS: Using a <link> tag in the <head> to link to an external .css file.
This is the best practice for most websites.
2. Internal CSS: Using a <style> tag within the <head> to write CSS rules directly
in the HTML file.
3. Inline CSS: Using the style attribute directly on an HTML element. This is
generally discouraged as it mixes content with presentation.

107. How to use an external CSS file?


You use the <link> element inside the <head> section of your HTML. You must
specify the relationship with rel="stylesheet" and the path to the file with href.
1 < head >
2 < link rel = " stylesheet " href = " styles / main . css " >
3 </ head >
Linking an External Stylesheet

108. What is the <style> tag?


The <style> tag is used to embed internal CSS style information within an HTML
document. It is placed inside the <head> section and contains CSS rules that apply
only to the current page.

109. How do you add JavaScript?


You can add JavaScript using the <script> tag in two main ways:
• External JavaScript: By providing a src attribute with the path to a .js file.
This is the recommended approach.
• Internal JavaScript: By writing the JavaScript code directly between the open-
ing <script> and closing </script> tags.

110. What’s the difference between <script>, <script async>,


<script defer>?
They control how an external script is loaded and executed:
• <script>: Pauses HTML parsing, fetches the script, executes it, and then resumes
parsing. This is "render-blocking."

28
by Adhishthatri Singh

• <script async>: Fetches the script in parallel with HTML parsing. As soon as
the script is downloaded, parsing is paused and the script is executed. Scripts may
execute out of order.
• <script defer>: Fetches the script in parallel with HTML parsing, but waits to
execute it until after the HTML document has been fully parsed. Scripts execute
in the order they appear. This is often the best choice.

111. How do you include external JS?


You use the <script> tag with the src attribute pointing to the location of your
JavaScript file.
1 < script src = " scripts / app . js " > </ script >
Including an External Script

112. Where should scripts be placed?


The traditional best practice is to place <script> tags just before the closing </body>
tag. This ensures that the browser can parse and render all the HTML content before
it has to pause to download and execute JavaScript, improving the perceived loading
speed. However, using the defer attribute allows you to safely place scripts in the
<head> without blocking rendering.

113. What does <noscript> do?


The <noscript> tag provides fallback content for browsers that do not support
JavaScript or have it disabled. The content inside the <noscript> tag will only
be rendered in such cases.

114. What is the <base> tag?


The <base> tag, placed in the <head>, specifies a base URL and/or a default target
for all relative links on a page. For example, if you set <base href="/articles/">,
a link like <a href="[Link]"> will point to /articles/[Link].

115. What is a favicon and how is it embedded?


A favicon ("favorite icon") is a small icon that appears in the browser tab, bookmarks,
and other places in the browser UI. It is embedded in the <head> section of the HTML
using a <link> tag with rel="icon".
1 < head >
2 < link rel = " icon " type = " image / png " href = " / favicon -32 x32 . png " >
3 </ head >
Embedding a Favicon

29
by Adhishthatri Singh

11 HTML5 & APIs

116. What’s new in HTML5?


HTML5 introduced a wide range of new features designed for modern web applica-
tions, including:
• New Semantic Elements: Tags like <header>, <nav>, and <article> that
provide better document structure.
• New Form Controls: More input types like email, date, range, and color.
• Multimedia Elements: The <video> and <audio> tags for embedding media
without plugins.
• Graphics Elements: <canvas> for 2D drawing and <svg> for vector graphics.
• APIs: New JavaScript APIs for features like drag-and-drop, local storage, and
geolocation.

117. List 7 new HTML5 elements.


Seven of the most prominent elements introduced in HTML5 are:
• <section>
• <article>
• <header>
• <footer>
• <nav>
• <main>
• <figure> and <figcaption>

118. What is the <template> element?


The <template> element holds HTML content that is not rendered by the browser
when the page loads. Its content can be cloned and inserted into the document later
using JavaScript. It’s a useful way to declare reusable fragments of markup.

119. What is <details> and <summary>?


These tags create a native disclosure widget, often called an "accordion" or "twisty."
• <details>: The container for the widget. The content inside is hidden by default.
• <summary>: The visible heading for the widget. Clicking it toggles the visibility of
the rest of the content inside <details>.

120. What is the draggable attribute?


draggable is a global attribute that can be set to true, false, or auto. When set to
true, it indicates that the element can be dragged by the user, as part of the HTML
Drag and Drop API.

30
by Adhishthatri Singh

121. What is contenteditable?


contenteditable is a global attribute that, when set to true, makes the content of
the element editable by the user directly in the browser. It can be applied to almost
any element.

122. How to make content editable?


You simply add the contenteditable="true" attribute to the HTML element you
want the user to be able to edit.
1 <p contenteditable = " true " > You can edit this paragraph . </ p >
Editable Content Example

123. What is the spellcheck attribute?


The spellcheck attribute is a global attribute that indicates whether the browser
should check the spelling and grammar of the content within an element. It can be set
to true or false and is typically used on editable elements like inputs and textareas.

124. What is the hidden attribute?


The hidden attribute is a boolean global attribute used to indicate that an element
is not yet, or is no longer, relevant. A browser will not render elements that have the
hidden attribute set. It is semantically similar to using display: none; in CSS.

125. Explain the use of tabindex.


The tabindex global attribute controls whether an element can be focused and how
it participates in keyboard navigation (using the Tab key).
• tabindex="-1": The element is not reachable via tabbing, but can be focused with
JavaScript.
• tabindex="0": The element is focusable and reachable via tabbing in its natural
DOM order.
• tabindex="1" (or higher): The element is focusable and has a defined tabbing
order. Using positive values is strongly discouraged as it creates a confusing user
experience.

126. What is ARIA?


ARIA stands for Accessible Rich Internet Applications. It is a set of attributes
that can be added to HTML elements to improve their accessibility, especially for
complex UI widgets and dynamic content that JavaScript creates. ARIA helps as-
sistive technologies like screen readers understand the role (role="button"), state
(aria-pressed="true"), and properties of elements.

31
by Adhishthatri Singh

127. What does <wbr> do?


The <wbr> (Word Break Opportunity) tag specifies a position within text where the
browser may optionally break a line if needed, without adding a hyphen. It is useful
for preventing overflow with long, unbroken strings like URLs.

128. What is <bdi>?


The <bdi> (Bi-Directional Isolation) element isolates a span of text that might be
formatted in a different text direction (e.g., right-to-left) from the surrounding text.
This is useful when embedding user-generated content that may have mixed languages.

129. What is <abbr> for?


The <abbr> tag is used to define an abbreviation or an acronym. The optional title
attribute can be used to provide the full expansion of the term, which is often displayed
as a tooltip on hover.

130. What does <time> represent?


The <time> tag semantically represents a specific time or date. The human-readable
version is placed between the tags, while the machine-readable format can be provided
in the datetime attribute.
1 <p > The event starts at < time datetime = " 2025 -12 -25 19:00 " >7 PM on
Christmas </ time >. </ p >
<time> Tag Example

131. What is <address>?


The <address> tag defines contact information (author, owner, organization) for a
document or an article. It is typically rendered in italics by browsers.

132. What is <pre> and <code>?


These tags are used for displaying code:
• <code>: An inline element for marking up a short fragment of computer code.
• <pre>: A block-level element for displaying a larger block of preformatted text,
preserving all whitespace (spaces, tabs, line breaks). It is common to nest a <code>
tag inside a <pre> for semantic correctness.

32
by Adhishthatri Singh

12 Accessibility & SEO

133. What is accessibility in HTML?


Accessibility (often abbreviated as a11y) is the practice of designing and developing
websites so that people with disabilities can use them. In HTML, this means using
elements semantically, providing text alternatives for non-text content (like alt text
for images), ensuring logical document structure, and enabling keyboard navigation.

134. Why is semantic HTML good for SEO?


Search Engine Optimization (SEO) relies on crawlers understanding the content and
structure of a page. Semantic HTML provides clear signals about the document’s
outline and the importance of different pieces of content. For example, using <h1>
for the main title and <nav> for navigation helps search engines index the page more
effectively, which can lead to better rankings.

135. How can HTML help screen readers?


Screen readers are assistive technologies that read web content aloud. HTML helps
them by:
• Providing a logical structure through headings (<h1>-<h6>) and landmark elements
(<main>, <nav>).
• Describing images via the alt attribute.
• Explicitly linking labels to form fields using the for attribute.
• Defining data tables correctly with <th> and <caption>.

136. What are ARIA roles?


ARIA roles are attributes (role="...") that define the purpose or type of an ele-
ment when its native HTML semantics are insufficient. For example, you can add
role="navigation" to a <div> that acts as a menu, or role="alert" to a <div>
that displays an important message. They bridge the gap for assistive technologies,
especially in complex web applications.

137. How does alt affect SEO?


Search engine crawlers cannot "see" or interpret images. The alt text provides a
machine-readable description of the image’s content. This helps search engines to:
1. Index the image and show it in image search results for relevant queries.
2. Understand the context of the surrounding content on the page, contributing to
the page’s overall topical relevance.

33
by Adhishthatri Singh

13 Deprecated & Compatibility

138. Name five deprecated tags.


Five tags that were common in older HTML versions but are now deprecated and
should not be used are:
• <font>: Used for setting font size, color, and face. This is now done with CSS.
• <center>: Used to center content horizontally. Now done with CSS.
• <frame> and <frameset>: Used to create framesets. <iframe> is the modern
alternative.
• <strike>: Used for strikethrough text. <s> or <del> are the semantic alternatives.
• <big>: Used to make text one size larger. Now done with CSS.

139. Why shouldn’t deprecated tags be used?


You shouldn’t use deprecated tags because:
• Browser Support: They may not be supported by modern browsers, leading to
unpredictable rendering.
• Maintainability: They mix content (HTML) with presentation (styling), which
is a bad practice. CSS should handle all styling.
• Accessibility: Modern semantic tags provide better information for assistive tech-
nologies.
• Future-Proofing: Adhering to current standards ensures your site will work bet-
ter with future web technologies.

140. What is XHTML? Differences?


XHTML stands for eXtensible HyperText Markup Language. It is essentially
a stricter, XML-based version of HTML.
Key differences from HTML include:
• Well-Formedness: XHTML documents must be well-formed XML, meaning all
elements must be properly nested and closed.
• Closing Tags: All elements, including empty ones, must be closed (e.g., <br />
instead of <br>).
• Case Sensitivity: Element and attribute names must be in lowercase.
• Attribute Quoting: All attribute values must be enclosed in quotes.

141. How is backward compatibility maintained?


Browsers maintain backward compatibility by having very lenient HTML parsers.
They are designed to make a "best guess" at rendering malformed or outdated code
rather than showing an error. This principle, often called "paving the cowpaths,"
ensures that old websites built before modern standards were established can still be
viewed today.

34
by Adhishthatri Singh

142. How do you handle unsupported HTML5 features?


You can handle unsupported features using a combination of techniques:
• Feature Detection: Use JavaScript to check if a specific feature exists in the
browser (e.g., checking if [Link] is defined) before trying to use
it.
• Polyfills: A polyfill is a piece of JavaScript code that provides the functionality
you expect the browser to support natively. For example, a polyfill could replicate
the behavior of the <details> element in an old browser that doesn’t support it.
• Graceful Degradation: Provide a basic, but still functional, experience for older
browsers while offering an enhanced experience for modern ones.

35
by Adhishthatri Singh

14 Advanced / Miscellaneous

143. What is the DOM?


The DOM stands for Document Object Model. It is a programming interface for
web documents. When a browser loads an HTML page, it creates a tree-like model of
the page’s content. The DOM represents this structure, and JavaScript can interact
with it to read or manipulate the document’s content, structure, and style.

144. How is the DOM structured?


The DOM is structured as a tree of objects, often called "nodes." The top-level node
is the document object. The <html> element is the root element node. Each element,
attribute, and piece of text in the HTML becomes a node in this tree, with parent-
child-sibling relationships reflecting the original markup.

145. How do browsers parse HTML?


Browsers parse HTML token by token. The process generally involves:
1. Reading the raw bytes of the HTML file and converting them to characters.
2. Tokenizing: The characters are parsed into distinct tokens (e.g., start tag, end
tag, attribute name, text).
3. Building the DOM Tree: The tokens are used to construct the nodes of the
DOM tree.
4. When the parser encounters external resources like CSS or JavaScript, it may pause
parsing to fetch and process them before continuing.

146. What is an iframe?


An <iframe> (Inline Frame) is an HTML element used to embed another HTML
document within the current one. It is effectively a window into another webpage,
commonly used for embedding maps, videos, or third-party widgets.

147. How do you nest pages in HTML?


The standard and modern way to nest one HTML page inside another is by using an
<iframe>.
1 < iframe src = " https :// www . example . com " width = " 600 "
height = " 400 " > </ iframe >
Iframe Example

36
by Adhishthatri Singh

148. What does the <object> tag do?


The <object> tag is a general-purpose tag for embedding external resources, which
can include images, videos, PDFs, or even other HTML documents. It was historically
used for browser plugins like Flash or Java applets. While still supported, <iframe>,
<video>, and <img> are now preferred for specific content types.

149. How do you embed external widgets?


Most external widgets (like social media feeds or comment sections) are embedded by
copying and pasting a code snippet they provide. This snippet is usually either an
<iframe> or a <script> tag that dynamically creates an <iframe>.

150. What is the <param> tag?


The <param> (parameter) tag is used to define parameters for an <object> element.
It was primarily used to pass configuration settings to browser plugins.

151. How to set iframe sandboxing?


You can restrict the capabilities of the content within an <iframe> for security pur-
poses using the sandbox attribute. By default, an empty sandbox attribute blocks
all potentially dangerous permissions (like running scripts or submitting forms). You
can then selectively re-enable specific permissions.
1 <! -- This iframe can run scripts but cannot submit forms -- >
2 < iframe src = " widget . html " sandbox = " allow - scripts " > </ iframe >
Sandboxed Iframe Example

152. What is CORS and how does it relate to HTML?


CORS stands for Cross-Origin Resource Sharing. It is a security mechanism that
controls how resources on a web page can be requested from another domain. While
CORS is a server-side configuration, it directly impacts HTML. For example, if you
try to fetch data from an API on a different domain using JavaScript (initiated from
your HTML page), the request will fail unless the server’s CORS policy explicitly
allows it.

153. What is lazy loading?


Lazy loading is an optimization technique where resources, particularly images, are
not loaded until they are needed (e.g., when the user scrolls them into the viewport).
In HTML, you can enable native lazy loading for images and iframes by adding the
attribute loading="lazy".

37
by Adhishthatri Singh

154. How does prefetching work?


Prefetching is a performance technique where the browser is instructed to download
resources in the background that the user is likely to need in the near future. This can
be done using the <link> tag with different rel values, such as rel="prefetch" for
resources on the next page.

155. How do you optimize page load time?


HTML plays a role in several page load optimizations:
• Minimize HTML: Reduce the size of the HTML file by removing unnecessary
whitespace and comments.
• Image Optimization: Use responsive images (srcset) and lazy loading (loading="lazy").
• Script Placement: Place scripts before the closing </body> or use defer to avoid
render-blocking.
• Resource Hints: Use <link rel="preconnect"> or <link rel="preload"> to
load critical resources sooner.

156. How to make mobile-friendly HTML?


This is achieved through responsive web design. The key HTML component is the
viewport meta tag, which tells the browser how to control the page’s dimensions and
scaling on different devices. The rest is handled by using a fluid layout (with CSS)
that adapts to different screen sizes.

157. What is the <meta viewport> tag for?


The viewport meta tag gives the browser instructions on how to control the page’s di-
mensions and scaling. The most common value, <meta name="viewport" content="width=device-
initial-scale=1.0">, tells the browser to set the width of the page to the device’s
screen width and establish a 1:1 scale, which is essential for responsive design.

158. How are images optimized for responsiveness?


HTML provides the <picture> element and the srcset and sizes attributes for the
<img> tag. These allow you to provide multiple image sources at different resolutions
or formats. The browser can then choose the most appropriate image to load based
on the user’s screen size, resolution, and viewport, saving bandwidth and improving
performance on smaller devices.

159. How do you implement tabs in pure HTML?


You can’t create a functional tab system with pure HTML. While you can structure
the content semantically, the show/hide functionality requires CSS (using the check-

38
by Adhishthatri Singh

box hack or :target selector) or, more commonly, JavaScript to handle the click
events and toggle content visibility.

160. How do you implement a basic modal?


Similar to tabs, a truly functional modal (a dialog box that appears over the page
content) requires JavaScript to control its visibility and user interaction. However,
HTML5 introduced the <dialog> element, which provides a native modal with basic
functionality that can be controlled with methods like showModal().

161. How do you create a tooltip?


The simplest way to create a tooltip in pure HTML is by using the global title
attribute. The browser will automatically display the attribute’s content as a tooltip
when the user hovers over the element. For more advanced or customizable tooltips,
CSS and JavaScript are required.

162. How do you collapse sections of content?


The native HTML5 way to create a collapsible section is with the <details> and
<summary> elements. This creates a simple, accessible accordion-style widget without
needing any CSS or JavaScript.

39
by Adhishthatri Singh

15 Practical/Code-Oriented

163. How do you comment in HTML?


You create a comment by wrapping your text in <!– and –>. The browser will ignore
anything inside these markers.
1 <! -- This is an HTML comment -- >
2 <p > This is a paragraph . </ p > <! -- Comments can be inline too -- >
HTML Comment

164. How do you embed a YouTube video?


YouTube provides a ready-made embed code snippet for each video. You simply go
to the video, click "Share," then "Embed," and copy the provided <iframe> code into
your HTML.

165. What are self-closing tags?


Self-closing tags (also known as void or empty elements) are HTML tags that do
not have a separate closing tag because they cannot contain any content. Examples
include <img>, <br>, <hr>, and <input>.

166. Difference between block and inline elements.


• Block-level Elements: Always start on a new line and take up the full width
available (e.g., <div>, <p>, <h1>). They can contain other block and inline ele-
ments.
• Inline Elements: Do not start on a new line and only take up as much width as
necessary (e.g., <span>, <a>, <strong>). They can only contain data and other
inline elements.

167. How do you set the base URL for links?


You set a base URL for all relative links on a page using the <base> tag in the <head>
section. The href attribute specifies the base path.

168. How do you test HTML code for errors?


The most reliable way is to use an HTML validator. The W3C provides an official
Markup Validation Service that can check your HTML file or URL for compliance
with web standards and report any syntax errors or issues.

40
by Adhishthatri Singh

169. How can HTML be debugged?


HTML itself doesn’t produce runtime errors like a programming language, but layout
issues are common. You debug HTML using the browser’s developer tools (usually
opened with F12). The "Elements" or "Inspector" panel lets you inspect the live DOM
tree, see the applied CSS, and experiment with changes in real-time.

170. How do you transfer data between pages?


From a purely HTML perspective, you can transfer small amounts of non-sensitive
data between pages using URL parameters (query strings) in a GET request. For
example: [Link]?user=John&id=123. For more complex data transfer, client-
side storage (like LocalStorage or SessionStorage) or server-side sessions are used.

171. How are browser compatibility issues handled?


This is a core challenge in web development. Strategies include:
• Using Standard Code: Writing valid, semantic HTML that follows W3C stan-
dards.
• CSS Resets: Using a CSS reset stylesheet to neutralize default browser styles.
• Vendor Prefixes: For experimental CSS features.
• Polyfills: Using JavaScript to add support for features missing in older browsers.
• Testing: Using tools like BrowserStack or manual testing to check the site on
different browsers.

172. How do you use conditional comments?


Conditional comments were a proprietary feature for Internet Explorer used to serve
specific HTML or CSS to different IE versions. They are now obsolete since IE is no
longer supported. The syntax looked like this: <!–[if IE 8]> ... <![endif]–>.

173. How do you specify language in HTML?


You specify the primary language for the entire document using the lang attribute on
the <html> tag (e.g., <html lang="en-US">). You can also apply the lang attribute
to any specific element to indicate that its content is in a different language.

174. How do you ensure cross-browser compatibility?


Ensuring cross-browser compatibility is a broad effort that involves writing standards-
compliant HTML, using CSS resets, avoiding deprecated features, using polyfills for
newer JavaScript and HTML5 features, and extensive testing across target browsers.

41
by Adhishthatri Singh

175. What tools lint HTML code?


Linters are tools that analyze source code to flag programming errors, bugs, and
stylistic errors. For HTML, popular linters include HTMLHint and Dirty Markup.
Many code editors like VS Code have extensions that integrate these linters directly.

176. How to manage whitespace in HTML?


By default, browsers collapse multiple whitespace characters (spaces, tabs, newlines)
in HTML into a single space. To preserve whitespace exactly as written, you must
use the <pre> tag or the CSS property white-space: pre;.

177. How to prevent XSS in HTML markup?


XSS (Cross-Site Scripting) is a security vulnerability where an attacker injects mali-
cious scripts into content that is then delivered to other users. The primary way to
prevent this is by sanitizing or escaping all user-generated content before rendering
it on the page. For example, characters like < and > should be converted to their
HTML entities (&lt; and &gt;) so the browser treats them as text, not as HTML
tags.

178. What is clickjacking and how prevent it?


Clickjacking is an attack where a user is tricked into clicking on something different
from what they perceive. This is often done by loading a transparent <iframe> of
a malicious site over a legitimate button. It can be prevented on the server side by
setting the X-Frame-Options HTTP header, which tells the browser whether it is
allowed to render the page within an <iframe>.

42
by Adhishthatri Singh

16 Meta Tags & SEO

179. What is a <meta> tag? Common uses?


A <meta> tag provides metadata about the HTML document. This information is
not displayed on the page but is used by browsers and search engines. Common uses
include:
• Setting the character set (charset).
• Providing a page description for SEO.
• Specifying the author of the document.
• Controlling the browser’s viewport for responsive design.

180. Name three types of metadata you can specify.


Three common types of metadata are:
1. Character Set: <meta charset="UTF-8">
2. Page Description: <meta name="description" content="...">
3. Viewport Settings: <meta name="viewport" content="width=device-width,
initial-scale=1.0">

181. What does <meta charset="UTF-8"> do?


This tag declares the character encoding for the document. UTF-8 is a universal char-
acter set that includes almost every character from all human languages. Declaring it
ensures that the browser correctly interprets and displays all text, including special
symbols and characters from different languages.

182. How do you specify author in HTML?


You can specify the author of the document using a meta tag:
1 < meta name = " author " content = " Adhishthatri Singh " >
Author Meta Tag

183. How to set page description for search engines?


You set the page description using a meta tag with name="description". Search
engines often use this description as the snippet for your page in search results.
1 < meta name = " description " content = " A comprehensive guide to the
most frequently asked HTML interview questions and
answers . " >
Description Meta Tag

43
by Adhishthatri Singh

184. What is the viewport meta tag?


The viewport meta tag is essential for responsive web design. It tells the browser how
to control the page’s dimensions and scaling on mobile devices. Without it, mobile
browsers would render the page at a desktop screen width and then scale it down,
making it unreadable.

44
by Adhishthatri Singh

17 Developer Practices / Usability

185. What is progressive enhancement?


Progressive enhancement is a design philosophy that focuses on providing a baseline
of essential content and functionality to as many users as possible, regardless of their
browser or connection speed. More advanced features and complex styling are then
layered on top for browsers that can support them. It prioritizes content first.

186. What is graceful degradation?


Graceful degradation is the opposite approach to progressive enhancement. It involves
building the website for modern browsers first, and then ensuring it remains functional
or "degrades gracefully" in older browsers that may not support all the features. The
focus is on the full-featured experience first.

187. How to apply accessibility best practices?


Key accessibility practices in HTML include:
• Using semantic HTML correctly.
• Providing alt text for all meaningful images.
• Ensuring all functionality is accessible via keyboard (tabindex).
• Using ARIA attributes to add context to dynamic widgets.
• Ensuring high color contrast (this is more CSS, but planned in HTML structure).

188. What is the purpose of ARIA attributes?


The purpose of ARIA attributes is to make web content and web applications more
accessible to people with disabilities. They supplement HTML by providing addi-
tional information about roles, states, and properties of UI components to assistive
technologies, especially for elements whose semantics are not natively understood (like
custom JavaScript widgets).

189. What is microdata?


Microdata is a specification used to nest structured data within existing HTML con-
tent. It uses attributes on HTML tags to assign meaning to content, helping search
engines and web crawlers understand the information on a web page and use it to
provide richer search results (e.g., reviews, event details). [Link] provides a
common vocabulary for microdata.

45
by Adhishthatri Singh

18 Layout & Structure

190. What is float in CSS as it relates to HTML?


While float is a CSS property, it directly affects the HTML layout. When you apply
float: left or float: right to an element (like an image), it is taken out of the
normal document flow and shifted to the left or right of its container. Inline elements,
like the text in a paragraph, will then wrap around the floated element.

191. How do you horizontally and vertically align content?


This is primarily a CSS task, not an HTML one. Modern and effective methods
include:
• Flexbox: Using display: flex; on a container, then justify-content: center;
for horizontal alignment and align-items: center; for vertical alignment.
• Grid: Using display: grid; and place-items: center;.
Older methods involved table layouts or positioning hacks, which are no longer rec-
ommended.

192. How to use grid systems in HTML code?


Grid systems, popularized by CSS frameworks like Bootstrap, are used to create
page layouts through a series of rows and columns. In HTML, this involves a specific
structure, typically a container <div>, which holds a "row" <div>, which in turn holds
multiple "column" <div>s. The layout logic is defined by CSS classes applied to these
divs (e.g., <div class="col-md-4">).

193. How do you create responsive layouts?


Responsive layouts are created with CSS, but rely on a fluid HTML structure. The
key is to use CSS Media Queries to apply different styles based on the screen width.
This allows you to change element widths, font sizes, or even hide elements to optimize
the layout for different devices, from mobile phones to desktops.

46
by Adhishthatri Singh

19 Browser & Device

194. How do you set up a responsive viewport?


You set up the viewport by placing the following <meta> tag in the <head> of your
HTML document. This is the first and most critical step for any responsive design.
1 < meta name = " viewport " content = " width = device - width ,
initial - scale =1.0 " >
Viewport Meta Tag

195. What is mobile-first design?


Mobile-first design is a strategy where you design and build the website for the smallest
screen (mobile) first, and then add more features and more complex layouts for larger
screens (tablets, desktops) via media queries. This approach forces you to prioritize
essential content and often results in a cleaner and more performant site.

196. How does HTML support retina displays?


HTML supports high-resolution displays (like Apple’s Retina displays) through the
srcset attribute on the <img> tag. You can provide multiple image files at different
resolutions and use the pixel density descriptor (2x, 3x) to tell the browser which
image to use on a high-density screen.
1 < img src = " image -1 x . jpg " srcset = " image -2 x . jpg 2x , image -3 x . jpg
3 x " alt = " ... " >
Srcset for Retina Displays

197. How do you ensure content scales on tablets/phones?


The primary step is setting the viewport meta tag correctly. After that, you must use
responsive CSS techniques:
• Use relative units like percentages (%) or viewport units (vw) for widths instead of
fixed pixels.
• Set max-width: 100%; on images and other media to prevent them from over-
flowing their containers.
• Use CSS media queries to adjust the layout at different screen sizes.

47
by Adhishthatri Singh

20 HTML with Other Technologies

198. How does HTML integrate with JavaScript and APIs?


HTML provides the structure and elements that JavaScript targets and manipulates.
JavaScript "listens" for events on HTML elements (like clicks or form submissions)
via event listeners. It can then interact with the DOM to change content, styles, and
attributes dynamically. For APIs, JavaScript makes the network request (e.g., using
fetch) and then uses the returned data to update the HTML on the page.

199. How does HTML work with frameworks like React?


In frameworks like React, you don’t typically write the final HTML file directly.
Instead, you write components using JSX, which looks very similar to HTML. During
a "build" process, the framework and its tools (like Babel and Webpack) compile this
JSX and JavaScript code into a standard set of static HTML, CSS, and JavaScript
files that a browser can understand and render. The framework then manages the
DOM updates dynamically in the browser.

200. What are the limitations of HTML?


HTML’s main limitation is that it is a markup language, not a programming language.
It can only define structure and content. It has no logic, cannot perform calculations,
handle user interactions, or store data. For any dynamic functionality, styling, or
logic, it relies entirely on its companion technologies: CSS and JavaScript.

48

You might also like