01. Semantic Markup

Introduction

Semantic markup uses HTML elements that convey meaning about the content they contain, rather than just describing how content looks. Semantic HTML helps browsers, search engines, and assistive technologies understand the structure and purpose of content. Using semantic elements improves accessibility, SEO, and code maintainability.

What is Semantic Markup?

Semantic markup uses elements that describe what content is, not just how it appears:

<!-- Semantic: Describes meaning -->
<article>
    <header>
        <h1>Article Title</h1>
    </header>
    <p>Article content...</p>
</article>

<!-- Non-semantic: Only describes appearance -->
<div>
    <div>
        <h1>Article Title</h1>
    </div>
    <p>Article content...</p>
</div>

Benefits of Semantic Markup

Accessibility

Screen readers can navigate semantic structure:

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

SEO

Search engines understand content better:

<article itemscope itemtype="https://schema.org/Article">
    <h1 itemprop="headline">Title</h1>
    <p itemprop="description">Description</p>
</article>

Maintainability

Code is easier to understand and maintain:

<!-- Clear structure -->
<header>Header content</header>
<main>Main content</main>
<footer>Footer content</footer>

Semantic Elements

Structure Elements

<header>: Site or section header
<nav>: Navigation links
<main>: Main content
<article>: Independent content
<section>: Thematic grouping
<aside>: Sidebar content
<footer>: Site or section footer

Text Elements

<h1>-<h6>: Headings
<p>: Paragraphs
<strong>: Important text
<em>: Emphasized text
<blockquote>: Quoted content
<cite>: Citations

Best Practices

Use Semantic Elements

<!-- Good: Semantic -->
<article>
    <header>
        <h1>Title</h1>
    </header>
    <section>
        <h2>Section</h2>
        <p>Content</p>
    </section>
</article>

<!-- Avoid: Non-semantic -->
<div>
    <div>
        <h1>Title</h1>
    </div>
    <div>
        <h2>Section</h2>
        <p>Content</p>
    </div>
</div>

Proper Nesting

Maintain logical structure:

<main>
    <article>
        <header>...</header>
        <section>...</section>
    </article>
</main>