Semantic Layout Tags
HTML5 introduced semantic elements describing what content they contain. Before HTML5 everything was a <div>. Now we have specific tags that search engines and screen readers understand.
The Semantic Page Blueprint
Example — Full Semantic Page Layout
<body> <header> <h1>CIWeb</h1> <nav> <a href="/">Home</a> <a href="/courses">Courses</a> </nav> </header> <main> <article> <h2>Learn HTML Free</h2> <p>22 lessons, live editor, AI tutor.</p> </article> <aside> <h3>Related Courses</h3> </aside> </main> <footer> <p>© 2025 CIWeb</p> </footer> </body>
Google reads header, main, article, footer to understand your page structure. This directly affects rankings.
time and figure in Practice
Example — time and figure
<!-- time: machine-readable date --> <p>Published <time datetime="2025-01-15"> January 15, 2025 </time> </p> <!-- figure: image with caption --> <figure> <img src="chart.png" alt="Growth chart"/> <figcaption>Student growth 2025</figcaption> </figure>
The datetime attribute gives Google a machine-readable date. You can display any human-friendly format in the text.
Semantic TagsHTML5 Layout
<header>Top of page or section. Logo, navigation, title
<nav>Navigation links. Screen readers can jump to it directly
<main>Primary unique content. Only ONE per page
<article>Self-contained content: blog post, news story, forum reply
<section>Thematic group with its own heading
<aside>Related but secondary content. Sidebar, related posts
<footer>Bottom of page or section. Copyright, contact, links
<figure> <figcaption>Media with its caption. Images, charts, code examples
<time>Machine-readable date. datetime gives Google the exact format
SEO Impact
Google uses semantic tags to understand your page. <article> signals indexable content. <nav> helps Google map your site structure. Semantic HTML is a confirmed Google ranking factor.
div vs Semantic
Ask: does this element have a meaningful role on the page? If yes — there is a semantic tag for it. If you are grouping something purely for CSS styling — use div.
Why It Took 23 Years
HTML5 was finalized in 2014 — 23 years after HTML was invented in 1991. The W3C debated which semantic elements were worth standardizing for over a decade. All major browsers fully support them today.