HTML Div & Span

Intermediate ~8 min read

Generic Containers

The <div> and <span> elements are generic containers with no semantic meaning. They're used purely for grouping and styling.

The Div Element

<div> is a block-level container used to group larger sections of content:

Creates page sections and layouts
Groups related content together
Applies styles to multiple elements at once

HTML

CSS

<div style="background: #e3f2fd; padding: 20px; margin: 10px 0;">\n  <h2>Section Title</h2>\n  <p>This content is grouped inside a div.</p>\n  <p>Divs are perfect for creating sections.</p>\n</div>\n\n<div style="background: #fff3e0; padding: 20px; margin: 10px 0;">\n  <h2>Another Section</h2>\n  <p>This is a separate grouped section.</p>\n</div>

The Span Element

<span> is an inline container used to style parts of text:

Highlights specific words or phrases
Applies styles without breaking text flow
Targets specific text with JavaScript

HTML

CSS

<p>\n  The price is <span style="color: red; font-weight: bold;">$99.99</span> today only!\n</p>\n\n<p>\n  Status: <span style="background: #4caf50; color: white; padding: 2px 8px; border-radius: 4px;">Active</span>\n</p>

Building Layouts with Div

Divs are essential for creating page layouts:

HTML

CSS

<div style="max-width: 600px; margin: 0 auto;">\n  <div style="background: #1976d2; color: white; padding: 15px; text-align: center;">\n    <h1>Header</h1>\n  </div>\n  \n  <div style="display: flex;">\n    <div style="background: #e3f2fd; padding: 15px; width: 70%;">\n      <h2>Main Content</h2>\n      <p>This is the main area.</p>\n    </div>\n    <div style="background: #bbdefb; padding: 15px; width: 30%;">\n      <h3>Sidebar</h3>\n    </div>\n  </div>\n  \n  <div style="background: #424242; color: white; padding: 10px; text-align: center;">\n    Footer\n  </div>\n</div>

Best Practice: Use semantic elements like <header>, <nav>, <main> when possible. Use div/span only when no semantic element fits.

Quick Quiz

Which element should you use to highlight a word within a paragraph?

<div>

<span>

<p>

Previous Block vs Inline

Next Classes & IDs

Generic Containers

The Div Element

The Span Element

Building Layouts with Div

Quick Quiz

Enjoying these tutorials?