HTML — Lesson 10
Div, Span & Grouping Elements
Grouping content with generic and semantic containers.
Div, Span & Grouping Elements
Grouping elements let you organize content logically and apply styles or scripts to multiple elements at once.
Div and Span
<div> is a block-level container and <span> is an inline container. They have no visual effect on their own.
<!-- div: block container (takes full width) -->
<div class="card">
<h3>Title</h3>
<p>Content inside the card.</p>
</div>
<!-- span: inline container (flows with text) -->
<p>This is <span class="highlight">highlighted</span> text.</p>
Semantic Grouping Alternatives
Instead of generic <div>, use semantic tags when they fit the content's meaning.
<!-- main: primary page content (one per page) -->
<main>
<article>
<!-- article: self-contained content -->
<header><h2>Blog Post</h2></header>
<section>
<!-- section: thematic grouping -->
<p>Post content here...</p>
</section>
</article>
</main>
When to Use Each
| Tag | Use When | Example |
|---|---|---|
<div> | No semantic meaning fits | Layout wrapper, styling container |
<span> | Inline text needs styling | Colored words, highlighted text |
<section> | Thematic group of content | Chapter, tab panel, form group |
<article> | Independent, reusable content | Blog post, comment, card |
<main> | Primary page content | Everything between header/footer |
Grouping with Data Attributes
<div class="product" data-category="electronics" data-price="299">
<h3>Laptop</h3>
<p>Fast and lightweight.</p>
</div>
Tip: Avoid
<div> soup (nesting too many divs). If a <div> wraps a navigation, use <nav> instead. If it wraps an article, use <article>.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →