50 HTML Interview Questions (With Answers)

HTML interviews test semantic markup knowledge, form handling, accessibility, SEO best practices, browser rendering, and HTML5 APIs. This guide covers the 50 most common questions — with concise answers and ready-to-use examples.

Quick reference

Topic	Most asked questions
Basics	DOCTYPE, semantic elements, inline vs block
Semantic HTML	`<article>` vs `<section>`, landmark roles
Forms	input types, validation, `<fieldset>`, `<label>`
Accessibility	ARIA, alt text, keyboard navigation, focus
SEO	meta tags, Open Graph, structured data
HTML5 APIs	localStorage, canvas, geolocation, Web Workers
Performance	lazy loading, preload, async/defer
Modern HTML	custom elements, template, dialog

Basics

1. What is `<!DOCTYPE html>` and why is it needed?

<!DOCTYPE html> is the HTML5 document type declaration. It tells the browser to render the page in standards mode (full standards compliance) instead of quirks mode (legacy IE compatibility).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Page</title>
  </head>
  <body>...</body>
</html>

Without DOCTYPE the browser enters quirks mode — box model, layout, and CSS behaviour differ from the spec.

2. What is the difference between `<head>` and `<body>`?

	`<head>`	`<body>`
Content	Metadata, links, scripts	Visible page content
Visible	No	Yes
Typical children	`<title>`, `<meta>`, `<link>`, `<script>`, `<style>`	Everything users see

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

	Block	Inline
New line	Yes	No
Default width	100% of parent	Content width
Examples	`div`, `p`, `h1–h6`, `ul`, `section`	`span`, `a`, `strong`, `em`, `img`
Can contain	Block + inline	Inline only (mostly)

<img> is technically inline-block by default — it sits inline but respects width/height.

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

	`id`	`class`
Uniqueness	Must be unique per page	Reusable across elements
CSS specificity	Higher (0,1,0,0)	Lower (0,0,1,0)
JS selection	`getElementById`	`getElementsByClassName`
URL anchor	Yes (`#section`)	No

Use id for unique landmarks (skip-navigation targets, URL anchors). Use class for styling.

5. What are `data-*` attributes?

Custom HTML attributes that store extra data without affecting appearance or behaviour. Accessible via dataset in JavaScript.

<button data-user-id="42" data-role="admin">Delete</button>

const btn = document.querySelector('button');
console.log(btn.dataset.userId); // "42"
console.log(btn.dataset.role);   // "admin"

Use data-* instead of non-standard attributes like user-id (which are invalid HTML).

6. What is the difference between HTML elements and HTML attributes?

Element: the tag and its content — <p>Hello</p>
Attribute: additional information added to the opening tag — <p class="intro" id="main">

Attributes have a name and usually a value: name="value". Boolean attributes (like disabled, checked, required) are true when present and false when absent.

7. What does `charset="UTF-8"` do?

It declares the character encoding of the document. UTF-8 covers all Unicode characters (letters, symbols, emoji in all languages).

<meta charset="UTF-8" />

Always place it as the first element in <head> so the browser knows how to decode the page before parsing any other content.

Semantic HTML

8. What is semantic HTML and why does it matter?

Semantic HTML uses elements that describe the meaning of their content, not just their visual appearance.

<!-- Non-semantic -->
<div class="nav">...</div>

<!-- Semantic -->
<nav aria-label="Main navigation">...</nav>

Benefits:

Accessibility — screen readers understand page structure
SEO — search engines better index landmark regions
Maintainability — code is self-documenting
Default styles — browsers apply sensible defaults

9. What is the difference between `<article>` and `<section>`?

	`<article>`	`<section>`
Meaning	Standalone, self-contained content	Thematic grouping of related content
Can stand alone?	Yes (syndicated, shared independently)	No (part of a larger whole)
Examples	Blog post, news item, comment, widget	Chapter, tab panel, feature area

Rule of thumb: if you can imagine it appearing on RSS or a different website unchanged, it's an <article>. If it only makes sense in context, it's a <section>.

10. What is the difference between `<header>`, `<main>`, `<footer>`, and `<aside>`?

<body>
  <header>  <!-- Site/section header: logo, nav --></header>
  <main>    <!-- Primary content (one per page) --></main>
  <aside>   <!-- Related but secondary: sidebar, pull-quote --></aside>
  <footer>  <!-- Site/section footer: copyright, links --></footer>
</body>

<header> and <footer> can appear inside <article> or <section> too — they refer to that element's header/footer, not the page's.

11. When should you use `<div>` vs semantic elements?

Use <div> only when no semantic element fits — pure layout grouping with no meaning.

<!-- Good: semantic -->
<article>
  <header><h2>Post title</h2></header>
  <p>Content</p>
</article>

<!-- Good: div for styling only -->
<div class="card-grid">
  <article>...</article>
  <article>...</article>
</div>

12. What is the purpose of `<figure>` and `<figcaption>`?

<figure> marks self-contained media (image, diagram, code block, quote) that could be moved to an appendix. <figcaption> provides a caption.

<figure>
  <img src="chart.png" alt="Q3 revenue chart showing 15% growth" />
  <figcaption>Figure 1 — Q3 revenue growth compared to Q2.</figcaption>
</figure>

13. What heading hierarchy rules apply to HTML?

One <h1> per page (the page title)
Never skip levels: don't jump from <h2> to <h4>
Headings reflect document outline, not visual styling
Use CSS to style size; don't pick heading level based on size

<h1>Page title</h1>
  <h2>Section</h2>
    <h3>Subsection</h3>
  <h2>Another section</h2>

Forms

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

	`GET`	`POST`
Data location	URL query string	Request body
Length limit	URL limit (~2000 chars)	Virtually unlimited
Bookmarkable	Yes	No
Cached/logged	Yes	No
Use for	Search, filters	Login, file upload, mutations
Safe / idempotent	Yes / Yes	No / No

15. What HTML5 input types are available?

<input type="email"    />  <!-- validates email format -->
<input type="url"      />  <!-- validates URL format -->
<input type="tel"      />  <!-- numeric keyboard on mobile -->
<input type="number"   min="0" max="100" step="5" />
<input type="range"    min="0" max="10" />
<input type="date"     />
<input type="time"     />
<input type="datetime-local" />
<input type="month"    />
<input type="week"     />
<input type="color"    />
<input type="search"   />
<input type="file"     accept=".pdf,image/*" multiple />
<input type="password" />
<input type="checkbox" />
<input type="radio"    />
<input type="hidden"   />

Semantic input types provide built-in validation, mobile keyboard optimisation, and accessible labelling.

16. How does `<label>` improve accessibility?

<label> associates descriptive text with a form control. Clicking the label focuses the input. Screen readers announce the label when the input is focused.

<!-- Implicit association (label wraps input) -->
<label>
  Email
  <input type="email" name="email" />
</label>

<!-- Explicit association (for + id) -->
<label for="username">Username</label>
<input id="username" type="text" name="username" />

Never use placeholder as a substitute for <label> — placeholders disappear when typing and have insufficient colour contrast.

17. What are HTML5 form validation attributes?

<input
  type="email"
  required
  minlength="5"
  maxlength="100"
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
  title="Enter a valid email address"
/>

Attribute	Purpose
`required`	Field must not be empty
`minlength` / `maxlength`	String length range
`min` / `max`	Numeric range
`pattern`	Regex must match
`step`	Numeric increment
`novalidate`	On `<form>`, disables browser validation

18. What is the purpose of `<fieldset>` and `<legend>`?

<fieldset> groups related form controls. <legend> names the group. Essential for radio/checkbox groups.

<fieldset>
  <legend>Preferred contact method</legend>

  <label>
    <input type="radio" name="contact" value="email" /> Email
  </label>
  <label>
    <input type="radio" name="contact" value="phone" /> Phone
  </label>
</fieldset>

Screen readers announce the <legend> text before each control in the group.

19. What is the `autocomplete` attribute?

