~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/html/7html-semantic

# Semantic HTML

Semantic HTML uses elements that describe their **meaning**, not just their appearance. Instead of generic `<div>` tags, you use elements that tell browsers and screen readers what the content represents.

## Why Semantics Matter

**Accessibility:**
- Screen readers understand page structure
- Users can navigate by landmarks
- Content makes sense without CSS

**SEO:**
- Search engines understand content hierarchy
- Better ranking for important content
- Rich snippets in search results

**Maintainability:**
- Code is easier to read and understand
- Clear structure for other developers
- Less reliance on CSS classes for meaning

## Non-Semantic vs Semantic

```html

<div class="header">
  <div class="nav">
    <div class="nav-item">Home</div>
  </div>
</div>
<div class="content">
  <div class="article">
    <div class="title">My Article</div>
  </div>
</div>
<div class="footer"></div>

<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <article>
    <h1>My Article</h1>
  </article>
</main>
<footer></footer>
```

## Page Structure Elements

### `<header>`

Represents introductory content or navigation:

```html
<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>
```

**Can be used for:**
- Page header
- Article header
- Section header

### `<nav>`

Contains navigation links:

```html
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
```

**Use for:**
- Main navigation
- Table of contents
- Breadcrumbs

### `<main>`

The primary content of the page (only one per page):

```html
<main>
  <h1>Welcome to My Site</h1>
  <p>This is the main content.</p>
</main>
```

### `<article>`

Self-contained content that could be distributed independently:

```html
<article>
  <h2>How to Learn HTML</h2>
  <p>Published: <time datetime="2026-09-01">September 1, 2026</time></p>
  <p>HTML is the foundation of web development...</p>
</article>
```

**Use for:**
- Blog posts
- News articles
- Forum posts
- Product cards

### `<section>`

Groups related content with a heading:

```html
<section>
  <h2>Our Services</h2>
  <p>We offer web development, design, and consulting.</p>
</section>
```

### `<aside>`

Content tangentially related to the main content:

```html
<main>
  <article>
    <h1>Main Article</h1>
    <p>Content here...</p>
  </article>

<aside>
    <h2>Related Articles</h2>
    <ul>
      <li><a href="/other">Other Article</a></li>
    </ul>
  </aside>
</main>
```

**Use for:**
- Sidebars
- Pull quotes
- Advertising
- Related links

### `<footer>`

Footer for a page or section:

```html
<footer>
  <p>&copy; 2026 My Website</p>
  <nav>
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>
```

## Content-Specific Elements

### `<figure>` and `<figcaption>`

For images, diagrams, or code with captions:

```html
<figure>
  <img src="chart.png" alt="Sales chart" />
  <figcaption>Figure 1: Quarterly sales growth</figcaption>
</figure>
```

### `<time>`

Represents a specific date or time:

```html
<p>Published on <time datetime="2026-09-01">September 1, 2026</time></p>
<p>Event starts at <time datetime="14:00">2:00 PM</time></p>
```

### `<mark>`

Represents text that has been highlighted for reference or annotation purposes (like search results):

```html

<p>
  Search results for "HTML semantics":<br />
  Learn how to write <mark>semantic HTML</mark> to improve accessibility.
</p>

<article>
  <p>
    The <mark>key principle</mark> of semantic HTML is using elements
    that describe their meaning, not their appearance.
  </p>
</article>
```

### `<details>` and `<summary>`

Interactive disclosure widget:

```html
<details>
  <summary>Click to expand</summary>
  <p>This content is hidden by default.</p>
</details>
```

## Complete Example

Here's a complete semantic page structure:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Blog</title>
  </head>
  <body>
    <header>
      <h1>My Blog</h1>
      <nav aria-label="Main">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/blog">Blog</a></li>
          <li><a href="/about">About</a></li>
        </ul>
      </nav>
    </header>

<main>
      <article>
        <header>
          <h1>Learning Semantic HTML</h1>
          <p>
            Published on
            <time datetime="2026-09-08">September 8, 2026</time>
          </p>
        </header>

<section>
          <h2>Why Semantics Matter</h2>
          <p>Semantic HTML improves accessibility and SEO...</p>
        </section>

<section>
          <h2>Key Elements</h2>
          <p>Use header, nav, main, article, section, and footer...</p>
        </section>

<aside>
        <h2>Related Posts</h2>
        <ul>
          <li><a href="/css-basics">CSS Basics</a></li>
        </ul>
      </aside>
    </main>

## Common Mistakes

1. **Using div for everything** — Div has no semantic meaning
2. **Missing headings** — Every section should have a heading
3. **Using header for footer** — Use footer for bottom content
4. **Overusing aside** — Only for tangentially related content
5. **Missing main element** — Every page should have one main

No changes yet

cancel