HTML5 Semantic Elements

Semantic elements describe their meaning, which helps search engines, screen readers and other developers understand the page.

HTML
<body>
    <header>
        <h1>CodeShala</h1>
        <nav><a href="/">Home</a> | <a href="/java">Java</a></nav>
    </header>
    <main>
        <article>
            <h2>Java Loops</h2>
            <section><h3>for loop</h3><p>...</p></section>
        </article>
        <aside>Related tutorials</aside>
    </main>
    <footer>© 2026 CodeShala</footer>
</body>
ElementMeaning
<header>Introductory content or navigation
<nav>A block of navigation links
<main>The main content (one per page)
<article>Self-contained content (a post, a lesson)
<section>A thematic grouping with a heading
<aside>Side content (sidebar)
<footer>Footer information
div vs semantic<div> and <span> have no meaning. Use them only for styling when no semantic element fits.
Track your progress through the HTML course