Skip to main content

🏗️ Semantic HTML

Write code that's meaningful to both browsers and humans.

What is Semantic HTML?​

Semantic HTML uses tags that convey meaning about the content they contain:

Non-Semantic vs Semantic​

<!-- Non-semantic - no meaning -->
<div>
    <div>HTML Tutorial</div>
    <div>Learn the basics...</div>
</div>

<!-- Semantic - clear meaning -->
<article>
    <h1>HTML Tutorial</h1>
    <p>Learn the basics...</p>
</article>

Document Structure​

Basic Page Layout​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
</head>
<body>
    <header>Header content</header>
    <nav>Navigation</nav>
    <main>Main content</main>
    <aside>Sidebar</aside>
    <footer>Footer</footer>
</body>
</html>

Semantic Tags​

<!-- Page header -->
<header>
    <h1>My Website</h1>
    <p>Welcome to my site</p>
</header>

<!-- Article header -->
<article>
    <header>
        <h2>Article Title</h2>
        <p>By John Doe</p>
    </header>
    <p>Article content...</p>
</article>
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

<!-- Breadcrumb navigation -->
<nav aria-label="breadcrumb">
    <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li>Laptops</li>
    </ol>
</nav>

Main Content​

<main>
    <!-- Primary content of the page -->
    <article>
        <h1>Post Title</h1>
        <p>Post content...</p>
    </article>
</main>

Article​

<article>
    <header>
        <h2>Blog Post Title</h2>
        <time datetime="2024-01-15">January 15, 2024</time>
    </header>
    
    <p>Article introduction...</p>
    <p>Article content...</p>
    
    <footer>
        <p>By <address>John Doe</address></p>
    </footer>
</article>

Section​

<section>
    <h2>Section Title</h2>
    <p>Content of this section...</p>
</section>

<!-- Multiple sections -->
<article>
    <h1>Complete Guide</h1>
    
    <section>
        <h2>Chapter 1: Basics</h2>
        <p>...</p>
    </section>
    
    <section>
        <h2>Chapter 2: Advanced</h2>
        <p>...</p>
    </section>
</article>

Aside​

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

<!-- Side note -->
<p>HTML is the standard markup language.</p>
<aside>
    <p><strong>Note:</strong> HTML stands for HyperText Markup Language</p>
</aside>
<footer>
    <p>&copy; 2024 My Website</p>
    <ul>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Terms</a></li>
    </ul>
</footer>

Text Semantics​

Emphasis & Importance​

<!-- Emphasis (typically italic) -->
<em>This word is emphasized</em>

<!-- Strong emphasis (typically bold) -->
<strong>This is important</strong>

<!-- Citation -->
<cite>The Great Gatsby</cite>

<!-- Keyboard input -->
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save</p>

<!-- Code -->
<p>Use the <code>console.log()</code> function</p>

<!-- Preformatted text -->
<pre>
    x = 5
    y = 10
    z = x + y
</pre>

<!-- Computer output -->
<p>Result: <samp>15</samp></p>

<!-- Variable -->
<p>The variable <var>x</var> equals 5</p>

<!-- Superscript/Subscript -->
<p>H<sub>2</sub>O (water)</p>
<p>E=MC<sup>2</sup></p>

<!-- Deleted/Inserted text -->
<p>The price is <del>$19.99</del> <ins>$14.99</ins></p>

<!-- Marked/Highlighted -->
<p>This is <mark>highlighted</mark> text</p>

Quotations​

<!-- Block quote -->
<blockquote cite="https://example.com">
    <p>This is a longer quote that spans multiple lines.</p>
    <footer>— Author Name</footer>
</blockquote>

<!-- Inline quote -->
<p>She said, <q>It's a wonderful day!</q></p>

<!-- Abbreviation -->
<p><abbr title="HyperText Markup Language">HTML</abbr> is essential</p>

<!-- Definition -->
<p><dfn>HTML</dfn> is the markup language for web pages</p>

