HTML Interview Questions

Study Method: Cover the answer, read the question, try to answer it out loud, then reveal and compare. This active recall technique is far more effective than passive reading.

Fundamentals

1. What is the difference between HTML elements and HTML tags?

A tag is the actual markup you type: <p> (opening) and </p> (closing). An element is the combination of the opening tag, any content, and the closing tag — the complete entity as it appears in the DOM. For example, <p>Hello</p> is an element; <p> is a tag.

2. What is the purpose of the DOCTYPE declaration?

<!DOCTYPE html> tells the browser which version of HTML the document uses. Without it, browsers enter "quirks mode" — trying to emulate old, non-standard behaviour from the 1990s. <!DOCTYPE html> is the HTML5 declaration and triggers "standards mode" in all modern browsers.

3. What is the difference between block-level and inline elements?

Block-level elements (e.g. <div>, <p>, <h1>) start on a new line and take up the full available width. Inline elements (e.g. <span>, <a>, <strong>) flow within text, only taking up as much width as their content. Note: this is the default behaviour; CSS can change any element's display type.

4. What are void elements? Give examples.

Void elements are HTML elements that cannot have any content — they are self-closing. They have an opening tag but no closing tag. Examples: <img>, <input>, <br>, <hr>, <link>, <meta>. In HTML5, the trailing slash (<br />) is optional.

5. What is the difference between `id` and `class`?

An id must be unique — only one element on the page should have a given id. A class can be applied to multiple elements, and an element can have multiple classes. In CSS, #id has higher specificity than .class. In JavaScript, getElementById() returns a single element, while getElementsByClassName() returns a collection.

6. What are data attributes?

Data attributes (data-*) let you store custom data directly on HTML elements. They are prefixed with data- followed by any name of your choice. They are useful for storing state or metadata that JavaScript needs to read. Access them in JavaScript via element.dataset.name.

<button data-product-id="42" data-action="add-to-cart">Add</button>

// JavaScript:
btn.dataset.productId  // "42"
btn.dataset.action     // "add-to-cart"

Semantic HTML

7. What is semantic HTML and why is it important?

Semantic HTML uses elements that describe their content's meaning rather than just its appearance. For example, <nav> describes navigation, <article> describes independent content, <header> describes a page or section header. It matters for three reasons: accessibility (screen readers use semantics to navigate), SEO (search engines understand the content structure), and maintainability (developers understand the code's purpose).

8. What is the difference between `<section>`, `<article>`, and `<div>`?

<article> — independent, self-contained content that could stand alone (blog post, news story, comment).
<section> — a thematic grouping of content, usually with a heading. Not self-contained.
<div> — a generic container with no semantic meaning. Use it only when no semantic element fits.

9. What is the purpose of `<main>`?

The <main> element wraps the primary content of the page — the content that is unique to this page, not repeated across pages (like navigation and footers). There should be only one <main> per page. Screen readers use it to skip directly to the main content.

10. When should you use `<button>` vs `<a>`?

Use <button> for actions that happen on the current page (submit a form, open a modal, toggle something). Use <a> for navigation — going to a different page or a different location on the same page. The distinction matters for accessibility: screen reader users and keyboard users rely on this semantic difference to understand what will happen when they activate an element.

Forms

11. What is the difference between GET and POST in forms?

GET appends form data to the URL as query parameters (?name=value). It should be used for searches — data is visible in the URL, bookmarkable, and cached. POST sends data in the request body, not the URL. Use POST for login forms, data submission, or any action that modifies data on the server — the data is not visible in the URL and not cached.

12. What is the purpose of the `<label>` element?

Labels associate a text description with a form control. When a label is clicked, the focus moves to its associated input. This is critical for accessibility — screen readers read the label aloud when an input receives focus. Associate a label using for="input-id" matching the input's id, or by wrapping the input inside the label.

13. What HTML attributes help with form validation?

HTML5 provides built-in validation attributes: required, minlength/maxlength, min/max, pattern (a regex), type="email", type="url". The browser shows a validation message and prevents submission if constraints are not met — without any JavaScript.

14. What is the difference between `name` and `id` on an input?

