🎯 What are Semantic Elements?

Semantic HTML elements clearly describe their meaning to both browsers and developers. They make your code more readable and accessible.


<!-- Semantic (meaningful) -->
<header>Page header</header>
<main>Main content</main>

<!-- Non-semantic (no meaning) -->
<div>Page header</div>
<div>Main content</div>

Common Semantic Elements

🏠

<header>

Page or section header

<header>
  <h1>Site Title</h1>
</header>

🧭

<nav>

Navigation links

<nav>
  <a href="home.html">Home</a>
</nav>

📄

<main>

Main page content

<main>
  <h1>Page Title</h1>
</main>

📰

<article>

Independent content

<article>
  <h2>News Story</h2>
</article>

🔹 Basic Page Structure

Here's how to structure a semantic HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Semantic Page</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <a href="home.html">Home</a>
            <a href="about.html">About</a>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Welcome!</h2>
            <p>This is the main content.</p>
        </article>
    </main>
    
    <footer>
        <p>© 2024 My Website</p>
    </footer>
</body>
</html>

Visual Structure:

HEADER

My Website

MAIN

ARTICLE

Welcome!

This is the main content.

FOOTER

🔹 Content Sections

Use these elements to organize your content:

<!-- Section with related content -->
<section>
    <h2>About Us</h2>
    <p>We are a friendly company...</p>
</section>

<!-- Sidebar content -->
<aside>
    <h3>Related Links</h3>
    <ul>
        <li><a href="link1.html">Link 1</a></li>
    </ul>
</aside>

<!-- Figure with caption -->
<figure>
    <img src="chart.jpg" alt="Sales Chart">
    <figcaption>2024 Sales Data</figcaption>
</figure>

HTML Semantics