45 Mins intermediate
7. Semantic HTML5
HTML Architecture
Semantic HTML5
In early web development, every layout was built with hundreds of <div> tags. Google, screen readers, and other developers had no idea which div was the header and which was the footer. HTML5 fixed this with semantic tags — tags whose names describe their purpose.
🏛️ The Generic Div vs Semantic Tags
<!-- Old way: meaningless divs everywhere -->
<div id="header">
<div id="nav">Navigation here</div>
</div>
<div id="main">Main content here</div>
<div id="footer">Footer here</div>
<hr>
<!-- Modern way: semantic HTML5 -->
<header>Page Header</header>
<nav>Navigation</nav>
<main>Main Content</main>
<aside>Sidebar</aside>
<footer>Page Footer</footer>
🗺️ Full Semantic Page Layout
<header style="background:#1a1a2e; color:white; padding:15px;">
<h1>VoidX Blog</h1>
<nav>
<a href="/" style="color:#00A3FF; margin-right:15px;">Home</a>
<a href="/about" style="color:#00A3FF; margin-right:15px;">About</a>
<a href="/contact" style="color:#00A3FF;">Contact</a>
</nav>
</header>
<main style="padding:20px; font-family:sans-serif;">
<article>
<h2>How CSS Grid Changed Web Design</h2>
<p><time datetime="2025-01-15">January 15, 2025</time></p>
<p>CSS Grid is a two-dimensional layout system...</p>
</article>
<aside style="background:#f0f0f0; padding:10px; margin-top:15px;">
<h4>Related Posts</h4>
<ul>
<li>Introduction to Flexbox</li>
<li>CSS Variables Explained</li>
</ul>
</aside>
</main>
<footer style="background:#333; color:white; padding:15px; text-align:center;">
<p>© 2025 VoidX. All rights reserved.</p>
</footer>
Knowledge Check
Ready to test your understanding of 7. Semantic HTML5?