Controls whether the browser auto-fills saved values. Values follow the autofill detail tokens.

<input type="text"     name="name"    autocomplete="name" />
<input type="email"    name="email"   autocomplete="email" />
<input type="tel"      name="phone"   autocomplete="tel" />
<input type="password" name="current" autocomplete="current-password" />
<input type="password" name="new"     autocomplete="new-password" />

<!-- Disable autofill (e.g., OTP fields) -->
<input type="text" autocomplete="one-time-code" />

20. How do you upload files in HTML?

<form method="POST" enctype="multipart/form-data" action="/upload">
  <label for="avatar">Profile picture</label>
  <input
    id="avatar"
    type="file"
    name="avatar"
    accept="image/png, image/jpeg, image/webp"
    required
  />
  <button type="submit">Upload</button>
</form>

enctype="multipart/form-data" is required — without it the file name is sent, not the content.

Accessibility (A11y)

21. What is ARIA and when should you use it?

ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that add semantic meaning for assistive technologies.

<!-- role — defines what the element is -->
<div role="alert">Payment failed.</div>

<!-- aria-label — names unlabelled controls -->
<button aria-label="Close dialog">×</button>

<!-- aria-describedby — points to a description -->
<input aria-describedby="pwd-hint" type="password" />
<p id="pwd-hint">Must be at least 12 characters.</p>

<!-- aria-expanded — toggle state -->
<button aria-expanded="false" aria-controls="menu">Menu</button>

<!-- aria-hidden — hide decorative elements from AT -->
<span aria-hidden="true">★</span>

First rule of ARIA: use native HTML elements before reaching for ARIA. <button> is better than <div role="button">.

22. What is the `alt` attribute on images?

Provides a text alternative when the image cannot be seen (screen readers, broken image, slow connection).

<!-- Meaningful image — describe what it shows -->
<img src="chart.png" alt="Bar chart showing 40% increase in signups in Q3 2025" />

<!-- Decorative image — empty alt (screen reader skips) -->
<img src="divider.svg" alt="" role="presentation" />

<!-- Functional image (link/button) — describe the action -->
<a href="/home">
  <img src="logo.png" alt="Toolko — back to homepage" />
</a>

Never use alt="image" or alt="photo" — that's meaningless. Never omit alt entirely (triggers accessibility error).

23. What is the `tabindex` attribute?

Controls keyboard focus order.

Value	Behaviour
`tabindex="0"`	Adds element to natural tab order (document order)
`tabindex="-1"`	Focusable via JS (`el.focus()`), not in tab order
`tabindex="1+"`	Explicit order (avoid — creates maintenance problems)

<!-- Make a div focusable for JS-driven focus management -->
<div role="dialog" tabindex="-1" id="modal">...</div>

Use positive tabindex values only as a last resort — they override the natural order and confuse users.

24. What makes a site keyboard accessible?

All interactive elements reachable with Tab
Logical focus order (matches visual layout)
Visible focus indicator (never outline: none without a replacement)
Keyboard shortcuts for custom widgets (arrow keys for menus/sliders)
No keyboard traps (users can Tab out of every component)

<!-- Visible focus style -->
<style>
  :focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
  }
</style>

25. What is `aria-live`?

Announces dynamic content changes to screen readers without focus moving.

<!-- polite: waits for user to finish current action -->
<div aria-live="polite" aria-atomic="true" id="status"></div>

<!-- assertive: interrupts immediately (use sparingly) -->
<div aria-live="assertive" id="error"></div>

document.getElementById('status').textContent = 'Form saved successfully.';

Common uses: search results count, form errors, loading states.

SEO & Meta Tags

26. What are the most important meta tags for SEO?

<head>
  <!-- Required -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Page Title — Site Name (50–60 chars)</title>
  <meta name="description" content="Page description 150–160 chars." />

  <!-- Canonical — prevent duplicate content -->
  <link rel="canonical" href="https://example.com/page/" />

  <!-- Robots -->
  <meta name="robots" content="index, follow" />

  <!-- Language -->
  <html lang="en">
