Skip to main content

HTML APIs

on
0

Semantic HTML

on

Semantic HTML: Writing Meaningful and Accessible Markup

Semantic HTML elements structure

Semantic HTML introduces meaning to web pages rather than just presentation. It improves accessibility, SEO, and maintainability.

1. Why Semantic HTML Matters

  • Better accessibility for screen readers
  • Improved SEO (search engines understand content better)
  • Easier to maintain code
  • More consistent across browsers

2. Key Semantic Elements

HTML5 semantic elements visual guide

Page Structure Elements

<header> - Introductory content
<nav> - Navigation links
<main> - Main content
<section> - Thematic grouping
<article> - Self-contained composition
<aside> - Sidebar or related content
<footer> - Footer content

Text-Level Semantics

<time datetime="2023-05-20">May 20</time>
<mark>Highlighted text</mark>
<figure> and <figcaption> - For images with captions

3. Semantic HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Semantic HTML Example</title>
</head>
<body>
    <header>
        <h1>Website Logo</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Blog Post Title</h2>
            <p>Published on <time datetime="2023-05-20">May 20, 2023</time></p>
            
            <section>
                <h3>Introduction</h3>
                <p>This is the introduction to my article.</p>
            </section>
        </article>
    </main>
    
    <footer>
        <p>© 2023 My Website</p>
    </footer>
</body>
</html>

4. Semantic vs Non-Semantic Comparison

Non-Semantic

<div id="header">
  <div class="nav">...</div>
</div>
<div id="main-content">...</div>
<div id="footer">...</div>

Semantic

<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

Using semantic HTML makes your websites more accessible, maintainable, and search-engine friendly!

Comments

Post a Comment