Suggest an edit

Improve this article

Refine the answer for “What does the term "semantics" mean in the context of HTML?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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:

```html
<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:

1. **Improves accessibility**: screen readers can announce the structure correctly.
2. **Improves SEO**: search engines better understand where the heading, article, navigation and so on are.
3. **Makes code easier to maintain**: it's easier for a person to navigate a logical structure.
4. **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:

```html
<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.**

Markdown · drag & drop images · ⌘B / ⌘I shortcuts430 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.