Chapter 8
Beginner
6 min read
Core Elements
Div & Span Elements
Div and Span are generic container elements used to group and style HTML content.
🎯 What you'll learn
✓Use <div> as a block-level
container
✓Use <span> as an inline
container
✓Understand block vs inline
elements
✓Combine with CSS classes for
styling
Introduction to Div & Span Elements
This chapter covers Div & Span Elements in depth. Understanding this topic is essential for writing clean, modern HTML. Use the live editor below to experiment as you read.
💡 In This Chapter
You will see real code examples, clear
explanations, and a live editor to practice immediately — no setup needed.
Div
Block container.
HTML
<div class="card">
<h2>Card Title</h2>
<p>Card content here.</p>
</div>Span
Inline container.
HTML
<p>My favourite color is <span style="color:orange">orange</span>.</p>Try It Yourself
Edit the code below and click ▶ Run to see your changes live.
Live Editor
✎ Editor
👁 Preview
❓ Quick Check — Chapter 8
<div> is a __ element while <span> is a __ element.
📄 Chapter Summary
- Use <div> as a block-level container
- Use <span> as an inline container
- Understand block vs inline elements
- Combine with CSS classes for styling