</head>

27. What are Open Graph tags?

Meta tags that control how pages appear when shared on social media (Facebook, LinkedIn, Slack, WhatsApp).

<meta property="og:title"       content="50 HTML Interview Questions" />
<meta property="og:description" content="Top questions with clear answers and examples." />
<meta property="og:image"       content="https://example.com/og-image.png" />
<meta property="og:url"         content="https://example.com/html-interview-questions/" />
<meta property="og:type"        content="article" />

<!-- Twitter Card -->
<meta name="twitter:card"        content="summary_large_image" />
<meta name="twitter:title"       content="50 HTML Interview Questions" />
<meta name="twitter:description" content="Top questions with clear answers and examples." />
<meta name="twitter:image"       content="https://example.com/og-image.png" />

28. What is the `<link rel="canonical">` tag?

Tells search engines which URL is the "master" copy of a page to avoid duplicate content penalties.

<!-- On https://example.com/page?ref=twitter -->
<link rel="canonical" href="https://example.com/page/" />

Common use cases: pagination, UTM parameters, www vs non-www, HTTP vs HTTPS.

29. What is structured data / schema markup?

Machine-readable metadata embedded in HTML that helps search engines understand page content and generate rich results (star ratings, FAQ dropdowns, recipe cards).

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is semantic HTML?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTML that uses elements which describe the meaning of their content."
      }
    }
  ]
}
</script>

30. What does the `viewport` meta tag do?

Controls how the browser scales the page on mobile devices.

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

Without it, mobile browsers render at a desktop viewport width (~980px) then scale down — making text tiny. With it, the viewport width equals the device width, enabling responsive CSS to work correctly.

HTML5 APIs

31. What is the difference between `localStorage` and `sessionStorage`?

	`localStorage`	`sessionStorage`
Scope	Origin	Origin + tab
Persists	Until explicitly cleared	Until tab closes
Size	~5–10 MB	~5 MB
Shared across tabs	Yes	No
Server access	No	No

localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme'); // "dark"
localStorage.removeItem('theme');

// sessionStorage — same API, tab-scoped
sessionStorage.setItem('step', '2');

32. What is the `<canvas>` element used for?

A bitmap drawing surface controlled entirely by JavaScript.

<canvas id="myCanvas" width="400" height="200"></canvas>

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#005fcc';
ctx.fillRect(10, 10, 150, 100);

ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2);
ctx.strokeStyle = 'red';
ctx.stroke();

Use cases: games, charts (Chart.js), image manipulation, generative art.

33. What is the Geolocation API?

Allows web pages to request the user's geographic position.

if ('geolocation' in navigator) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude, accuracy } = position.coords;
      console.log(`${latitude}, ${longitude} ±${accuracy}m`);
    },
    (error) => {
      console.error(error.message);
    },
    { timeout: 10000, enableHighAccuracy: true }
  );
}

Always requires HTTPS. The browser prompts the user for permission.

34. What are Web Workers?

JavaScript that runs in a background thread, separate from the main (UI) thread. Prevents heavy computation from blocking the UI.

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ numbers: [1, 2, 3, 4, 5] });
worker.onmessage = (e) => console.log('Sum:', e.data.sum);

// worker.js
self.onmessage = (e) => {
  const sum = e.data.numbers.reduce((a, b) => a + b, 0);
  self.postMessage({ sum });
};

Workers cannot access the DOM. They communicate via postMessage.

35. What is the `<template>` element?

An inert HTML fragment — parsed but not rendered. Used with JavaScript to clone and insert content dynamically.

<template id="row-tpl">
  <tr>
    <td class="name"></td>
    <td class="score"></td>
  </tr>
</template>

const tpl = document.getElementById('row-tpl');
const row = tpl.content.cloneNode(true);
row.querySelector('.name').textContent = 'Alice';
row.querySelector('.score').textContent = '98';
document.querySelector('tbody').appendChild(row);

36. What is the `<dialog>` element?

A native modal/dialog without JavaScript libraries.

