Semantic HTML and Best Practices

Semantic HTML means using tags that describe the meaning of the content.

Examples

<header>
    <h1>My Website</h1>
</header>
<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content...</p>
    </article>
</main>
<footer>
    <p>© 2025 - All rights reserved</p>
</footer>

Advantages

• Improves SEO.
• Enhances accessibility.
• Makes code easier to maintain.

Best Practices

• Use <section>, <article>, <nav>, and <aside> where appropriate.
• Keep a logical order in your content.

Exercise

Create a page that includes a header, a main area with an article, and a footer.