HTML Semantic Elements

What are Semantic Elements?

Semantic elements are HTML tags that clearly describe their content meaning. Using semantic elements makes code more readable and maintainable, while also benefiting SEO and accessibility.

Why Use Semantic Elements?

Improved Readability: Code structure is clearer and easier to understand
SEO Optimization: Search engines can better understand page structure and content
Accessibility: Screen readers can better parse the page
Maintainability: More efficient team collaboration
Future Compatibility: Complies with web standards

HTML5 Semantic Elements

Page Structure Elements

`<header>`

Defines a header for a document or section:

html

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

`<nav>`

Defines a container for navigation links:

html

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

`<main>`

Defines the main content of the document (only one per page):

html

<main>
    <h1>Main Content Title</h1>
    <p>This is the main content area of the page.</p>
</main>

`<article>`

Defines independent, self-contained content:

html

<article>
    <h2>Article Title</h2>
    <p>Published: <time datetime="2024-01-01">January 1, 2024</time></p>
    <p>Article content...</p>
</article>

`<section>`

Defines a section in a document:

html

<section>
    <h2>About Us</h2>
    <p>Company introduction...</p>
</section>

<section>
    <h2>Our Services</h2>
    <p>Service description...</p>
</section>

`<aside>`

Defines sidebar or related content:

html

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

`<footer>`

Defines a footer for a document or section:

html

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

Content Elements

`<figure>` and `<figcaption>`

Defines self-contained content (like images, diagrams) with captions:

html

<figure>
    <img src="image.jpg" alt="Description">
    <figcaption>Image caption text</figcaption>
</figure>

`<time>`

Defines date or time:

html

<p>Published on <time datetime="2024-01-01T10:00">January 1, 2024 at 10:00 AM</time></p>

`<mark>`

Defines highlighted text:

html

<p>This is <mark>important</mark> text.</p>

`<details>` and `<summary>`

Creates expandable/collapsible content:

html

<details>
    <summary>Click to view details</summary>
    <p>Here is the detailed content...</p>
</details>

Complete Page Structure Example

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic HTML Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }
        
        header {
            background-color: #333;
            color: white;
            padding: 1rem;
        }
        
        nav ul {
            list-style: none;
            padding: 0;
        }
        
        nav ul li {
            display: inline;
            margin-right: 20px;
        }
        
        nav a {
            color: white;
            text-decoration: none;
        }
        
        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
        }
        
        article {
            background-color: #f4f4f4;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        aside {
            background-color: #e9e9e9;
            padding: 20px;
        }
        
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1rem;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header>
        <h1>My Blog</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#blog">Blog</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- Main Content -->
    <main>
        <!-- Content Area -->
        <div>
            <article>
                <header>
                    <h2>Article Title</h2>
                    <p>
                        Author: John Doe | 
                        Published: <time datetime="2024-01-01">January 1, 2024</time>
                    </p>
                </header>
                
                <section>
                    <h3>Introduction</h3>
                    <p>This is the introduction section...</p>
                </section>
                
                <section>
                    <h3>Main Content</h3>
                    <p>This is the main content...</p>
                    
                    <figure>
                        <img src="example.jpg" alt="Example image" style="max-width: 100%;">
                        <figcaption>Figure 1: Example image description</figcaption>
                    </figure>
                </section>
                
                <section>
                    <h3>Conclusion</h3>
                    <p>This is the conclusion section...</p>
                </section>
                
                <footer>
                    <p>Tags: <a href="#">HTML</a>, <a href="#">Web Development</a></p>
                </footer>
            </article>
            
            <article>
                <h2>Another Article</h2>
                <p>Article content...</p>
            </article>
        </div>
        
        <!-- Sidebar -->
        <aside>
            <section>
                <h3>About Author</h3>
                <p>Author bio...</p>
            </section>
            
            <section>
                <h3>Popular Posts</h3>
                <ul>
                    <li><a href="#">Post 1</a></li>
                    <li><a href="#">Post 2</a></li>
                    <li><a href="#">Post 3</a></li>
                </ul>
            </section>
            
            <section>
                <h3>Archives</h3>
                <details>
                    <summary>2024</summary>
                    <ul>
                        <li><a href="#">January</a></li>
                        <li><a href="#">February</a></li>
                    </ul>
                </details>
            </section>
        </aside>
    </main>
    
    <!-- Footer -->
    <footer>
        <p>&copy; 2024 My Blog. All rights reserved.</p>
        <nav>
            <a href="#privacy">Privacy Policy</a> | 
            <a href="#terms">Terms of Service</a>
        </nav>
    </footer>