<dialog id="modal">
  <h2>Confirm deletion</h2>
  <p>This cannot be undone.</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Delete</button>
  </form>
</dialog>

const dialog = document.getElementById('modal');
dialog.showModal(); // modal (blocks background interaction)
// dialog.show();   // non-modal

dialog.addEventListener('close', () => {
  console.log(dialog.returnValue); // "cancel" or "confirm"
});

showModal() adds the ::backdrop pseudo-element and traps focus inside automatically.

Performance

37. What is the difference between `async` and `defer` on `<script>`?

<!-- Normal — blocks HTML parsing while downloading + executing -->
<script src="app.js"></script>

<!-- async — downloads in parallel, executes immediately when ready (blocks parsing) -->
<script async src="analytics.js"></script>

<!-- defer — downloads in parallel, executes after HTML parsing completes, in order -->
<script defer src="app.js"></script>

	Normal	`async`	`defer`
Download	Blocks	Parallel	Parallel
Execution	Blocks immediately	Blocks when ready	After parse
Order	Inline	Not guaranteed	Guaranteed
Use for	—	Analytics, ads	All app scripts

Use defer for almost all scripts. Use async for independent third-party scripts where order doesn't matter.

38. What is lazy loading?

Defers loading of non-critical resources until they are near the viewport.

<!-- Images (native browser support) -->
<img src="hero.jpg" loading="eager" alt="..." />  <!-- default -->
<img src="below-fold.jpg" loading="lazy" alt="..." />

<!-- iframes -->
<iframe src="map.html" loading="lazy" title="Location map"></iframe>

Do not lazy-load images in the initial viewport (LCP image) — it delays the largest contentful paint and hurts Core Web Vitals.

39. What is `<link rel="preload">`?

