Divs & Spans (Generic Containers)
What are Divs & Spans?
Imagine you are packing for a trip. You have a large suitcase to hold all your clothes (a<div> container), and inside that suitcase, you put a small label tag on a specific shirt so you can find it easily (a <span> container).
<div> (Division): A block-level container. It starts on a new line and takes up the full width available. It is used to group large sections of a webpage (like a card, a sidebar, or a header).<span>: An inline-level container. It does not start on a new line and only takes up as much width as its content. It is used to target a specific word or phrase inside a paragraph.Why does it matter?
Neither<div> nor <span> has any visual style on its own. They are "generic" elements. However, they are the most used tags in web development because they let you group elements together and target them with CSS styles or JavaScript interactions.
How to write it
Use<div> to wrap blocks, and <span> to wrap inline text:
<div class="card">
<h2>Title</h2>
<p>Some text with a <span class="badge">New</span> badge.</p>
</div>
Block Div wrapper
Inline Span
Common Mistakes
<div> tags. If a semantic tag like <header>, <main>
etwork, <section>, or <article> fits, use that instead!<span> tag won't work in CSS because it is an inline element. Use <div> or change its display type in CSS.Quick Reference
<div> — Block-level generic box container.<span> — Inline-level generic text wrapper.Your Task
Create a `<div>` with the class 'panel'. Inside it, create a `<span>` with the class 'badge' containing 'New'.
index.html
Type code above to start the lesson.
Live Preview