HTML interview questions
1. What is HTML and why is it used?
HTML (HyperText Markup Language) structures web content using elements like headings,
paragraphs, and links. It defines the skeleton of a webpage, which CSS styles and JavaScript
enhances.
2. What are semantic HTML elements?
Semantic elements clearly describe their meaning (e.g., <header>, <article>, <section>). They
improve accessibility, SEO, and code readability.
3. Difference between <div> and <span>?
<div> is a block-level element (takes full width), used for layout.
<span> is inline (only as wide as content), used for styling small parts of text.
4. What is the purpose of the <!DOCTYPE html> declaration?
It tells the browser to use HTML5 standards mode, ensuring consistent rendering across
browsers.
5. What are block-level vs inline elements?
Block elements (<div>, <p>) start on a new line.
Inline elements (<a>, <span>) stay within the same line.
6. What is the difference between id and class?
id is unique per page (used for targeting specific elements).
class can be reused across multiple elements for styling or scripting.
7. What is the alt attribute in images?
Provides alternative text for accessibility and SEO. It displays when the image fails to load or is
read by screen readers.
8. What is the difference between <b> and <strong>?
<b> is purely visual (bold text).
<strong> adds semantic importance (used by screen readers).
9. What are HTML forms and how do they work?
Forms collect user input using elements like <input>, <textarea>, and <select>. Data is sent to
the server via GET or POST.
10. Difference between GET and POST?
GET: Appends data in URL, used for retrieval (less secure).
POST: Sends data in request body, used for sensitive data.
11. What is the meta tag used for?
Defines metadata like charset, viewport, and SEO description. Example: responsive design via
viewport.
12. What is the viewport meta tag?
Controls layout on mobile devices. Example:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
13. What is the difference between <section> and <article>?
<section> groups related content.
<article> represents independent, reusable content (e.g., blog post).
14. What is data-* attribute?
Custom attributes used to store extra data in HTML elements. Accessed via JavaScript (dataset).
15. What is the <label> tag used for?
Associates text with form inputs, improving accessibility and usability (clicking label focuses
input).
16. What is the difference between <iframe> and <embed>?
<iframe> embeds another HTML page.
<embed> is used for external content like PDFs or media.
17. What is progressive enhancement?
Building a basic functional site first, then adding advanced features for modern browsers.
18. What is accessibility (a11y) in HTML?
Designing HTML so all users (including disabilities) can access it—using semantic tags, ARIA
roles, alt text, and proper labels.
19. What are ARIA attributes?
Attributes like aria-label, role enhance accessibility when semantic HTML is insufficient.
20. What is the difference between defer and async in scripts?
defer: Executes after HTML parsing (maintains order).
async: Executes immediately when downloaded (order not guaranteed).
21. What is the DOM?
The Document Object Model is a tree representation of HTML elements that JavaScript can
manipulate.
22. What is lazy loading?
Delays loading of images/iframes until they are visible in the viewport:
<img src="[Link]" loading="lazy">
23. What are void elements?
Elements with no closing tag (e.g., <img>, <br>, <input>).
24. What is the difference between <link> and <a>?
<link> connects external resources (CSS).
<a> creates hyperlinks for navigation.
25. How does HTML impact SEO?
Using semantic tags, proper headings (<h1>), alt text, and metadata improves search engine
ranking and accessibility.