🔰 Beginner-Level HTML Interview Questions
1. What is HTML?
HTML (HyperText Markup Language) is the standard markup language used to create and structure content on the web. It defines elements like headings, paragraphs, images, links, and forms.
2. Is HTML a programming language?
No. HTML is a markup language, not a programming language.
It does not contain logic, conditions, or loops.
3. What are tags in HTML?
Tags are keywords enclosed in angle brackets that define elements.
Example:
<p>This is a paragraph</p>
4. What is an HTML element?
An HTML element consists of:
- Opening tag
- Content
- Closing tag
Example:
<h1>Hello</h1>
5. What is the difference between tags and elements?
| Tags | Elements |
|---|---|
<p> | <p>Hello</p> |
| Structure only | Structure + content |
6. What is <!DOCTYPE html>?
It tells the browser that the document is an HTML5 document.
7. What are attributes in HTML?
Attributes provide additional information about elements.
Example:
<img src="image.jpg" alt="Image description">
8. What is the difference between <div> and <span>?
<div> | <span> |
|---|---|
| Block-level | Inline |
| Takes full width | Takes only content width |
| Used for layout | Used for inline text |
9. What are self-closing tags?
Tags that don’t need a closing tag.
Examples:
<br>
<hr>
<img>
<input>
10. What is the purpose of the alt attribute?
- Improves accessibility
- Helps SEO
- Displays text if image fails to load
🟡 Intermediate-Level HTML Interview Questions
11. What are semantic HTML tags?
Semantic tags describe the meaning of content.
Examples:
<header>, <nav>, <main>, <section>, <article>, <footer>
They improve:
- SEO
- Accessibility
- Code readability
12. Difference between <strong> and <b>?
<strong> | <b> |
|---|---|
| Semantic importance | Visual bold |
| Helps screen readers | No meaning |
13. Difference between <em> and <i>?
<em> | <i> |
|---|---|
| Emphasis (semantic) | Italic (visual) |
14. What is the difference between block and inline elements?
| Block | Inline |
|---|---|
| New line | Same line |
| Full width | Content width |
Examples:
- Block:
<div>,<p>,<h1> - Inline:
<span>,<a>,<img>
15. What is the purpose of the <meta> tag?
Provides metadata about the document.
Example:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
16. What is the viewport meta tag?
Controls layout on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
17. What is the difference between id and class?
| id | class |
|---|---|
| Unique | Reusable |
| One per page | Multiple |
#id selector | .class selector |
18. What are HTML entities?
Used to display reserved characters.
Examples:
< > &
19. What is an iframe?
Embeds another webpage inside the current page.
<iframe src="https://example.com"></iframe>
20. What is the difference between <script> and <noscript>?
<script>→ JavaScript code<noscript>→ Shown when JS is disabled
🔵 Advanced-Level HTML Interview Questions
21. What is HTML5 and its key features?
HTML5 introduced:
- Semantic elements
- Audio & video support
- Canvas & SVG
- Local storage
- Offline capabilities
22. What is the difference between localStorage and sessionStorage?
| localStorage | sessionStorage |
|---|---|
| Persistent | Session-based |
| No expiry | Cleared on tab close |
| ~5MB | ~5MB |
23. What is the <canvas> element?
Used for drawing graphics using JavaScript.
<canvas id="myCanvas"></canvas>
24. What is the difference between cookies and localStorage?
| Cookies | localStorage |
|---|---|
| Sent with every request | Client-side only |
| Small (4KB) | Larger |
| Slower | Faster |
25. What is ARIA in HTML?
ARIA (Accessible Rich Internet Applications) improves accessibility.
Example:
<button aria-label="Close">X</button>
26. What is the difference between async and defer?
| async | defer |
|---|---|
| Loads & executes immediately | Executes after HTML |
| Order not guaranteed | Order preserved |
27. What is the purpose of the data-* attribute?
Stores custom data.
<div data-user-id="101"></div>
28. What happens if multiple <h1> tags are used?
- Not invalid
- Bad SEO practice
- Confuses document structure
29. How does HTML support accessibility?
- Semantic tags
- Alt text
- Labels
- ARIA attributes
- Proper heading structure
30. What is the difference between HTML and XHTML?
| HTML | XHTML |
|---|---|
| Flexible syntax | Strict XML rules |
| Case-insensitive | Case-sensitive |
🧠 Tricky HTML Interview Questions
31. Can a <div> be inside a <p> tag?
❌ No. <p> cannot contain block-level elements.
32. Can multiple elements have the same id?
❌ No. IDs must be unique.
33. What is the default method of <form>?
GET
34. What is the difference between readonly and disabled?
| readonly | disabled |
|---|---|
| Submitted | Not submitted |
| Focusable | Not focusable |
35. What is progressive enhancement?
Building core functionality first, then enhancing for advanced browsers.
🎯 How Interviewers Evaluate HTML Knowledge
They check:
- Semantic understanding
- Accessibility awareness
- Clean structure
- Real-world usage
- Not just syntax
📌 Final Interview Tip
If you can confidently explain:
- Semantic HTML
- Accessibility
- Forms
- Structure
You already beat 80% of candidates.
