HTML - Common HTML Semantic Structural Tags

Semantic tags define the structure and purpose of the content, making your code more accessible, SEO-friendly, and easier to maintain.

Common HTML Semantic Structural Tags

<header>
- Represents the top section of a page or a section.
- Typically contains the logo, navigation links, or page title.
- Can be used multiple times (once per page or section).
```
<header>
  <h1>My Website</h1>
  <nav>...</nav>
</header>
```
<footer>
- Represents the bottom section of a page or section.
- Usually includes contact info, copyright, links, or site credits.
```
<footer>
  <p>© 2025 MyWebsite. All rights reserved.</p>
</footer>
```

`<nav>`

Defines a navigation menu with internal or external links.
Helps users and search engines understand your site’s layout.

<nav>

  <ul>

    <li>
<a href="#home">Home</a>
</li>

    <li><
a href="#about">About</a>
</li>

  </ul>

</nav>

<section>
- Defines a logical grouping of content with a common theme.
- Often used to divide content into parts like "Services", "Team", or "Contact".
```
<section>
  <h2>Our Services</h2>
  <p>We offer web design and development.</p>
</section>
```
<article>
- Represents independent content that can be reused or syndicated.
- Commonly used for blog posts, news articles, or forum entries.
```
<article>
  <h2>HTML vs CSS: What's the Difference?</h2>
  <p>HTML structures your site, while CSS styles it...</p>
</article>
```
<aside>
- Contains related or side content, like ads, sidebars, or tips.
- Can be placed inside an article or alongside the main content.
```
<aside>
  <h3>Quick Tip</h3>
  <p>Use semantic tags to improve SEO.</p>
</aside>
```