HTML Semantic Elements: Meaningful Document Structure

HTML Semantic Elements

Semantic elements provide meaning to the structure of web documents, improving accessibility and SEO.

Page Structure Elements

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

<main>
    <article>
        <header>
            <h2>Article Title</h2>
            <time datetime="2024-01-15">January 15, 2024</time>
        </header>
        <p>Article content...</p>
    </article>
    
    <aside>
        <h3>Related Links</h3>
        <ul>
            <li><a href="#">Related Article 1</a></li>
        </ul>
    </aside>
</main>

<footer>
    <p>© 2024 Website Name</p>
</footer>

Content Sectioning

<section>
    <h2>Introduction</h2>
    <p>This section introduces the topic...</p>
</section>

<section>
    <h2>Main Content</h2>
    <article>
        <h3>Subsection</h3>
        <p>Detailed content here...</p>
    </article>
</section>

Text-Level Semantics

<p>The <abbr title="World Wide Web">WWW</abbr> was invented by 
<cite>Tim Berners-Lee</cite> in <time datetime="1989">1989</time>.</p>

<blockquote cite="https://example.com">
    <p>This is a quoted text from another source.</p>
</blockquote>

<p>Press <kbd>Ctrl+C</kbd> to copy.</p>
<p>The result is <samp>Hello World</samp>.</p>
<p>Use the <code>console.log()</code> function.</p>

Benefits of Semantic HTML

• Better accessibility for screen readers
• Improved SEO rankings
• Cleaner, more maintainable code
• Better browser understanding