What does the term "semantics" mean in the context of HTML?
Semantics in HTML is the meaning behind tags. In other words, it's a way to tell the browser, the search engine, and the person what a particular piece of content actually represents, not just how it looks.
In simple terms:
HTML can be used just to "draw" a structure, but semantic HTML describes meaning, not presentation.
Example:
<b>Important!</b>
<strong>Important!</strong>Both will make the text bold, but:
<b>is just visual emphasis (with no meaning),<strong>semantically means "important text" (with meaning).
Browsers, search engines and screen-reading software (for example, for people with visual impairments) understand the difference.
Why semantics matters:
- Improves accessibility: screen readers can announce the structure correctly.
- Improves SEO: search engines better understand where the heading, article, navigation and so on are.
- Makes code easier to maintain: it's easier for a person to navigate a logical structure.
- Simplifies styling: CSS can be applied based on meaningful tags.
Examples of semantic tags
| Semantic tag | Meaning |
|---|---|
<header> | The header of a page or section |
<nav> | A navigation menu |
<main> | The main content of a page |
<article> | A standalone article or post |
<section> | A section of a page |
<aside> | A sidebar, additional content |
<footer> | The footer of a page |
<figure> and <figcaption> | An image and its caption |
<strong>, <em> | Important and emphasized text |
Example:
<header>
<h1>News</h1>
<nav>
<a href="#">Home</a>
<a href="#">Contacts</a>
</nav>
</header>
<main>
<article>
<h2>HTML got even simpler</h2>
<p>Now semantic tags are the standard.</p>
</article>
</main>
<footer>
<p>© 2025 My site</p>
</footer>Non-semantic tags (for comparison)
<div>is just a container with no meaning.<span>is an inline container with no meaning.
They can be used, but only when there is no suitable semantic tag.
Summary:
| Term | Meaning |
|---|---|
| Semantics | The meaningful use of tags to describe the structure and meaning of content |
| Why it matters | So browsers, search engines and users understand the meaning of the page |
| Example | <header> is a header, <article> is an article, <footer> is a footer |
In simple terms: Semantics in HTML is when the code says not only "what it looks like", but also "what it means". It makes a site understandable not only to the eye, but also to the brain, both the browser's and the person's.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.