Lists​

Unordered List (Semantic)​

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Ordered List (Semantic)​

<ol>
    <li>Learn HTML basics</li>
    <li>Learn CSS styling</li>
    <li>Learn JavaScript</li>
</ol>

Description List (Semantic)​

<dl>
    <dt>HTML</dt>
    <dd>Markup language for creating web pages</dd>
    
    <dt>CSS</dt>
    <dd>Language for styling web pages</dd>
    
    <dt>JavaScript</dt>
    <dd>Programming language for interactive behavior</dd>
</dl>

Structured Data​

Time​

<!-- Readable date -->
<time datetime="2024-01-15">January 15, 2024</time>

<!-- Date and time -->
<time datetime="2024-01-15T14:30:00">January 15, 2024 at 2:30 PM</time>

<!-- Duration -->
<time>1 hour and 30 minutes</time>

<!-- In context -->
<article>
    <h2>Post Title</h2>
    <p>Posted on <time datetime="2024-01-15">Jan 15</time></p>
</article>

Address​

<!-- Contact information -->
<address>
    <p>John Doe</p>
    <p>123 Main Street</p>
    <p>New York, NY 10001</p>
    <p><a href="mailto:john@example.com">john@example.com</a></p>
</address>

<!-- Author information -->
<article>
    <h2>Article Title</h2>
    <p>Written by <address>John Doe</address></p>
</article>

Complete Semantic Example​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog - My Website</title>
</head>
<body>
    <!-- Header -->
    <header>
        <h1>My Tech Blog</h1>
        <p>Learning web development</p>
    </header>
    
    <!-- Navigation -->
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/blog">Blog</a></li>
            <li><a href="/about">About</a></li>
        </ul>
    </nav>
    
    <!-- Main Content -->
    <main>
        <article>
            <header>
                <h1>Getting Started with HTML</h1>
                <p>By <address>John Doe</address></p>
                <time datetime="2024-01-15">January 15, 2024</time>
            </header>
            
            <section>
                <h2>Introduction</h2>
                <p>HTML is the foundation of the web...</p>
            </section>
            
            <section>
                <h2>Basic Elements</h2>
                <p>Every HTML document starts with...</p>
            </section>
            
            <footer>
                <p>Thanks for reading! <a href="#comments">See comments</a></p>
            </footer>
        </article>
    </main>
    
    <!-- Sidebar -->
    <aside>
        <h3>Related Articles</h3>
        <ul>
            <li><a href="#">CSS Basics</a></li>
            <li><a href="#">JavaScript Intro</a></li>
        </ul>
    </aside>
    
    <!-- Footer -->
    <footer>
        <p>&copy; 2024 My Tech Blog</p>
        <nav>
            <ul>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Terms</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

Semantic vs Non-Semantic Comparison​

Use CaseSemanticNon-Semantic
Main heading<h1><div class="heading">
Page navigation<nav><div class="menu">
Article<article><div class="post">
Section<section><div class="section">
Important text<strong><span style="font-weight: bold">
Emphasized text<em><i> or <span style="font-style: italic">

Benefits of Semantic HTML​

✅ Accessibility: Screen readers understand structure ✅ SEO: Search engines understand content meaning ✅ Maintainability: Code is easier to read and understand ✅ Consistency: Standard tags work across browsers ✅ Future-proof: Built on web standards ✅ Mobile-friendly: Better responsive design support

Best Practices​

✅ DO:

  • Use semantic tags for their intended purpose
  • Use headings in order (h1 → h2 → h3)
  • Use <nav> for navigation links
  • Use <section> to group related content
  • Use <article> for self-contained content
  • Use <footer> for page footers

❌ DON'T:

  • Use <div> for everything
  • Nest sections incorrectly
  • Skip heading levels (h1 → h3)
  • Use semantic tags just for styling
  • Ignore accessibility concerns

Next Steps​

→ HTML Attributes → Advanced HTML → Forms & Inputs