div vs span: Block vs Inline

The Generic Containers

<div> and <span> are generic containers with no semantic meaning. Use them only when no semantic element fits. The key difference is their display behaviour.

• <div> is a block-level element. It starts on a new line and takes the full available width.
• <span> is an inline element. It stays in the flow of text and only takes as much width as its content.

<!-- div wraps a block of content -->
<div class="card">
  <h2>Card Title</h2>
  <p>Card description text.</p>
</div>

<!-- span targets a run of inline text -->
<p>The price is <span class="highlight">$29.99</span> today only.</p>

Block vs Inline Elements

Block elements (<div>, <p>, <h1>-<h6>, <ul>, <table>) stack vertically. Inline elements (<span>, <a>, <strong>, <em>, <img>) sit side by side within a line of text. You cannot place a block element inside an inline element.