Intermediate HTML Interview Questions

Last updated: Apr 2, 2026

Author :

Jitendra Kumar

What are semantic HTML elements?
Semantic HTML elements are tags that clearly describe the meaning of the content they contain. Instead of using generic tags like <div>, semantic elements like <article> or <header> explain what kind of content is inside. This helps browsers, developers, and search engines understand the structure of a webpage. It also improves accessibility for screen readers. Semantic HTML makes code more organized and readable. It is an important part of modern web development.
Points:

Improves code readability
Helps SEO
Enhances accessibility
Gives meaningful structure

Why is semantic HTML important?

Semantic HTML is important because it makes web pages easier to understand for both humans and machines. Search engines use semantic tags to better index content, improving SEO rankings. It also helps screen readers interpret the page correctly, which improves accessibility. Developers can maintain and debug code more easily when structure is clear. Semantic HTML also supports better collaboration in teams. Overall, it leads to cleaner and more professional websites.

Points:

Better SEO
Accessibility support
Clean code
Easy maintenance

Difference between <section>, <article>, and <div>?

Tag	Explanation	When to Use	Key Features	Example
`<section>`	The `<section>` tag is a semantic element used to group related content under a common theme. It usually contains a heading and represents a distinct part of a webpage. It helps organize content into meaningful blocks, making the structure clearer. It is not standalone content but part of a larger page. Browsers and search engines understand it better than a `<div>`.	Use when grouping related content like chapters, topics, or parts of a page.	- Semantic tag - Thematic grouping - Usually has a heading - Improves SEO	`html <section> <h2>Services</h2> <p>Details...</p> </section>`
`<article>`	The `<article>` tag is a semantic element used for independent, self-contained content that can stand on its own. It is often used for blog posts, news articles, or forum posts. Even if taken out of the page, the content still makes sense. It helps search engines identify important standalone content. It can also be reused or syndicated.	Use for blog posts, news, comments, or any independent content.	- Semantic tag - Independent content - Can be reused - SEO-friendly	`html <article> <h2>Blog Title</h2> <p>Content...</p> </article>`
`<div>`	The `<div>` tag is a non-semantic (generic) container used only for grouping content for styling or scripting. It does not describe the meaning of the content inside it. Developers use it mainly with CSS or JavaScript. It is flexible but does not help with SEO or accessibility. Overusing `<div>` can make code harder to understand.	Use only when no semantic tag fits the situation.	- Non-semantic - Generic container - Used for styling/layout - No meaning to browser	`html <div class="box"> <p>Content</p> </div>`

What is the <nav> tag?

The <nav> tag is used to define a section that contains navigation links. It is typically used for menus, links to other pages, or important sections of the site. This helps users easily navigate through the website. Search engines also use it to understand the main navigation structure. It improves accessibility for screen readers. Not all links need to be inside <nav>, only major navigation links.

Points:

Contains navigation links
Improves usability
Helps SEO
Used for menus

What is the <aside> tag?

The <aside> tag is used for content that is related to the main content but not essential to it. It is commonly used for sidebars, advertisements, or additional information. This helps separate main content from supporting content. It improves the overall structure and readability of the webpage. Screen readers can identify it as secondary content. It is often placed beside the main content.

Points:

Used for side content
Not main content
Improves layout clarity
Useful for ads or tips

What is the <header> and <footer>?

The <header> and <footer> tags define the top and bottom sections of a webpage or section. The <header> usually contains logos, titles, or navigation links. The <footer> contains information like copyright, contact details, or links. These tags help organize content clearly. They can be used multiple times within different sections. They also improve accessibility and SEO.

Points:

<header> → Top section
<footer> → Bottom section
Used for structure
Can be reused

What is the <figure> and <figcaption>?

The <figure> tag is used to group media content like images, diagrams, or illustrations along with optional descriptions. It represents self-contained content that can be referenced independently. The <figcaption> tag is used to provide a caption or description for the content inside <figure>. This improves accessibility and helps users understand the media better. It is commonly used in articles and blogs. The caption can be placed above or below the content.

