YouTip

HTML5 Semantic Elements

Semantic elements clearly describe their meaning to both browser and developer.

<header>Page header</header>
<nav>Navigation links</nav>
<main>
    <article>
        <section>
            <h2>Section Title</h2>
            <p>Content here</p>
        </section>
    </article>
    <aside>Sidebar content</aside>
</main>
<footer>Page footer</footer>

Why Semantic?

• Improves accessibility (screen readers)
• Better SEO (search engines understand structure)
• Easier to read and maintain

Other Semantic Tags

figure, figcaption, mark, time, details, summary, dialog

Summary

• Semantic tags replace meaningless div elements
• They improve accessibility and SEO
• Common: header, nav, main, article, section, aside, footer