Tells the browser to download a resource early (before it's discovered in CSS/JS parsing).

<!-- Preload LCP image -->
<link rel="preload" as="image" href="hero.webp" />

<!-- Preload critical font -->
<link
  rel="preload"
  as="font"
  href="/fonts/inter.woff2"
  type="font/woff2"
  crossorigin
/>

<!-- Preload CSS -->
<link rel="preload" as="style" href="critical.css" />

crossorigin is required for fonts even from the same origin.

40. What is resource hinting (`preconnect`, `dns-prefetch`)?

<!-- Establish connection (TCP + TLS) early -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- Resolve DNS only (cheaper) -->
<link rel="dns-prefetch" href="https://cdn.example.com" />

Use preconnect for critical third-party origins (Google Fonts, CDNs). Use dns-prefetch as a fallback for browsers that don't support preconnect, or for less-critical origins.

Modern HTML

41. What are custom elements (Web Components)?

Browser-native custom HTML elements with encapsulated logic and styles.

class UserCard extends HTMLElement {
  connectedCallback() {
    const name = this.getAttribute('name') ?? 'Unknown';
    this.innerHTML = `
      <div class="card">
        <strong>${name}</strong>
      </div>
    `;
  }
}

customElements.define('user-card', UserCard);

<user-card name="Alice"></user-card>

Web Components use three specs: Custom Elements, Shadow DOM, HTML Templates.

42. What is Shadow DOM?

An encapsulated DOM subtree attached to an element. Styles inside don't leak out, and external styles don't bleed in.

class MyWidget extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        p { color: navy; }  /* only affects this shadow tree */
      </style>
      <p>Widget content</p>
    `;
  }
}
customElements.define('my-widget', MyWidget);

mode: 'open' exposes element.shadowRoot to JavaScript. mode: 'closed' hides it.

43. What is the `<picture>` element?

Provides multiple image sources. The browser picks the best one based on media queries, format support, or resolution.

<picture>
  <!-- AVIF for browsers that support it -->
  <source type="image/avif" srcset="image.avif" />
  <!-- WebP for browsers that support WebP -->
  <source type="image/webp" srcset="image.webp" />
  <!-- JPEG fallback -->
  <img src="image.jpg" alt="Product photo" width="800" height="600" />
</picture>

For art direction (different crops at different breakpoints):

<picture>
  <source media="(min-width: 800px)" srcset="wide.jpg" />
  <source media="(min-width: 400px)" srcset="medium.jpg" />
  <img src="narrow.jpg" alt="Team photo" />
</picture>

44. What is `srcset` on `<img>`?

Lets the browser pick the right image resolution based on device pixel ratio or viewport width.

<!-- Resolution switching (pixel density) -->
<img
  src="logo.png"
  srcset="logo@2x.png 2x, logo@3x.png 3x"
  alt="Logo"
/>

<!-- Width-based (responsive images) -->
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="..."
/>

sizes tells the browser what rendered size the image will be before the CSS is parsed, enabling the right source to be chosen during preload.

45. What is the `<details>` and `<summary>` element?

Native collapsible disclosure widget — no JavaScript needed.

<details>
  <summary>What is semantic HTML?</summary>
  <p>
    HTML that uses elements describing the meaning of their content,
    rather than purely their visual appearance.
  </p>
</details>

Add open attribute to expand by default:

<details open>
  <summary>Shipping info</summary>
  <p>Free shipping on orders over €50.</p>
</details>

Advanced / Tricky Questions

46. What is the difference between `<b>`, `<strong>`, `<i>`, and `<em>`?

Element	Semantic meaning	Rendered
`<strong>`	Strong importance / seriousness	Bold
`<b>`	Stylistically offset, no importance	Bold
`<em>`	Stress emphasis (changes meaning)	Italic
`<i>`	Alternate voice (term, ship name, thought)	Italic

<!-- em changes meaning based on placement -->
<p><em>I</em> didn't say he took the money.</p>
<p>I didn't <em>say</em> he took the money.</p>

<!-- strong for importance -->
<p><strong>Warning:</strong> data will be deleted permanently.</p>

<!-- i for term definition -->
<p>The CSS property <i>specificity</i> determines which styles win.</p>

47. What is the difference between `<script>`, `<noscript>`, and inline event handlers?

<!-- External script -->
<script src="app.js" defer></script>

<!-- Inline script (avoid — no caching, CSP issues) -->
<script>
  console.log('Hello');
</script>

<!-- Fallback for users with JavaScript disabled -->
<noscript>
  <p>Please enable JavaScript to use this application.</p>
</noscript>

<!-- Inline event handler (avoid — mixing HTML and JS) -->
<button onclick="handleClick()">Click</button>

<!-- Better: addEventListener -->
<button id="btn">Click</button>
<script>
  document.getElementById('btn').addEventListener('click', handleClick);
</script>

48. What are void elements?

HTML elements that cannot have children — they self-close and must not have a closing tag.

<!-- Correct -->
<br>
<hr>
<img src="photo.jpg" alt="..." />
<input type="text" />
<link rel="stylesheet" href="styles.css" />
<meta charset="UTF-8" />

<!-- Wrong — void elements cannot have closing tags -->
<br></br>   <!-- invalid -->

Full list: area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr.

In HTML5 the trailing slash (<br />) is optional but harmless. It is required in XHTML.

49. What is the difference between HTML entities and Unicode characters?

HTML entities encode characters that have special meaning in HTML or are not on the keyboard.

<!-- Named entities -->
&lt;   → <
&gt;   → >
&amp;  → &
&quot; → "
&apos; → '
&nbsp; → non-breaking space
&copy; → ©
&euro; → €

<!-- Numeric (decimal) -->
&#60;  → <

<!-- Numeric (hex) -->
&#x3C; → <

In UTF-8 documents you can use most Unicode characters directly (©, €, →) — entities are only needed for <, >, and & in content, and for " inside attribute values.

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

	`<link>`	`@import`
In	`<head>`	CSS file or `<style>`
Load	Parallel with page parse	Sequential (waits for parent file)
Performance	Better	Worse (render-blocking cascade)
Media queries	Yes (`media` attribute)	Yes (`@import url() screen`)
JS access	Yes (`sheet.disabled`)	Limited

<!-- Preferred -->
<link rel="stylesheet" href="styles.css" />

<!-- Avoid in production CSS -->
<style>
  @import url('reset.css');  /* blocks render */
</style>

Common mistakes

Mistake	Problem	Fix
Omitting `alt` on `<img>`	Accessibility error, broken screen reader	Add `alt=""` for decorative, descriptive text for content images
Multiple `<h1>` on a page	Broken document outline	One `<h1>` per page
`<div>` for everything	No semantic meaning	Use appropriate semantic elements
`<br>` for spacing	Semantically wrong	Use CSS `margin` / `padding`
`<table>` for layout	Not semantic, accessibility issues	Use CSS Grid/Flexbox
`placeholder` instead of `<label>`	Disappears on input, poor contrast	Always use `<label>`
Missing `enctype` on file upload	Sends filename only	Add `enctype="multipart/form-data"`
`onclick="..."` inline handlers	Hard to maintain, CSP violations	Use `addEventListener`

HTML vs XHTML vs HTML5

	HTML 4.01	XHTML 1.0	HTML5
Parser	Lenient	Strict XML	Lenient + error recovery
Self-closing	Optional	Required	Optional
DOCTYPE	Long string	Long string	`<!DOCTYPE html>`
Custom attributes	No	No	`data-*`
Semantic elements	Limited	Limited	Rich (`article`, `section`, `nav`…)
APIs	Limited	Limited	Canvas, WebWorkers, Storage, WS…

HTML5 is the current living standard maintained by WHATWG.

FAQ

Q: How many <main> elements can a page have? One visible <main> per page. Multiple are allowed if the extras have hidden attribute — for single-page apps that swap views.

Q: Is <br> acceptable for line breaks in addresses? Yes — <address> with <br> is correct for postal addresses. Avoid <br> for visual spacing elsewhere.

Q: Should I use HTML5 semantic elements if I need IE 11 support? IE 11 supports most HTML5 elements natively. Add display: block for block semantics in very old IE:

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary { display: block; }

Q: What's the difference between display:none and visibility:hidden and aria-hidden? display:none removes from layout and accessibility tree. visibility:hidden hides visually but keeps layout space; still in accessibility tree. aria-hidden="true" removes from accessibility tree but stays visually visible (for decorative icons, duplicate text).

Q: When should I use <button> vs <a>? <button> for actions (submit, toggle, open dialog). <a> for navigation (changes URL or opens a new page). Never use <a href="#"> for click handlers.

Q: Does HTML order affect SEO? Content order in HTML affects screen readers and can influence SEO (keyword placement). Use CSS order in Flexbox/Grid to change visual order without changing the source order that search engines read.

Quick reference

Basics

1. What is <!DOCTYPE html> and why is it needed?

2. What is the difference between <head> and <body>?

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

4. What is the difference between id and class?

5. What are data-* attributes?

6. What is the difference between HTML elements and HTML attributes?

7. What does charset="UTF-8" do?

Semantic HTML

8. What is semantic HTML and why does it matter?

9. What is the difference between <article> and <section>?

10. What is the difference between <header>, <main>, <footer>, and <aside>?

11. When should you use <div> vs semantic elements?

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

13. What heading hierarchy rules apply to HTML?

Forms

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

15. What HTML5 input types are available?

16. How does <label> improve accessibility?

17. What are HTML5 form validation attributes?

18. What is the purpose of <fieldset> and <legend>?

19. What is the autocomplete attribute?

20. How do you upload files in HTML?

Accessibility (A11y)

21. What is ARIA and when should you use it?

22. What is the alt attribute on images?

23. What is the tabindex attribute?

24. What makes a site keyboard accessible?

25. What is aria-live?

SEO & Meta Tags

26. What are the most important meta tags for SEO?

27. What are Open Graph tags?

28. What is the <link rel="canonical"> tag?

29. What is structured data / schema markup?

30. What does the viewport meta tag do?

HTML5 APIs

31. What is the difference between localStorage and sessionStorage?

32. What is the <canvas> element used for?