Points:

Groups media content
Adds description
Improves accessibility
Semantic structure

What is the <blockquote> tag?

The <blockquote> tag is used to define a section that is quoted from another source. It is typically displayed with indentation by browsers. This tag helps indicate that the content is not original but taken from elsewhere. It improves semantic meaning and readability. It is often used in articles or research content. It can also include a citation source.

Points:

Used for long quotes
Indented by default
Semantic meaning
Can include source

What is the cite attribute?

The cite attribute is used to specify the source URL of a quotation or reference. It is mainly used with tags like <blockquote> or <q>. This helps provide credibility to the quoted content. It is not always visible on the webpage but useful for browsers and search engines. It improves semantic clarity.

Points:

Specifies source URL
Used with quotes
Improves credibility
Not always visible

What are global attributes in HTML?

Global attributes are attributes that can be used with any HTML element. They provide additional information about elements. Examples include id, class, style, title, and data-*. They help in styling, scripting, and accessibility. These attributes are very commonly used in web development.

Points:

Used on all elements
Common examples: id, class
Help CSS & JS
Improve flexibility

What is the id attribute?

The id attribute uniquely identifies a single HTML element. No two elements should have the same id in one page. It is mainly used for CSS styling and JavaScript manipulation. It also helps in linking within the page. It is very specific compared to class.

Points:

Unique identifier
Used in CSS & JS
One per element
High specificity

What is the class attribute?

The class attribute is used to group multiple elements together. Unlike id, many elements can share the same class. It is mainly used for styling using CSS. It also helps in selecting multiple elements in JavaScript. It makes styling reusable.

Points:

Can be reused
Used for styling
Multiple elements allowed
Flexible

Difference between id and class?

Feature	`id` Attribute	`class` Attribute
Definition	The `id` attribute is used to uniquely identify a single HTML element on a webpage. It provides a specific name that should not be repeated anywhere else in the same document. It is mainly used when one element needs to be targeted individually. It plays an important role in JavaScript and anchor linking.	The `class` attribute is used to group multiple HTML elements together under a common name. It allows developers to apply the same styles or behaviors to many elements at once. It is flexible and reusable across the webpage. It is widely used in CSS for styling multiple elements.
Uniqueness	An `id` must be unique in a webpage. No two elements should have the same `id` value. This ensures precise targeting of elements.	A `class` can be used multiple times. Many elements can share the same class name. This makes it reusable and efficient.
CSS Usage	In CSS, an `id` is selected using `#idname`. It has higher specificity, meaning its styles override class styles. It is used when styling one specific element.	In CSS, a `class` is selected using `.classname`. It has lower specificity than `id`. It is used for styling groups of elements.
JavaScript Usage	In JavaScript, `id` is often used with `getElementById()` to directly access a specific element. It is fast and precise.	In JavaScript, classes are used with methods like `getElementsByClassName()` or `querySelectorAll()` to access multiple elements.
Reusability	Not reusable because it is unique. Designed for one specific element only.	Highly reusable. Can be applied to many elements across the page.
Use Case	Used when a single element needs unique styling, linking, or scripting.	Used when multiple elements share the same style or behavior.

What are data-* attributes?

The data-* attributes are used to store custom data in HTML elements. They allow developers to add extra information without affecting the layout. These values can be accessed using JavaScript. They are useful for dynamic web applications. They follow the format data-name="value".

Points:

Store custom data
Used in JS
Flexible
No predefined meaning

What is the <base> tag?

The <base> tag specifies a base URL for all relative URLs in a document. It is placed inside the <head> section. This helps avoid repeating long URLs. It affects links, images, and scripts. Only one <base> tag is allowed per document.

Points:

Sets base URL
Used in head
Simplifies links
Only one allowed

What is the <link> tag?

