HTML Div and Span

Container Elements

The

element is a block-level container used to group elements for styling or layout purposes.

The element is an inline container used to style part of a text or group inline elements.

<!-- Div for block-level grouping -->
<div class="container">
  <h2>Section Title</h2>
  <p>Section content...</p>
</div>

<!-- Span for inline styling -->
<p>This is <span style="color: red;">red text</span> in a paragraph.</p>
  • <div> - Block-level container
  • <span> - Inline container
  • Use with class or id for styling
  • Div creates new line, span doesn't

Try Div and Span

<div class="card">
  <h3>Card Title</h3>
  <p>This is a <span class="highlight">highlighted</span> word in the card.</p>
</div>

<div class="card">
  <h3>Another Card</h3>
  <p>More content with <span class="highlight">emphasis</span>.</p>
</div>

Note: Use semantic elements when possible. Use div and span when no semantic element fits.