Semantic HTML Elements

Semantic HTML uses elements that carry meaning, improving the structure and clarity of the page for both users and machines.

Why Semantics Matter

Semantic elements like <header>, <article>, <footer>, etc., help not only developers and browsers, but also search engines and assistive technologies.

The <header> Element

The <header> element represents an introductory section of a page or a section, usually containing a title, logo, or navigation.

<header>
  <h1>My Website</h1>
  <p>Tagline goes here</p>
</header>

The <nav> Element

The <nav> is used to store navigation links. It explicitly tells browsers and readers that this section serves for navigating within the website.

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

The <main> Element

The <main> represents the main content of the page. It should only be used once per page and must not contain repeating elements like navigation or footer.

The <section> Element

The <section> element defines a logically grouped content area. Each section should ideally include a heading (e.g., <h2>).

<section>
  <h2>News</h2>
  <p>Latest updates and information.</p>
</section>

The <article> Element

The <article> represents a standalone piece of content, such as a blog post or news article. It can also be nested, for example, in comments.

<article>
  <h2>How to Learn HTML</h2>
  <p>This article explains the basics of HTML...</p>
</article>

The <aside> Element

The <aside> is for content related to the main content, but not part of it — such as links, ads, or quotes.

The <footer> Element

The <footer> marks the closing section of a page or segment, often containing copyright info, links, or contact details.

Usage Suggestions

Use semantic tags for all structural purposes, not just <div>s! It improves readability, maintainability, and SEO.