The <link> tag is used to connect external resources to an HTML document. It is commonly used to link CSS files. It is placed inside the <head> section. It does not have a closing tag. It helps separate content from styling.

Points:

Links external files
Used for CSS
Placed in head
Void element

What is the rel attribute?

The rel attribute defines the relationship between the current document and the linked resource. It is mainly used with the <link> tag. Common values include stylesheet, icon, etc. It helps browsers understand how to use the resource.

Points:

Defines relationship
Used in link tag
Common: stylesheet
Improves clarity

How do you add CSS to HTML?

CSS can be added to HTML to style elements and improve design. It controls colors, layout, fonts, and spacing. There are three main ways to add CSS: inline, internal, and external. Using CSS makes websites visually appealing. It separates design from structure.

What are inline, internal, and external CSS?

CSS can be applied in three ways. Inline CSS is applied directly inside HTML tags. Internal CSS is written inside <style> in the head. External CSS is written in a separate file and linked using <link>. External CSS is most recommended.

Points:

Inline → inside tag
Internal → inside <style>
External → separate file
External is best

How do you add JavaScript to HTML?
JavaScript can be added using the <script> tag. It can be placed in the head or body section. It is used to make webpages interactive. It can also be linked externally using a file. It helps in dynamic behavior.

Difference between <script> in head vs body?

Feature	`<script>` in `<head>`	`<script>` in `<body>`
Definition	When the `<script>` tag is placed inside the `<head>`, the browser loads and executes the JavaScript before rendering the HTML content. This means the script runs early in the page lifecycle. It is often used when scripts are required before the page loads. However, it can delay page rendering if not handled properly.	When the `<script>` tag is placed at the end of the `<body>`, the browser loads and executes the JavaScript after the HTML content is fully loaded. This ensures that the page content is displayed first. It is the most commonly recommended placement for better performance and user experience.
Page Loading Behavior	Blocks HTML rendering until the script is downloaded and executed. This can slow down page load time.	Does not block initial rendering because HTML loads first. Improves perceived performance.
Execution Timing	Executes before the DOM is fully created. Accessing elements may fail if they are not yet loaded.	Executes after the DOM is created. Elements are available for manipulation.
Performance Impact	Can make the page slower if large scripts are used. Not ideal for user experience unless necessary.	Faster page display and smoother experience. Preferred for most cases.
Use Case	Used when scripts must load early (e.g., critical scripts, configuration, or libraries with `defer`).	Used for most scripts, especially those interacting with DOM elements.
Best Practice	Use with `defer` or `async` to avoid blocking.	Place scripts just before closing `</body>` for best performance.

What is defer in script?

The defer attribute delays script execution until HTML is fully loaded. It ensures scripts run after parsing is complete. It does not block page loading. It is useful for external scripts.

Points:

Delays execution
Improves performance
Runs after HTML
Non-blocking

What is async in script?

The async attribute loads and executes scripts asynchronously. It does not wait for HTML parsing to finish. Scripts may execute in random order. It improves loading speed but can cause dependency issues.

Points:

Loads independently
Faster
No order guarantee
Non-blocking

What is the <noscript> tag?

The <noscript> tag is used to display alternative content when JavaScript is disabled in the browser. It ensures that users who do not have JavaScript enabled can still see important information. This improves accessibility and usability. It is placed inside the <body> or <head>. It acts as a fallback mechanism for scripts. It is important for critical instructions or messages.

Points:

Works when JS is disabled
Provides fallback content
Improves accessibility
Used inside body/head

What is the <fieldset> tag?

The <fieldset> tag is used to group related elements in a form. It creates a box around the grouped elements, making the form more organized. It improves readability and usability. It is often used with <legend> to provide a title. It helps users understand sections of a form.

Points:

Groups form elements
Improves structure
Creates visual box
Used with legend

What is <legend> in forms?

The <legend> tag is used to provide a caption for a <fieldset>. It describes the purpose of the grouped form elements. It appears as a title on the border of the fieldset. It improves accessibility and clarity. It is always used inside <fieldset>.

