Semantic HTML Interview Questions

Semantic HTML means choosing elements for what the content is, not how it looks: <nav> for navigation, <button> for a button, instead of divs everywhere.

<!DOCTYPE html>
<style>
  body { font-family: system-ui, sans-serif; }
  header, nav, main, aside, footer { border: 1px dashed #94a3b8; margin: 4px 0; padding: 4px 8px; }
</style>
<header>Site name
  <nav><a href="#">Home</a> <a href="#">Courses</a></nav>
</header>
<main>
  <article>
    <h1>Learning HTML</h1>
    <p>An article with its own heading.</p>
  </article>
  <aside>Related links</aside>
</main>
<footer>Contact and copyright</footer>

Screen readers expose these as landmarks to jump between, and native elements bring behavior, such as keyboard support on <button>. See semantic HTML.

<article> is self-contained content that makes sense alone: a blog post, a comment, a product card. <section> is a thematic part of something larger, normally with a heading. The test: could you publish it alone, in a feed?

<article>
  <h1>How to center a div</h1>
  <section><h2>With flexbox</h2>...</section>
  <section><h2>With grid</h2>...</section>
</article>

They nest both ways; a wrapper for styling only is a <div>.

Use <section> for a distinct part of the document with its own heading, and <div> for a styling or layout wrapper.

<section aria-labelledby="pricing-title">
  <h2 id="pricing-title">Pricing</h2>
  <div class="cards">...</div>  <!-- layout wrapper only -->
</section>

A <section> with no heading usually should have been a <div>. A section with an accessible name becomes a region landmark, so do not name every one.

<strong> marks importance (a warning) and <em> marks stress emphasis that changes a sentence's meaning. <b> and <i> set text apart without adding importance: a keyword, a product name, a foreign term.

<!DOCTYPE html>
<p><strong>Warning:</strong> this deletes your account.</p>
<p>I <em>did</em> send the email. (stress changes the meaning)</p>
<p>The <b>Pro plan</b> includes the <i lang="fr">je ne sais quoi</i> you wanted.</p>

They look the same by default. For bold text that is only design, use CSS font-weight.

<main> wraps the content unique to this page, not the header, navigation, sidebar or footer. Screen readers expose it as the main landmark, and skip links point at it. A document has one visible <main>, and it never goes inside <article>, <section>, <aside>, <header>, <footer> or <nav>.

Yes, it is valid, but the usual advice is one <h1> naming the page, then <h2> to <h6> in order. The section-based outline algorithm that would have demoted an <h1> inside a <section> was never implemented, and in 2022 the spec replaced it with an outline built from heading levels, so an <h1> in a <section> is still announced as level 1.

<figure> wraps self-contained content the text refers to (an image, chart, code listing or quote), and <figcaption> captions it as the first or last child.

<!DOCTYPE html>
<figure>
  <svg width="160" height="90" role="img" aria-label="Bar chart">
    <rect x="10" y="50" width="30" height="40" fill="#60a5fa"/>
    <rect x="60" y="25" width="30" height="65" fill="#3b82f6"/>
    <rect x="110" y="5" width="30" height="85" fill="#1d4ed8"/>
  </svg>
  <figcaption>Figure 1: Signups per quarter.</figcaption>
</figure>

The caption does not replace alt on an image inside it: alt describes the image, the caption comments on it.

Use <details> and <summary>: the summary stays visible and toggles the rest, with keyboard and screen reader support built in.

<!DOCTYPE html>
<style>
  details { border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
  summary { cursor: pointer; font-weight: 600; }
</style>
<details name="faq" open>
  <summary>Is the course free?</summary>
  <p>The first lessons are free.</p>
</details>
<details name="faq">
  <summary>Do I need to install anything?</summary>
  <p>No, the code runs in the browser.</p>
</details>

open shows it expanded. In current browsers, several <details> sharing a name are exclusive: opening one closes the others. More on the details page.

<time> marks a date, time or duration, with a machine-readable value in datetime while the visible text stays human-friendly.

<p>Published <time datetime="2026-03-14">14 March 2026</time></p>
<p>Reading time: <time datetime="PT7M">7 minutes</time></p>

Search engines and calendar tools read the exact value. Without datetime, the text itself must be in a valid machine format.

<nav> wraps the main navigation blocks of a page, not every group of links. <aside> holds content related to the main content but not part of it: a sidebar, a pull quote, related posts. <footer> closes its nearest article or section, or the whole page: author, copyright, contact links. At page level screen readers list them as landmarks (navigation, complementary, contentinfo), so users can jump straight to them. See nav.