Top 30 HTML Interview Questions & Answers

Basic HTML Questions

1. What is HTML?

Answer: HTML (HyperText Markup Language) is the standard markup language used to create and structure content on the web. It uses tags to define elements like headings, paragraphs, links, and images.

2. What are HTML tags and elements?

Answer: HTML tags are the building blocks of HTML, enclosed in angle brackets (e.g., <p>). An HTML element consists of an opening tag, content, and a closing tag (e.g., <p>Content</p>). Some tags are self-closing (void elements) like <img>.

3. What is the difference between <div> and <span>?

Answer:

• <div> is a block-level element used to group other elements for styling/layout

• <span> is an inline element used to style or manipulate part of text within a block element

4. What are semantic HTML elements?

Answer: Semantic elements clearly describe their meaning to both browser and developer. Examples: <header>, <nav>, <main>, <article>, <section>, <footer>, <aside>, <figure>, <figcaption>.

5. What is the purpose of the DOCTYPE declaration?

Answer: <!DOCTYPE html> tells the browser which version of HTML the document is using. It ensures the browser renders the page in standards mode rather than quirks mode.

Intermediate HTML Questions

6. Explain the difference between id and class attributes

Answer:

• id is unique within a page (should be used only once per element)

• class can be used on multiple elements and an element can have multiple classes

• id has higher CSS specificity than class

7. What are void elements in HTML?

Answer: Void elements are tags that don't require a closing tag and can't contain content. Examples: <br>, <hr>, <img>, <input>, <meta>, <link>.

8. What is the difference between <strong> and <b> tags?

Answer:

• <strong> indicates importance and is semantic (typically renders as bold)

• <b> is for stylistic bold without semantic importance

• Screen readers emphasize <strong> content but not <b> content

9. How does the data-* attribute work?

Answer: data-* attributes allow storing custom data private to the page/application. They can be accessed via JavaScript using element.dataset.

html

<div data-user-id="123" data-role="admin"></div>

10. What is the purpose of the alt attribute in images?

Answer:

• Provides alternative text for screen readers

• Displays when image fails to load

• Helps with SEO

• Required for accessibility compliance

Advanced HTML Questions

11. Explain the difference between defer and async in <script> tags

Answer:

• async: Downloads script asynchronously and executes immediately when ready (order not guaranteed)

• defer: Downloads asynchronously but executes after HTML parsing is complete (maintains order)

• Neither: Blocks HTML parsing until script downloads and executes

12. What are HTML web workers?

Answer: Web workers allow running JavaScript in background threads separate from the main execution thread, preventing UI blocking during heavy computations.

13. What is the purpose of the <canvas> element?

Answer: <canvas> provides a drawing surface for dynamically rendering graphics, charts, games, etc., using JavaScript. It's pixel-based and requires scripting for functionality.

14. What is the difference between localStorage and sessionStorage?

Answer:

• localStorage: Persistent across browser sessions, 5-10MB limit

• sessionStorage: Cleared when tab/window closes, 5-10MB limit
  Both store key-value pairs and are accessible only via JavaScript from the same origin.

15. What is the <template> tag used for?

Answer: <template> holds HTML content that isn't rendered immediately but can be instantiated later using JavaScript. Useful for reusable UI components.

HTML5 Specific Questions

16. What new input types were introduced in HTML5?

Answer: email, url, tel, number, range, date, month, week, time, datetime-local, color, search.

17. What are HTML5 APIs you've worked with?

Answer: Common HTML5 APIs include:

• Geolocation: Access user's location

• Drag & Drop: Native drag-and-drop functionality

• Web Storage: localStorage/sessionStorage

• Web Workers: Background scripting

• Server-Sent Events: One-way server to client updates

• Canvas & SVG: Graphics rendering

18. What is the difference between <svg> and <canvas>?

Answer:

• SVG: Vector-based, DOM accessible, better for interactive graphics, scales without quality loss

• Canvas: Pixel-based, better for complex animations/games, not accessible via DOM

19. What is the purpose of the <figure> and <figcaption> elements?

Answer: <figure> represents self-contained content like images, diagrams, or code snippets. <figcaption> provides a caption/legend for the <figure> content.

20. What are web components?

Answer: Web components are a set of web platform APIs allowing creation of reusable custom elements with encapsulated functionality, using:

• Custom Elements

• Shadow DOM

• HTML Templates

• ES Modules

Accessibility & SEO Questions

21. How do you make a website accessible?

Answer:

• Use semantic HTML elements

• Provide alt text for images

• Ensure proper heading hierarchy

• Use ARIA attributes when needed

• Ensure keyboard navigability

• Maintain sufficient color contrast

• Provide text alternatives for multimedia

22. What are ARIA attributes and when should you use them?

Answer: ARIA (Accessible Rich Internet Applications) attributes enhance accessibility when semantic HTML isn't sufficient. Examples: aria-label, aria-describedby, aria-hidden, role. Use when native HTML elements can't convey the necessary semantics.

23. What is the importance of rel="noopener noreferrer"?

Answer: Used with target="_blank" links to prevent security vulnerabilities (tabnabbing) where the new page could access the window.opener object of the original page.

24. How does HTML affect SEO?

Answer:

• Semantic markup helps search engines understand content

• Proper heading hierarchy (h1-h6)

• Descriptive title and meta description

• Image alt attributes

• Structured data using Schema.org

• Clean, valid HTML code

25. What is the viewport meta tag?

Answer:

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Controls layout on mobile browsers by setting the viewport width to device width and initial zoom level.

Forms & Media Questions

26. What's the difference between GET and POST methods?

Answer:

• GET: Requests data, parameters in URL, limited length, cacheable, should be idempotent

• POST: Submits data to be processed, parameters in request body, no length limit, not cacheable

27. What is the purpose of the required attribute in form fields?

Answer: The required attribute specifies that a form field must be filled out before submitting the form. It provides native browser validation.

28. What is the difference between <iframe>, <embed>, and <object>?

Answer:

• <iframe>: Embeds another HTML page

• <embed>: Plugin content (deprecated in favor of modern approaches)

• <object>: Generic embedded content (PDF, Flash, etc.)

29. What are the advantages of using <picture> over <img>?

Answer: <picture> provides art direction and responsive images, allowing different images for different viewport sizes using <source> elements with media queries.

30. How do you optimize website loading performance in HTML?

Answer:

• Place scripts at bottom or use defer/async

• Minimize HTML/CSS/JS

• Use responsive images with srcset

• Implement lazy loading for images/iframes

• Use semantic HTML for faster parsing

• Minimize DOM depth

• Use CDN for static resources