Points:

Title for fieldset
Improves clarity
Helps users
Used in forms

What is enctype in forms?

The enctype attribute specifies how form data is encoded when submitted to the server. It is used in the <form> tag. Different encoding types are used for different data formats. It is especially important when uploading files. The default is application/x-www-form-urlencoded.

Points:

Defines data encoding
Used in form tag
Important for file upload
Multiple types available

When to use multipart/form-data?

multipart/form-data is used when a form includes file uploads. It allows binary data like images and documents to be sent to the server. It does not encode data as simple text. It is required when using <input type="file">. Without it, files will not be uploaded properly.

Points:

Used for file uploads
Supports binary data
Required for file input
More complex encoding

What is form validation?

Form validation ensures that user input meets certain rules before submission. It prevents incorrect or incomplete data from being sent. Validation can be done using HTML, JavaScript, or both. It improves data accuracy and user experience. HTML5 provides built-in validation features.

Points:

Checks user input
Prevents errors
Improves UX
Can be automatic

What is the required attribute?

The required attribute makes a form field mandatory. The form cannot be submitted if the field is empty. It is part of HTML5 validation. It works without JavaScript. It improves form accuracy.

Points:

Mandatory field
Prevents empty input
Built-in validation
Easy to use

What is placeholder?

The placeholder attribute provides a hint inside an input field. It disappears when the user starts typing. It helps users understand what to enter. It improves usability. It is not actual input data.

Points:

Shows hint text
Improves UX
Disappears on typing
Not submitted

What is pattern attribute?

The pattern attribute defines a regular expression for input validation. It ensures that user input follows a specific format. It is used with input fields. If the pattern does not match, submission is blocked. It is useful for emails, phone numbers, etc.

Points:

Uses regex
Validates format
Prevents wrong input
HTML5 feature

What is HTML5 form validation?

HTML5 form validation provides built-in validation without JavaScript. It includes attributes like required, pattern, min, max, etc. Browsers automatically check input before submission. It improves user experience. It reduces the need for extra code.

Points:

Built-in validation
No JS needed
Easy to use
Improves forms

What is <datalist>?

The <datalist> tag provides a list of predefined options for input fields. It allows users to either select or type their own value. It is flexible compared to dropdowns. It is linked using the list attribute.

Points:

Suggestion list
User can type
Flexible
Works with input

Difference between <datalist> and <select>?

Feature	`<datalist>`	`<select>`
Definition	The `<datalist>` element provides a list of suggested options for an `<input>` field. It does not restrict the user to only those options, meaning the user can either select from the list or type their own value. It enhances user experience by giving autocomplete-like suggestions.	The `<select>` element creates a dropdown list of predefined options. The user must choose one (or more) from the given list and cannot enter a custom value. It ensures strict input control and consistency of data.
User Input	Allows both typing and selecting from suggestions. Users are free to enter values not present in the list.	Allows only selection from the given options. Users cannot type their own value.
Flexibility	Highly flexible because it does not restrict input. Useful when you want to guide users but not limit them.	Less flexible because input is restricted. Best when only specific values are allowed.
Use Case	Used for autocomplete suggestions, like browser names, cities, or search hints.	Used for fixed choices, like gender selection, country list, etc.
Form Submission	Submits the value entered or selected in the associated `<input>` field.	Submits the selected option value directly.
Accessibility & Control	Offers less control over user input since users can enter anything. Requires additional validation if strict input is needed.	Offers full control over input since only predefined options are allowed. No extra validation needed for value selection.
Styling	Limited styling options because it depends on the browser’s default behavior.	More control over styling and behavior (though still somewhat browser-dependent).
HTML Structure	Works with `<input>` using the `list` attribute to connect it to `<datalist>`.	Works independently using `<select>` and `<option>` tags.

What is <output> tag?

