Set your Publisher ID in src/config/ads.ts to display live ads.
HTML Semantic Elements
Structuring pages for accessibility and SEO ranking
A semantic element clearly describes its meaning to both the browser and the developer. Using semantic tags is fundamental for SEO and screen-reader accessibility.
Why Semantics Matter for Google & AdSense
Non-semantic elements tell nothing about their content: <div> and <span>.
Semantic elements clearly define their content: <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>.
Google crawlers and AdSense bots evaluate semantic markup to understand the primary content vs advertisements vs navigation links.
<header style="background: #333; color: white; padding: 15px; text-align: center;">
<h2>Codexia Academy</h2>
<nav>
<a href="#html" style="color: #4ade80; margin: 0 10px;">HTML</a>
<a href="#css" style="color: #4ade80; margin: 0 10px;">CSS</a>
<a href="#js" style="color: #4ade80; margin: 0 10px;">JavaScript</a>
</nav>
</header>
<main style="padding: 20px;">
<article>
<h2>Semantic Web Development</h2>
<p>Semantic tags boost search engine rankings and screen reader usability.</p>
</article>
</main>
<footer style="background: #eee; padding: 10px; text-align: center;">
<p>© 2026 Codexia. All rights reserved.</p>
</footer>Set your Publisher ID in src/config/ads.ts to display live ads.
Test Yourself With Exercise
Which semantic element is specifically intended to contain the main navigation links of a website?