Semantic HTML & Headings

What is Semantic HTML?

Semantic HTML uses HTML elements that convey meaning about the content they contain.

Importance for SEO

• Helps search engines understand content structure
• Improves accessibility
• Enhances user experience
• Better for screen readers

Semantic HTML Elements

<!-- Header section -->
<header>
    <h1>Website Title</h1>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
        </ul>
    </nav>
</header>

<!-- Main content -->
<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content...</p>
    </article>
</main>

<!-- Footer -->
<footer>
    <p>&copy; 2024 Company Name</p>
</footer>

Heading Structure

Best Practices

• Use only one H1 per page
• Maintain hierarchical order (H1, H2, H3)
• Include keywords in headings
• Make headings descriptive