HTML Block and Inline Elements

Block vs inline

• Block elements start on a new line and take the full width: <div>, <p>, <h1>, <ul>, <section>.
• Inline elements sit within a line of text and are only as wide as their content: <span>, <a>, <strong>, <img>.

<style>
  div, p { background: #dbeafe; margin: 4px 0; }
  span, a, strong { background: #fde68a; }
</style>
<div>A div is a block: it takes the full width.</div>
<p>A paragraph is a block too, containing <span>a span</span>, <a href="#">a link</a> and <strong>strong text</strong> inline.</p>
<div>Another block starts on a new line.</div>

div and span

<div> (block) and <span> (inline) have no meaning — they're generic containers for styling and scripting. Use a semantic element when one fits (semantic HTML) and fall back to div/span otherwise.

CSS can change how any element is displayed with the display property.