name is used by the browser when submitting the form — it is the key in the key/value pair sent to the server. id is used by CSS and JavaScript to reference the element. A label's for attribute matches the input's id, not its name. In most cases, both attributes are present with the same value.

Accessibility

15. What are ARIA attributes? When should you use them?

ARIA (Accessible Rich Internet Applications) attributes add semantic information that HTML alone cannot express. Common examples: aria-label (provides a text label for elements with no visible text), aria-hidden="true" (hides decorative elements from screen readers), aria-expanded (indicates whether a dropdown is open). The rule: use native HTML first. Only reach for ARIA when there is no semantic HTML element that conveys the same meaning.

16. What does "alt text" on an image do?

The alt attribute provides a text alternative for images. Screen readers read the alt text aloud. If the image fails to load, the alt text is displayed instead. Informative images should have descriptive alt text. Decorative images (purely visual, no information) should have an empty alt: alt="" — this tells screen readers to skip the image entirely. Never omit the alt attribute entirely.

17. What is the purpose of the `tabindex` attribute?

tabindex controls keyboard focus behaviour. tabindex="0" adds an element to the natural tab order. tabindex="-1" makes an element focusable by JavaScript but removes it from the tab order (useful for modal focus management). Positive values (tabindex="1", tabindex="2") set a custom tab order — avoid these as they create confusing navigation.

18. What is a skip navigation link?

A "skip to main content" link at the very top of the page allows keyboard and screen reader users to bypass the navigation and jump directly to the main content. It is usually visually hidden until focused. This prevents users having to tab through every navigation item on every page.

<a href="#main-content" class="skip-link">Skip to main content</a>
...
<main id="main-content">...</main>

Performance & Meta

19. What does the viewport meta tag do?

<meta name="viewport" content="width=device-width, initial-scale=1.0"> tells the browser to set the viewport width to the device's physical width and not to zoom in/out on load. Without it, mobile browsers render the page at a desktop width and scale it down — making text tiny and requiring pinch-to-zoom. This is required for any responsive design.

20. What is the difference between `<script>` at the end of `<body>` vs `defer`?

Placing <script> at the end of <body> means the HTML is fully parsed before the script downloads and runs. The defer attribute (<script src="..." defer>) does the same but allows the script to be placed in <head> — the browser downloads it in parallel with parsing the HTML and executes it after parsing is complete. defer is generally the better approach as it starts the download earlier.

21. What is the difference between `defer` and `async`?

Both download the script without blocking HTML parsing. The difference is when they execute: defer scripts execute in order after HTML is fully parsed. async scripts execute as soon as they finish downloading — immediately, potentially before the DOM is ready, and in whatever order they finish. Use defer for most scripts. Use async only for fully independent scripts like analytics.

22. What is the `rel="noopener noreferrer"` attribute on links?

When opening a link in a new tab (target="_blank"), the new page has access to the opener's window object via window.opener — a security risk. rel="noopener" prevents this. rel="noreferrer" additionally prevents the Referer header from being sent, hiding the origin page from the linked site. Always use both on external links with target="_blank".

Advanced

23. What is the difference between the DOM and HTML?

HTML is the text markup you write in a file. The DOM (Document Object Model) is the browser's in-memory tree representation of that markup, created after parsing. The DOM is what JavaScript interacts with. The DOM can be different from the HTML — JavaScript can add elements to the DOM that were never in the HTML file.

24. What is the difference between `<link>` and `@import` for CSS?

<link rel="stylesheet" href="..."> in HTML loads the CSS file in parallel with other resources. @import url("..."); inside a CSS file is blocking — it must finish loading before the rest of the CSS file is processed. <link> is faster and should always be preferred.

25. What is the `picture` element used for?

The <picture> element provides multiple source images and lets the browser pick the most appropriate one — based on viewport size, screen density, or format support. This enables responsive images and modern format delivery (e.g. serving WebP to browsers that support it, JPEG as a fallback).

<picture>
  <source srcset="hero.webp" type="image/webp">
  <source srcset="hero@2x.jpg" media="(min-width: 800px)">
  <img src="hero.jpg" alt="Hero image">
</picture>