HTML — Lesson 6
Semantic HTML
Using meaningful tags for better structure and SEO.
Semantic HTML
Semantic HTML means using tags that describe their meaning and purpose, not just their appearance.
Why Semantic HTML?
- Accessibility: Screen readers use semantic tags to navigate
- SEO: Search engines understand your content better
- Maintainability: Code is easier to read and understand
Semantic Layout Elements
<header> <!-- Page or section header -->
<nav> <!-- Navigation menu -->
<main> <!-- Main content (use once per page) -->
<section> <!-- Thematic group of content -->
<article> <!-- Self-contained content (blog post, news) -->
<aside> <!-- Sidebar or tangential content -->
<footer> <!-- Page or section footer -->
Semantic HTML Page Structure
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Blog Post Title</h2>
<p>Article content here...</p>
</article>
<aside>
<h3>Related Posts</h3>
<ul>
<li>Post 1</li>
<li>Post 2</li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 My Website</p>
</footer>
</body>
Non-Semantic vs Semantic
<!-- Bad: non-semantic divs -->
<div class="header">...</div>
<div class="nav">...</div>
<!-- Good: semantic tags -->
<header>...</header>
<nav>...</nav>
Tip: Use semantic HTML by default. Only use
<div> when no semantic element fits, typically for styling wrappers.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →