Why should you use semantic HTML?

Semantic elements communicate a page's structure to browsers, search engines and assistive technologies.

HTML & CSS#html#accessibility

THE ANSWER / PLAIN ENGLISH

The idea to remember.

Semantic elements communicate a page's structure to browsers, search engines and assistive technologies. Choose headings, navigation and interactive controls for their meaning instead of styling everything with div elements.

01Learn by doing

From first example to real project.

Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.

Basic: meaningful markup

01 / BEGINNER

Native HTML elements give browsers and assistive tech useful semantics.

HTML / EXAMPLE

<nav aria-label="Main navigation">
  <a href="/explore/questions">Interview questions</a>
</nav>
<main><h1>React interview guide</h1></main>

Intermediate: responsive CSS

02 / INTERMEDIATE

Use a fluid layout rather than fixed desktop widths.

CSS / EXAMPLE

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.card { min-width: 0; }

Real scenario: accessible search form

03 / REAL SCENARIO

Connect the visible label and the input; communicate updated results.

HTML / EXAMPLE

<form role="search">
  <label for="search">Search questions</label>
  <input id="search" type="search" autocomplete="off" />
</form>
<p role="status" aria-live="polite">24 matching articles</p>

02Check your understanding

Try it in your own words.

Explain why should you use semantic HTML without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.

Keep learning here.

Explore more in-depth guides, exercises and related interview questions in this library.

Browse HTML & CSS study guides ↗

← Back to question library