The <output> tag is used to display the result of a calculation or user action. It is commonly used inside forms along with JavaScript. It represents the output value of operations like addition or dynamic updates. This tag improves semantic meaning by clearly indicating result data. It can be linked with form inputs using attributes like for. It is useful for interactive applications.

Points:

Displays calculated result
Used in forms
Works with JavaScript
Semantic output element

What is <progress> tag?

The <progress> tag represents the progress of a task over time. It is used to show loading, downloading, or task completion. It has value and max attributes to define progress. It provides a visual progress bar. It is useful for user feedback in applications.

Points:

Shows task progress
Has value and max
Visual indicator
User-friendly

What is <meter> tag?

The <meter> tag represents a scalar value within a known range. It is used for measurements like battery level, score, or temperature. It indicates low, high, or optimal values. Unlike <progress>, it is not for tasks but for data measurement. It improves data visualization.

Points:

Shows measurement
Has range
Not for progress
Used for stats

What is HTML layout?

HTML layout refers to the structure and arrangement of elements on a webpage. It uses semantic tags like <header>, <footer>, <section>, and <aside>. It defines how content is organized visually. It works together with CSS for styling. A good layout improves readability and user experience.

Points:

Defines page structure
Uses semantic elements
Works with CSS
Improves UX

What is responsive design?

Responsive design ensures that a website adapts to different screen sizes and devices. It uses flexible layouts, images, and CSS media queries. This makes websites mobile-friendly. It improves user experience across devices. It is essential in modern web development.

Points:

Adapts to screens
Uses media queries
Mobile-friendly
Improves UX

What is viewport meta tag?
The viewport meta tag controls how a webpage is displayed on mobile devices. It ensures proper scaling and responsiveness. It is placed inside the <head> section. Without it, pages may appear zoomed out. It is essential for responsive design.

Points:

Controls scaling
Used in head
Important for mobile
Enables responsiveness

What are HTML entities and encoding?

HTML entities are special codes used to display reserved characters like <, >, or &. Encoding ensures text is correctly interpreted by browsers. Entities start with & and end with ;. They prevent errors in HTML rendering. Encoding also supports multiple languages.

Points:

Displays special characters
Prevents errors
Uses &...; format
Supports languages

Example: < = <

What is UTF-8 encoding?
UTF-8 is a universal character encoding standard. It supports almost all characters and symbols from different languages. It is widely used on the web. It ensures proper display of text. It is set using a meta tag in HTML.

Points:

Supports all languages
Standard encoding
Prevents text errors
Widely used

What is iframe?

The <iframe> tag is used to embed another webpage inside the current webpage. It creates a frame that displays external content. It is commonly used for videos, maps, or ads. It allows integration of external resources.

Points:

Embeds webpages
Creates frame
Used for media
External content

How do you embed another webpage?

Another webpage can be embedded inside your webpage using the <iframe> tag. It creates a frame that loads external content within your page. This is commonly used for embedding videos, maps, or other websites. The src attribute specifies the URL of the page to embed. It allows integration of external resources without redirecting users. However, some websites block embedding for security reasons.

Points:

Uses <iframe>
Displays external content
Uses src attribute
Common for videos/maps

What is accessibility in HTML?

Accessibility in HTML ensures that websites are usable by all users, including those with disabilities. It involves using semantic tags, proper labels, and readable structures. Screen readers rely on accessible HTML to interpret content. It improves usability for visually impaired users. Accessibility is an important part of inclusive design.

Points:

Supports all users
Helps disabled users
Uses semantic HTML
Improves UX

What is ARIA?

ARIA (Accessible Rich Internet Applications) provides additional accessibility information to HTML elements. It helps screen readers understand dynamic or complex UI components. ARIA uses attributes like aria-label and aria-hidden. It enhances accessibility when semantic HTML is not enough. It should be used carefully.

Points:

Improves accessibility
Used with screen readers
Adds extra info
Works with attributes

What is tabindex?