</body>
</html>

Semantic vs Non-Semantic

Non-Semantic (Not Recommended)

html

<div id="header">
    <div id="nav">
        <div class="menu-item">Home</div>
    </div>
</div>
<div id="content">
    <div class="post">
        <div class="title">Article Title</div>
        <div class="text">Article content</div>
    </div>
</div>
<div id="footer">
    <div class="copyright">Copyright info</div>
</div>

Semantic (Recommended)

html

<header>
    <nav>
        <a href="/">Home</a>
    </nav>
</header>
<main>
    <article>
        <h1>Article Title</h1>
        <p>Article content</p>
    </article>
</main>
<footer>
    <p>Copyright info</p>
</footer>

Choosing the Right Tag

When to use `<article>`?

Blog posts
News articles
Forum posts
User comments
Independent widgets

When to use `<section>`?

Document chapters
Tab content
Thematic grouping
Different parts of a page

When to use `<div>`?

Pure styling containers
Grouping without semantic meaning
Layout needs

Best Practices

Prioritize semantic tags: Use semantic tags instead of <div> when possible
Proper nesting: Follow HTML tag nesting rules
One <main> per page: Each page should have only one main content area
Use headings properly: Use <h1> to <h6> to establish clear hierarchy
Add ARIA attributes: Add accessibility attributes when needed
Maintain consistency: Keep consistent structure throughout the website

Accessibility

Semantic tags with ARIA attributes:

html

<nav aria-label="Main navigation">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
    </ul>
</nav>

<main role="main" aria-labelledby="main-heading">
    <h1 id="main-heading">Page Title</h1>
    <p>Content...</p>
</main>

Summary

Using semantic tags is a best practice in modern web development. It not only makes code clearer and more maintainable, but also improves SEO and accessibility. When writing HTML, prioritize semantic tags over simply using <div> and <span>.

HTML Semantic Elements ​

What are Semantic Elements? ​

Why Use Semantic Elements? ​

HTML5 Semantic Elements ​

Page Structure Elements ​

<header> ​

<nav> ​

<main> ​

<article> ​

<section> ​

<aside> ​

<footer> ​

Content Elements ​

<figure> and <figcaption> ​

<time> ​

<mark> ​

<details> and <summary> ​

Complete Page Structure Example ​

Semantic vs Non-Semantic ​

Non-Semantic (Not Recommended) ​

Semantic (Recommended) ​

Choosing the Right Tag ​

When to use <article>? ​

When to use <section>? ​

When to use <div>? ​

Best Practices ​

Accessibility ​

Summary ​

HTML Semantic Elements

What are Semantic Elements?

Why Use Semantic Elements?

HTML5 Semantic Elements

Page Structure Elements

`<header>`

`<nav>`

`<main>`

`<article>`

`<section>`

`<aside>`

`<footer>`

Content Elements

`<figure>` and `<figcaption>`

`<time>`

`<mark>`

`<details>` and `<summary>`

Complete Page Structure Example

Semantic vs Non-Semantic

Non-Semantic (Not Recommended)

Semantic (Recommended)

Choosing the Right Tag

When to use `<article>`?

When to use `<section>`?

When to use `<div>`?

Best Practices

Accessibility

Summary