Practical Exercise 16: Divisions and Spans
Learn how to use tags<div> and <span>Use HTML to structure and style your web content. This practical exercise teaches you how to effectively apply block and inline headings to your pages.
Activity
Use the tags<div> and <span>to organize and style your content.
Interactive Solution
Solution with complete HTML code
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Div y Span</title>
<style>
.contenedor {
background-color: #f0f0f0;
padding: 20px;
}
.texto-destacado {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="contenedor">
<p>
Este es un párrafo dentro de un
<span class="texto-destacado">div</span> contenedor.
</p>
</div>
</body>
</html>
Variants of the Same Exercise
Variant 1: Card Layout with <div>
<div> elements are perfect for creating content cards. Combined with CSS, they allow you to build visually organized card grids.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Cards with Div</title>
<style>
.cards {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.card {
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 20px;
width: 250px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.card img {
width: 100%;
border-radius: 8px;
margin-bottom: 12px;
}
.card h3 {
margin: 0 0 8px;
font-size: 18px;
}
.card .precio {
color: #28a745;
font-weight: bold;
font-size: 22px;
}
.card .precio span {
font-size: 14px;
color: #666;
font-weight: normal;
}
.card .stock {
color: #dc3545;
font-size: 13px;
}
.card button {
width: 100%;
padding: 10px;
background: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Featured Products</h1>
<div class="cards">
<div class="card">
<img src="https://via.placeholder.com/250x150?text=Notebook" alt="Notebook" />
<h3>Notebook Pro</h3>
<p class="precio">$1299 <span>USD</span></p>
<p>Processor i7, 16GB RAM, SSD 512GB</p>
<p class="stock">✅ In stock</p>
<button>Add to cart</button>
</div>
<div class="card">
<img src="https://via.placeholder.com/250x150?text=Monitor" alt="Monitor" />
<h3>Monitor 27" 4K</h3>
<p class="precio">$499 <span>USD</span></p>
<p>Resolution 3840x2160, IPS, HDR</p>
<p class="stock">⚠️ Low stock</p>
<button>Add to cart</button>
</div>
<div class="card">
<img src="https://via.placeholder.com/250x150?text=Teclado" alt="Keyboard" />
<h3>Mechanical Keyboard</h3>
<p class="precio">$89 <span>USD</span></p>
<p>Cherry MX switches, RGB, USB-C</p>
<p class="stock">✅ In stock</p>
<button>Add to cart</button>
</div>
</div>
</body>
</html>
Each <div class="card"> groups a product's elements: image, name, price, and button. The outer <div class="cards"> organizes the cards in a row using display: flex.
Variant 2: <span> for Styling Inline Words and Phrases
While <div> is block-level (takes up the full width), <span> is inline (only takes up the space of its content). It's ideal for highlighting words, changing colors within text, or applying specific styles.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Span Inline</title>
<style>
body {
font-family: Georgia, serif;
line-height: 1.8;
max-width: 700px;
margin: 40px auto;
padding: 0 20px;
}
.highlight {
background: #fff3cd;
padding: 2px 6px;
border-radius: 3px;
}
.keyword {
color: #007bff;
font-weight: bold;
}
.strikethrough {
text-decoration: line-through;
color: #999;
}
.new-price {
color: #28a745;
font-size: 1.3em;
font-weight: bold;
}
.code-inline {
background: #2d2d2d;
color: #f8f8f2;
padding: 2px 8px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
}
</style>
</head>
<body>
<h1>Special Course Offer</h1>
<p>
Learn <span class="keyword">HTML</span>,
<span class="keyword">CSS</span> and
<span class="keyword">JavaScript</span> from scratch with
our <span class="highlight">100% online and free</span> courses.
</p>
<p>
Before: <span class="strikethrough">$199 USD</span>
Now: <span class="new-price">$49 USD</span>
<span class="highlight">(75% OFF)</span>
</p>
<p>
To create a card use the tag
<span class="code-inline"><div class="card"></span>
in your HTML and then style it with CSS.
</p>
<p>
This course includes
<span style="color: #e83e8c; font-weight: bold;">6 real projects</span>,
<span style="background: #d4edda; padding: 2px 6px;">completion certificate</span>
and <span style="border-bottom: 2px dashed #6c757d;">lifetime access</span>
to all updates.
</p>
</body>
</html>
With <span> you can change background color, text color, size, font weight, or any style without breaking the text flow. It's the perfect tool for styling text fragments without affecting the structure.
Variant 3: Full Page Structure with Nested <div> Elements
Before semantic tags (header, nav, main), web pages were structured entirely with <div>. This example shows how it was done so you understand the classic approach.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Layout with Divs</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background: #333;
color: white;
padding: 20px;
text-align: center;
}
.nav {
background: #444;
padding: 12px;
text-align: center;
}
.nav a {
color: white;
margin: 0 15px;
text-decoration: none;
}
.container {
display: flex;
max-width: 1100px;
margin: 20px auto;
gap: 20px;
padding: 0 20px;
}
.main-content {
flex: 3;
}
.sidebar {
flex: 1;
background: #f8f8f8;
padding: 20px;
border-radius: 8px;
}
.footer {
background: #333;
color: white;
text-align: center;
padding: 20px;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
<p>Fully structured with divs</p>
</div>
<div class="nav">
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Contact</a>
</div>
<div class="container">
<div class="main-content">
<h2>Main Article</h2>
<p>
This is the main content of the page. Here goes the most important information
we want visitors to see first.
</p>
<p>
Divs allow us to group content into logical blocks. Each section of the
page is contained in its own div with a descriptive class.
</p>
</div>
<div class="sidebar">
<h3>Sidebar</h3>
<p>Related links, ads, or secondary content.</p>
<ul>
<li><a href="#">Related article 1</a></li>
<li><a href="#">Related article 2</a></li>
<li><a href="#">Latest news</a></li>
</ul>
</div>
</div>
<div class="footer">
<p>© 2026 My Website. All rights reserved.</p>
</div>
</body>
</html>
Variant 4: Visual Comparison — Block vs Inline
This variant visually demonstrates the behavioral difference between block and inline elements. It's key to understanding when to use <div> (block) and <span> (inline).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Block vs Inline</title>
<style>
.demo-container {
border: 2px dashed #999;
padding: 20px;
margin: 20px 0;
}
.bloque {
display: block;
background: #cce5ff;
border: 2px solid #007bff;
padding: 10px;
margin: 8px 0;
}
.inline {
display: inline;
background: #d4edda;
border: 2px solid #28a745;
padding: 4px 8px;
}
.inline-block {
display: inline-block;
background: #fff3cd;
border: 2px solid #ffc107;
padding: 8px 12px;
width: 150px;
}
</style>
</head>
<body>
<h1>Behavior: Block vs Inline</h1>
<div class="demo-container">
<h3>Block elements (div by default)</h3>
<p>They take up the full available width and force a line break.</p>
<div class="bloque">Block 1</div>
<div class="bloque">Block 2</div>
<div class="bloque">Block 3</div>
</div>
<div class="demo-container">
<h3>Inline elements (span by default)</h3>
<p>They only take up the width of their content. They flow next to each other.</p>
<span class="inline">Inline 1</span>
<span class="inline">Inline 2</span>
<span class="inline">Inline 3</span>
</div>
<div class="demo-container">
<h3>Inline-block elements (hybrid)</h3>
<p>They flow like inline but respect width and height like block.</p>
<span class="inline-block">Item A</span>
<span class="inline-block">Item B</span>
<span class="inline-block">Item C</span>
</div>
</body>
</html>
Best Practices and Common Mistakes
| ✅ Best Practice | ❌ Common Mistake |
|---|---|
Use <div> to group related content blocks | Use <div> when a semantic tag (<section>, <article>) is more appropriate |
Name classes descriptively: .card, .sidebar, .product | Name classes based on appearance: .blue-box, .big-text |
Use <span> only to style inline text fragments | Nest <div> inside <p> (HTML doesn't allow it) |
Combine <div> with Flexbox/Grid for modern layouts | Create complex layouts only with <div> and float/clear |
| Nest divs with a clear structural purpose | Overload HTML with "divitis" (unnecessary divs) |
Frequently Asked Questions (FAQ)
When should I use <div> and when should I use semantic tags?
Whenever there's a semantic tag that describes the content's purpose (<header>, <nav>, <main>, <section>, <article>, <footer>, <aside>), use it instead of <div>. Semantic tags improve SEO and accessibility. Reserve <div> for generic containers without semantic meaning, like grouping cards or creating wrappers for styles.
Does excessive use of <div> affect SEO?
Not directly, but indirectly yes. An HTML full of <div> without semantic structure is harder for Google and screen readers to interpret. Google favors sites with clear structure (hierarchical headings, semantic tags). Using <div> where a <section> should go doesn't penalize you, but you lose positioning opportunities.
Can I put a <div> inside a paragraph <p>?
No. HTML doesn't allow block elements (like <div>) inside paragraph elements <p>. If you do, the browser will automatically close the <p> before the <div>, breaking your structure. Inside a <p> you can only use inline elements like <span>, <a>, <strong>, <em>.
Can <span> have width and height?
By default no, because <span> is an inline element. For a <span> to accept width and height, you need to change its display to inline-block or block via CSS. The modern alternative is to use display: inline-block to maintain inline flow while controlling dimensions.
📐 Want to dive deeper into layouts with Flexbox and CSS Grid? These modern layouts work perfectly with <div> as containers. Visit Flexbox in CSS to learn how to create responsive layouts without float or position.