Summary  
This chapter covers using semantic HTML elements (header, nav, section, article, footer) to clearly define page structure and improve accessibility.

General domain of usage  
Web development

So far, you've learned how to build elements on a web page. Now let's improve how your content is structured and understood.
### What Is Semantic HTML?
Semantic HTML means using elements that clearly describe the purpose of your content.
Instead of using generic containers like `<div>`, you use meaningful tags like:
- `<header>`;
- `<nav>`;
- `<section>`;
- `<article>`;
- `<footer>`.

### Why It Matters
- Helps browsers and developers understand your page structure;
- Improves accessibility (screen readers rely on this);
- Helps search engines better interpret your content.

### `<header>`
Represents the top part of a page or section (logo, title, navigation).
```html
<header>
  <h1>My Website</h1>
</header>
```

### `<nav>`
Defines navigation links.
```html
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>
```

 ### `<section>`
Groups related content.
```html
<section>
  <h2>Services</h2>
  <p>We offer web development...</p>
</section>
```

### `<article>`
Represents standalone content (e.g., blog post).
```html
<article>
  <h2>Blog Post</h2>
  <p>Content goes here...</p>
</article>
```

### `<footer>`
Defines the bottom part of a page.
```html
<footer>
  <p>&copy; My Website</p>
</footer>
```

PGJvZHk+CiAgPGhlYWRlcj4KICAgIDxoMT5NeSBXZWJzaXRlPC9oMT4KICA8L2hlYWRlcj4KCiAgPG5hdj4KICAgIDxhIGhyZWY9IiMiPkhvbWU8L2E+CiAgICA8YSBocmVmPSIjIj5Db250YWN0PC9hPgogIDwvbmF2PgoKICA8c2VjdGlvbj4KICAgIDxoMj5XZWxjb21lPC9oMj4KICAgIDxwPkludHJvIGNvbnRlbnQuLi48L3A+CiAgPC9zZWN0aW9uPgoKICA8YXJ0aWNsZT4KICAgIDxoMj5CbG9nIFBvc3Q8L2gyPgogICAgPHA+UG9zdCBjb250ZW50Li4uPC9wPgogIDwvYXJ0aWNsZT4KCiAgPGZvb3Rlcj4KICAgIDxwPiZjb3B5OyAyMDI2IE15IFdlYnNpdGU8L3A+CiAgPC9mb290ZXI+CjwvYm9keT4=

Don't try to memorize all tags. Focus on understanding **when to use each one**.

Note

Build structured web pages using HTML elements and semantic layout. Work with text, links, images, tables, and forms to create real content. Learn how to organize and structure complete web pages from scratch.

Semantic HTML and Page Structure

What Is Semantic HTML?

Why It Matters

Common Semantic Elements

`<header>`

`<nav>`

`<section>`

`<article>`

`<footer>`

How It Looks Together