Practical Exercise 17: HTML Blog Structure
Learn how to use the article, header, footer, and section tags in HTML to structure and style a blog. How to structure a blog correctly and simply.
Activity
Create a basic blog structure using the tags <article>, <header>, <footer>, and <section>.
Interactive Solution
Solution with complete HTML code
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Blog</title>
</head>
<body>
<article>
<header>
<h1>Título del Blog</h1>
<p>Publicado el 30 de mayo de 2024</p>
</header>
<section>
<p>Este es el contenido del artículo del blog.</p>
</section>
<footer>
<p>Autor: Gabriel Maza</p>
</footer>
</article>
</body>
</html>
Variants of the Same Exercise
Variant 1: Complete Blog with <nav>, <main>, <aside> and Multiple Articles
A real blog has navigation, main content, a sidebar, and multiple articles. This variant shows the complete structure using only semantic tags.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Semantic Blog</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
}
header[role="banner"] {
background: #2c3e50;
color: white;
padding: 20px;
text-align: center;
}
nav {
background: #34495e;
padding: 12px;
text-align: center;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
}
main {
display: flex;
max-width: 1100px;
margin: 20px auto;
gap: 30px;
padding: 0 20px;
}
.articulos {
flex: 3;
}
article {
border-bottom: 1px solid #ddd;
padding-bottom: 20px;
margin-bottom: 20px;
}
aside {
flex: 1;
background: #f8f8f8;
padding: 20px;
border-radius: 8px;
align-self: flex-start;
}
footer[role="contentinfo"] {
background: #2c3e50;
color: white;
text-align: center;
padding: 20px;
margin-top: 40px;
}
</style>
</head>
<body>
<header>
<h1>📝 Tech Blog</h1>
<p>News, tutorials, and opinions about web development</p>
</header>
<nav>
<a href="/">Home</a>
<a href="/tutoriales">Tutorials</a>
<a href="/noticias">News</a>
<a href="/contacto">Contact</a>
</nav>
<main>
<div class="articulos">
<article>
<header>
<h2>Introduction to Semantic HTML5</h2>
<p>
Published on <time datetime="2026-06-10">June 10, 2026</time>
by <address style="display: inline;">Gabriel Maza</address>
</p>
</header>
<section>
<p>
Semantic HTML5 tags allow you to structure content so that both browsers
and search engines better understand the site's organization.
</p>
</section>
<footer>
<p>Categories: <a href="#">HTML</a>, <a href="#">Beginners</a></p>
</footer>
</article>
<article>
<header>
<h2>Why I Stopped Using Only Divs</h2>
<p>
Published on <time datetime="2026-06-08">June 8, 2026</time>
by <address style="display: inline;">María López</address>
</p>
</header>
<section>
<p>
For years I structured my sites using only divs. Since adopting semantic
tags, my code is cleaner, screen readers navigate better, and Google
ranks my pages higher.
</p>
</section>
<footer>
<p>Categories: <a href="#">Best Practices</a>, <a href="#">SEO</a></p>
</footer>
</article>
</div>
<aside>
<h3>📌 Related Articles</h3>
<ul>
<li><a href="#">Complete Flexbox Guide</a></li>
<li><a href="#">CSS Grid vs Flexbox</a></li>
<li><a href="#">Web Accessibility (A11Y)</a></li>
</ul>
<h3>🏷️ Popular Tags</h3>
<p>
<a href="#" style="margin:0 5px;">HTML</a>
<a href="#" style="margin:0 5px;">CSS</a>
<a href="#" style="margin:0 5px;">JavaScript</a>
<a href="#" style="margin:0 5px;">SEO</a>
</p>
</aside>
</main>
<footer>
<p>© 2026 Tech Blog. All rights reserved.</p>
<p><a href="/privacidad" style="color: #aaa;">Privacy Policy</a></p>
</footer>
</body>
</html>
This example introduces <time datetime=""> (machine-readable date format) and <address> (author contact information), two lesser-known but very useful semantic tags.
Variant 2: Personal Portfolio Page with <figure> and <figcaption>
Semantic tags aren't just for blogs. A design or photography portfolio also benefits from a clear structure.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 40px;
}
.galeria {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
figure {
margin: 0;
border: 1px solid #e0e0e0;
border-radius: 10px;
overflow: hidden;
background: #fafafa;
}
figure img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
figcaption {
padding: 12px 16px;
font-size: 14px;
}
figcaption h3 {
margin: 0 0 4px;
font-size: 16px;
}
figcaption p {
margin: 0;
color: #666;
}
footer {
text-align: center;
margin-top: 60px;
padding: 20px;
border-top: 1px solid #ddd;
color: #888;
}
</style>
</head>
<body>
<header>
<h1>🎨 Design Portfolio</h1>
<p>Web and graphic design projects — 2025-2026</p>
</header>
<main>
<section>
<h2>Featured Projects</h2>
<div class="galeria">
<figure>
<img src="https://via.placeholder.com/400x300?text=Web+Redesign" alt="Corporate web redesign" />
<figcaption>
<h3>Corporate Web Redesign</h3>
<p>Client: TechCorp Inc. | 2026</p>
</figcaption>
</figure>
<figure>
<img src="https://via.placeholder.com/400x300?text=E-commerce" alt="Sports e-commerce" />
<figcaption>
<h3>Sports E-commerce</h3>
<p>Client: SportTotal | 2025</p>
</figcaption>
</figure>
<figure>
<img src="https://via.placeholder.com/400x300?text=Mobile+App" alt="Delivery mobile app" />
<figcaption>
<h3>Delivery Mobile App</h3>
<p>Client: FastFood Express | 2025</p>
</figcaption>
</figure>
</div>
</section>
</main>
<footer>
<p>📧 contact@myportfolio.com | 📱 +54 11 1234-5678</p>
</footer>
</body>
</html>
Variant 3: <div> vs Semantic Tags Comparison
The same page built in two different ways. This helps you understand why semantic tags are better than using only <div>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Site with Divs</title>
</head>
<body>
<div class="header">
<h1>My Site</h1>
</div>
<div class="nav">
<a href="#">Home</a>
<a href="#">About</a>
</div>
<div class="content">
<div class="article">
<h2>Article</h2>
<p>Article content.</p>
</div>
</div>
<div class="footer">
<p>© 2026</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Semantic Site</title>
</head>
<body>
<header>
<h1>My Site</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
<main>
<article>
<h2>Article</h2>
<p>Article content.</p>
</article>
</main>
<footer>
<p>© 2026</p>
</footer>
</body>
</html>
The semantic version is shorter, more readable, and communicates the purpose of each section without needing classes like .header or .footer. Additionally, assistive technologies like screen readers can navigate directly between <nav>, <main>, and <article>.
Variant 4: Documentation Page with Advanced Semantic Structure
A technical documentation site (like this one) uses semantic tags to organize large volumes of content.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>API Documentation</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
margin: 0;
}
nav {
width: 250px;
background: #2c3e50;
color: white;
padding: 20px;
min-height: 100vh;
}
nav a {
color: #bbb;
display: block;
padding: 6px 0;
text-decoration: none;
}
nav h3 {
color: white;
margin-top: 20px;
}
main {
flex: 1;
padding: 30px;
max-width: 800px;
}
section {
margin-bottom: 40px;
}
code {
background: #f4f4f4;
padding: 2px 6px;
border-radius: 3px;
font-size: 0.9em;
}
</style>
</head>
<body>
<nav>
<h3>📚 Documentation</h3>
<a href="#introduccion">Introduction</a>
<a href="#autenticacion">Authentication</a>
<a href="#endpoints">Endpoints</a>
<a href="#errores">Error Codes</a>
<a href="#ejemplos">Examples</a>
</nav>
<main>
<section id="introduccion">
<h2>Introduction</h2>
<p>
Our REST API allows programmatic data access.
All responses are in <code>JSON</code> format.
</p>
</section>
<section id="autenticacion">
<h2>Authentication</h2>
<p>
Use the header <code>Authorization: Bearer <token></code> in
every request. Get your token from the developer dashboard.
</p>
</section>
<section id="endpoints">
<h2>Available Endpoints</h2>
<dl>
<dt><code>GET /api/users</code></dt>
<dd>Lists all registered users.</dd>
<dt><code>GET /api/users/:id</code></dt>
<dd>Gets a specific user by ID.</dd>
<dt><code>POST /api/users</code></dt>
<dd>Creates a new user.</dd>
</dl>
</section>
<section id="errores">
<h2>Error Codes</h2>
<ul>
<li><code>200</code> — OK</li>
<li><code>401</code> — Unauthorized</li>
<li><code>404</code> — Not Found</li>
<li><code>500</code> — Internal Server Error</li>
</ul>
</section>
<section id="ejemplos">
<h2>Usage Examples</h2>
<pre><code>// Get user with ID 42
fetch('https://api.example.com/users/42', {
headers: {
'Authorization': 'Bearer my-secret-token'
}
})
.then(res => res.json())
.then(data => console.log(data));</code></pre>
</section>
</main>
</body>
</html>
Best Practices and Common Mistakes
| ✅ Best Practice | ❌ Common Mistake |
|---|---|
Use <header>, <nav>, <main>, <footer> on every page | Structure everything with <div class="..."> without semantics |
Put <h1> to <h6> in hierarchical order within <section> | Skip heading levels (e.g.: <h1> then <h4>) |
Use <time datetime="2026-06-10"> for publication dates | Write dates without machine-readable format |
Use <article> for independent, self-contained content | Use <article> as a generic layout wrapper |
Include <nav> for primary navigation blocks | Put footer links or breadcrumbs inside <nav> (not primary navigation) |
Add <aside> for complementary or tangential content | Put main content inside <aside> |
Frequently Asked Questions (FAQ)
Do semantic tags really improve SEO?
Yes, and significantly. Google uses semantic tags to understand content structure and hierarchy. A well-defined <article> tells Google "this block is an independent piece of content." A <nav> indicates which links are primary navigation. This helps generate rich snippets and improves rankings.
Can I still use <div> if I'm already using semantic tags?
Yes, they're complementary. Semantic tags define the global structure (<header>, <main>, <footer>) and <div> elements group elements within those sections when there's no specific semantic tag (e.g., a wrapper to center content with CSS, or a card container).
What's the difference between <section> and <article>?
<article> represents independent, self-contained content that would make sense on its own outside the page (a blog post, a comment, a widget). <section> groups thematically related content that depends on the page context. A page can have multiple <section>, but each <article> should be readable independently.
How many <nav> elements can I have on a page?
There's no technical limit, but the recommendation is to use <nav> only for primary navigation blocks. For other link groups (footer, breadcrumbs, pagination, social media), <nav> isn't necessary. One <nav> per page is usually sufficient; two at most (primary navigation + secondary navigation).
🔧 Discover more about this topic here 👉 Basic Structure of an HTML Document and also in the Semantic Tags in HTML5 section.