HTML Interview Questions
Common HTML questions asked in frontend interviews
Essential HTML Interview Questions
Master the fundamental HTML concepts commonly asked in frontend developer interviews. This guide covers semantic HTML, forms, accessibility, SEO, and best practices.
1. What is Semantic HTML and Why is it Important?
Semantic HTML uses elements that clearly describe their meaning to both the browser and the developer. Instead of using generic <div> and <span> elements, semantic elements provide context about the content they contain.
Non-Semantic Example:
<div class="header">
<div class="nav">
<div class="nav-item">Home</div>
</div>
</div>Semantic Example:
<header>
<nav>
<a href="/">Home</a>
</nav>
</header>- Better accessibility for screen readers
- Improved SEO (search engines understand content better)
- Easier to maintain and read code
- Better for responsive design
2. Explain the Difference Between Block and Inline Elements
Block elements: Take up the full width available and start on a new line.
- Examples: <div>, <p>, <h1>-<h6>, <section>, <article>
- Can contain other block and inline elements
- Have top and bottom margins
Inline elements: Take up only as much width as necessary and don't start on a new line.
- Examples: <span>, <a>, <strong>, <em>, <img>
- Cannot contain block elements (except <a> in HTML5)
- Top and bottom margins/padding don't affect layout
<!-- Block elements -->
<div>This is a block element</div>
<p>This starts on a new line</p>
<!-- Inline elements -->
<span>This is inline</span><strong>This stays on same line</strong>3. What are Data Attributes and How Do You Use Them?
Data attributes allow you to store custom data on HTML elements using the data-* attribute format.
<article
data-user-id="12345"
data-post-type="tutorial"
data-published-date="2026-01-07">
<h2>Article Title</h2>
</article>Accessing in JavaScript:
const article = document.querySelector('article');
// Using dataset
console.log(article.dataset.userId); // "12345"
console.log(article.dataset.postType); // "tutorial"
// Using getAttribute
console.log(article.getAttribute('data-published-date')); // "2026-01-07"4. Explain Form Validation Attributes
HTML5 provides built-in form validation attributes that work without JavaScript.
<form>
<!-- Required field -->
<input type="text" name="username" required>
<!-- Pattern validation -->
<input
type="text"
name="zipcode"
pattern="[0-9]{5}"
title="5-digit zip code">
<!-- Min/Max for numbers -->
<input
type="number"
name="age"
min="18"
max="100">
<!-- Min/Max length for text -->
<input
type="password"
name="password"
minlength="8"
maxlength="20"
required>
<!-- Email validation -->
<input type="email" name="email" required>
<button type="submit">Submit</button>
</form>5. What is the DOCTYPE and Why is it Important?
The DOCTYPE declaration tells the browser which version of HTML the page is written in. It should be the first line of your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>Without DOCTYPE: Browsers may enter "quirks mode" where they emulate older browser behavior, causing inconsistent rendering.
6. Explain the Different Types of Lists in HTML
Ordered List (<ol>): Numbered list
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<!-- Custom start number -->
<ol start="5">
<li>Fifth item</li>
</ol>
<!-- Reverse order -->
<ol reversed>
<li>Item 3</li>
<li>Item 2</li>
<li>Item 1</li>
</ol>Unordered List (<ul>): Bulleted list
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>Description List (<dl>): Term-definition pairs
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>7. What are Meta Tags and Their Importance?
Meta tags provide metadata about the HTML document. They're crucial for SEO, social sharing, and browser behavior.
<head>
<!-- Character encoding -->
<meta charset="UTF-8">
<!-- Viewport for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO -->
<meta name="description" content="Learn HTML interview questions">
<meta name="keywords" content="HTML, interview, web development">
<meta name="author" content="TechLead">
<!-- Open Graph for social media -->
<meta property="og:title" content="HTML Interview Questions">
<meta property="og:description" content="Master HTML interviews">
<meta property="og:image" content="/preview.jpg">
<meta property="og:url" content="https://example.com">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML Interview Questions">
</head>8. Explain the Difference Between <script>, <script async>, and <script defer>
Normal <script>:
- Blocks HTML parsing
- Script is fetched and executed immediately
- HTML parsing resumes after script execution
<script async>:
- Downloads script in parallel with HTML parsing
- Executes as soon as downloaded (may pause HTML parsing)
- Good for independent scripts (analytics, ads)
- Execution order not guaranteed
<script defer>:
- Downloads script in parallel with HTML parsing
- Executes after HTML parsing is complete
- Maintains execution order
- Best for scripts that depend on DOM or other scripts
<!-- Blocking -->
<script src="app.js"></script>
<!-- Async - for independent scripts -->
<script async src="analytics.js"></script>
<!-- Defer - for DOM-dependent scripts -->
<script defer src="main.js"></script>9. What are Accessibility Best Practices in HTML?
<!-- Use semantic HTML -->
<nav>
<ul>
<li><a href="/">Home</a></li>
</ul>
</nav>
<!-- Alt text for images -->
<img src="logo.png" alt="Company Logo">
<!-- ARIA labels when needed -->
<button aria-label="Close dialog">✕</button>
<!-- Associate labels with inputs -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<!-- Skip navigation link -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Proper heading hierarchy -->
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
<!-- Keyboard accessible buttons -->
<button type="button" tabindex="0">Click Me</button>10. Explain the <picture> Element and Responsive Images
The <picture> element allows you to specify multiple image sources for different screen sizes or conditions.
<picture>
<!-- Large screens -->
<source
media="(min-width: 1200px)"
srcset="hero-large.jpg">
<!-- Medium screens -->
<source
media="(min-width: 768px)"
srcset="hero-medium.jpg">
<!-- Small screens and fallback -->
<img
src="hero-small.jpg"
alt="Hero image">
</picture>
<!-- WebP with fallback -->
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="Description">
</picture>- Always use semantic HTML for better accessibility and SEO
- Understand form validation attributes (required, pattern, min, max)
- Know the difference between async and defer for script loading
- Use proper meta tags for SEO and social sharing
- Implement accessibility features (alt text, ARIA labels, semantic elements)
- Understand responsive images with <picture> and srcset