lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroHtmlChapter2Title

webIntroHtmlChapter1Title

webIntroHtmlChapter3Title

webIntroHtmlChapter4Title

# Semantic Tags

The use of `semantic` tags in an HTML document allows you to clearly convey the meaning of content.

Semantic means “having meaning.” It helps to distinctly define which parts are the `header`, `main`, `footer`, etc.

Using semantic tags helps clearly communicate the meaning of a page to web search engines, aiding in Search Engine Optimization (SEO), and enhances web accessibility.

The main semantic tags are as follows.

<br />

## `<header>` Tag

The `<header>` tag is for the header section of a web page, displaying the logo, navigation menu, company name, and more at the top of the webpage.

<br />

### Example

```html title="Example of header tag"
<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
```

<br />

## `<footer>` Tag

The `<footer>` tag is for the footer section of a webpage, indicating what goes at the bottom, such as copyright information, link relations, and author info.

<br />

### Example

```html title="Example of footer tag"
<footer>
  <p>&copy; 2023 My Website. All rights reserved.</p>
  <nav>
    <ul>
      <li><a href="#">Privacy Policy</a></li>
      <li><a href="#">Terms of Service</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</footer>
```

<br />

<br />

## `<nav>` Tag

The `<nav>` tag displays the links to navigate to other pages and typically appears within the header.

<br />

### Example

```html title="Example of nav tag"
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>
```

<br />

## `<section>` Tag

The `<section>` tag is used for grouping specific content under a theme or topic.

For example, contact sections, about sections, or news sections on a webpage can be indicated with a `<section>` tag.

<br />

### Example

```html title="Example of section tag"
<section id="about">
  <h2>About Us</h2>
  <p>Welcome to our webpage!</p>
</section>
```

<br />

## `<article>` Tag

The `<article>` tag defines a section that can be independently read or reused. This tag is suitable for blog posts, news stories, user comments, etc.

<br />

### Example

```html title="Example of article tag"
<article>
  <h2>Event News</h2>
  <p>Here is information on upcoming events.</p>
</article>
```

<br />

## `<main>` Tag

The `<main>` tag defines the main content of a webpage.

<br />

### Example

```html title="Example of main tag"
<main>
  <h1>Welcome!</h1>
  <p>Thank you for visiting our webpage.</p>
</main>
```

<br />

## `<aside>` Tag

The `<aside>` tag is used for additional content that is related to the main content. This typically includes sidebars to the right or left of the main content, providing supplementary information and related links.

<br />

### Example

```html title="Example of aside tag"
<aside>
  <h2>Announcements</h2>
  <p>Check out the events!</p>
  <div>
    <a href="#">Learn more about the event</a>
  </div>
</aside>
```

Utilizing semantic tags allows for a clear representation of the page's structure and the meaning of its content, which can be better understood by search engines. This contributes to search engine optimization (SEO) and enhances web accessibility.

### Using semantic tags can clearly convey the meaning of the page to web search engines.

Semantic Tags

<header> Tag

Example

<footer> Tag

Example

<nav> Tag

Example

<section> Tag

Example

<article> Tag

Example

<main> Tag

Example

<aside> Tag

Example

Using semantic tags can clearly convey the meaning of the page to web search engines.

`<header>` Tag

`<footer>` Tag

`<nav>` Tag

`<section>` Tag

`<article>` Tag

`<main>` Tag

`<aside>` Tag