The tabindex attribute controls the order in which elements are focused when using the keyboard. It allows users to navigate using the Tab key. It improves accessibility for users who cannot use a mouse. It can set custom navigation order.

Points:

Keyboard navigation
Uses Tab key
Controls focus order
Improves accessibility

What is contenteditable?

The contenteditable attribute makes an HTML element editable by the user. It allows users to modify content directly in the browser without forms. It is useful for building text editors or interactive content.

Points:

Editable content
No input field needed
Used in editors
Interactive

What is <address> tag?

The <address> tag is used to define contact information for a person or organization. It may include email, phone number, or physical address. Browsers usually display it in italic. It adds semantic meaning.

Points:

Contact info
Semantic tag
Usually italic
Improves clarity

What is <mark> tag?

The <mark> tag is used to highlight text. It shows important or relevant information. It is often displayed with a yellow background. It improves readability.

Points:

Highlights text
Draws attention
Improves readability

What is <time> tag?

The <time> tag is used to represent dates or times in a machine-readable format. It helps browsers and search engines understand time-related data. It can include a datetime attribute for proper formatting. It improves SEO and accessibility.

Points:

Represents date/time
Machine-readable
Improves SEO
Supports datetime

What is <code> tag?

The <code> tag is used to display code snippets in a webpage. It shows text in a monospace font. It is commonly used in programming tutorials and documentation. It helps distinguish code from normal text.

Points:

Displays code
Monospace font
Used in examples
Improves readability

What is HTML validation?

HTML validation checks whether HTML code follows official standards. It helps detect errors and improves code quality. Valid HTML ensures proper rendering across browsers. It is done using validators like W3C.

Points:

Checks errors
Improves quality
Ensures compatibility

What is DOM in HTML?

The DOM (Document Object Model) is a programming interface that represents an HTML document as a tree structure. Each element, attribute, and text becomes a node in this tree. JavaScript can access and modify these nodes dynamically. This allows developers to change content, styles, and structure of a webpage. The DOM updates the page without reloading it. It is essential for creating interactive web pages.

Points:

Tree structure of HTML
Each element = node
Used by JavaScript
Dynamic update

What is BOM?

The BOM (Browser Object Model) allows JavaScript to interact with the browser itself, not just the webpage. It includes objects like window, navigator, location, and history. It helps control browser features like alerts, navigation, and screen info. Unlike DOM, it is not standardized strictly. It represents the browser environment.

Points:

Interacts with browser
Includes window object
Controls navigation
Not strictly standardized

What are HTML APIs?

HTML APIs are built-in browser interfaces that provide additional functionality to web applications. They allow developers to use features like storage, geolocation, multimedia, and drag-and-drop. These APIs extend the capabilities of HTML and JavaScript. They are easy to use and widely supported.

Points:

Provide extra features
Used in web apps
Built into browser
Examples: storage, location

What is Geolocation API?

The Geolocation API is used to get the user’s current location (latitude and longitude). It requires user permission for privacy reasons. It is commonly used in maps, delivery apps, and location-based services. It works through JavaScript.

Points:

Gets user location
Needs permission
Used in maps
Returns coordinates

What is Web Storage API?

The Web Storage API allows storing data in the browser as key-value pairs. It includes localStorage and sessionStorage. It is faster and more efficient than cookies. Data is stored on the client side. It is widely used for saving user preferences.

Points:

Stores data in browser
Key-value format
Faster than cookies
Includes local & session storage

Difference between localStorage and sessionStorage?

Feature	localStorage	sessionStorage
Definition	Stores data permanently in the browser until manually deleted. It remains even after closing the browser.	Stores data temporarily for a session. Data is removed when the tab or browser is closed.
Scope	Shared across all tabs of the same origin.	Limited to a single tab.
Use Case	Used for long-term data like user settings or preferences.	Used for temporary data like form inputs.
Storage Limit	Larger storage capacity.	Slightly smaller capacity.