Core Semantic Elements of HTML

Semantic HTML elements help define the structure and meaning of web content, making it more readable and accessible. These core elements provide clear and descriptive meanings, improving both the usability of web pages and their SEO performance. Below are some key semantic elements and their uses:

<header>: Defining the Header Section

The <header> element represents introductory content or a set of navigational links for a section or page. It typically contains headings, logo, or introductory text.

Example:

<header>
  <h1>Website Title</h1>
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
  </nav>
</header>

<nav>: Creating Navigation Links

The <nav> element is used to define a set of navigation links. It helps users find their way around the website and is usually placed within the <header> or <footer> elements.

Example:

<nav>
  <a href="#home">Home</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</nav>

<main>: Defining the Main Content

The <main> element represents the dominant content of the <body> of the document. It should be unique to the page and should not include repeated content like headers or footers.

Example:

<main>
  <h2>Main Content Area</h2>
  <p>This is where the primary content of the page goes.</p>
</main>

<section>: Grouping Related Content

The <section> element represents a thematic grouping of content, typically with its own heading. It is useful for dividing the content into distinct sections within the main content area.

Example:

<section>
  <h2>About Us</h2>
  <p>Information about the company or organization.</p>
</section>

<article>: Defining Self-contained Content

The <article> element represents a self-contained piece of content that can be independently distributed or reused, such as a news article, blog post, or forum post.

Example:

<article>
  <h2>Article Title</h2>
  <p>The content of the article goes here.</p>
</article>

<aside>: Sidebar or Additional Content

The <aside> element represents content that is tangentially related to the content around it, often used for sidebars or additional information.

Example:

<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="#link1">Link 1</a></li>
    <li><a href="#link2">Link 2</a></li>
  </ul>
</aside>

<footer>: Footer Information

The <footer> element represents the footer for a section or page, typically including information such as author details, copyright notices, or related links.

Example:

<footer>
  <p>© 2024 Company Name. All rights reserved.</p>
</footer>