HTML Semantic Elements

HTML semantic elements clearly describe their meaning in a human- and machine-readable way. Using semantic elements helps to create a more accessible, SEO-friendly website.

🗂️ <header>

The <header> element represents a container for introductory content or navigational links. It typically contains the website logo, navigation menus, or a heading.

Example:

<header>
  <h1>Welcome to My Website</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

🦶 <footer>

The <footer> element defines the footer of a webpage or section. It usually contains copyright information, contact details, or links to important pages.

Example:

<footer>
  <p>&copy; 2023 My Website. All rights reserved.</p>
  <nav>
    <ul>
      <li><a href="#privacy">Privacy Policy</a></li>
      <li><a href="#terms">Terms of Service</a></li>
    </ul>
  </nav>
</footer>

🧭 <nav>

The <nav> element is used to define a section that contains links to other pages or parts of the same page.

Example:

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

🛠️ <section>

The <section> element represents a thematic grouping of content, typically with a heading. It is used to divide a webpage into sections.

Example:

<section>
  <h2>About Us</h2>
  <p>We are a company that specializes in web development.</p>
</section>

✍️ <article>

The <article> element is used to define a self-contained piece of content that can be distributed independently. It is suitable for blog posts, news articles, or product descriptions.

Example:

<article>
  <h2>How to Build a Website</h2>
  <p>Building a website involves planning, design, and coding...</p>
</article>

💬 <aside>

The <aside> element represents content that is tangentially related to the content around it. It is often used for sidebars or pull quotes.

Example:

<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="#article1">Article 1</a></li>
    <li><a href="#article2">Article 2</a></li>
  </ul>
</aside>

🔑 <main>

The <main> element is used to encapsulate the main content of the webpage. There should be only one <main> element per page, and it should not contain headers, footers, or sidebars.

Example:

<main>
  <h1>Welcome to Our Website</h1>
  <p>This is the main content area.</p>
</main>

🖼️ <figure> and <figcaption>

The <figure> element is used to group media content (such as images, videos, or illustrations) along with a caption using the <figcaption> element.

Example:

<figure>
  <img src="image.jpg" alt="A beautiful view">
  <figcaption>Beautiful view of the mountains</figcaption>
</figure>

📅 <time>

The <time> element represents a specific time or date, and it can be used to enhance accessibility and SEO.

Example:

<time datetime="2023-05-15">May 15, 2023</time>

📬 <address>

The <address> element is used to define contact information for a person or organization.

Example:

<address>
  <p>Contact us at: <a href="mailto:info@example.com">info@example.com</a></p>
</address>

🧪 Try Yourself

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

📝 Conclusion

Using semantic elements not only improves the accessibility and searchability of your webpages but also provides a more meaningful structure for your content. By using elements like <header>, <footer>, <section>, and <article>, you can enhance both the functionality and readability of your website.

📚 Resources