Block and Inline Elements in HTML: div and span Explained

Every element on a page is drawn as a rectangular box. By default, elements behave in one of two ways: block boxes stack on top of each other, and inline boxes flow along a line of text.

Block elements#

A block element starts on a new line and stretches to fill the full width available. This example gives each element a coloured background so you can see its box:

<h2 style="background: #ffe2a8">A heading is a block</h2>
<p style="background: #c9f0d3">A paragraph is a block. It takes the whole width, even though its text is short.</p>
<ul style="background: #cfe3ff">
  <li>Lists are blocks</li>
</ul>

Common block elements: <p>, <h1> to <h6>, <ul>, <ol>, <li>, <table>, <form>, <blockquote>, <pre>, <hr>, <div>, and the layout elements <header>, <nav>, <main>, <section>, <article>, <aside> and <footer>.

Inline elements#

An inline element sits inside a line of text, only as wide as its content:

<p>
  This is <strong style="background: #ffe2a8">strong</strong>, this is
  <a href="#" style="background: #c9f0d3">a link</a>, and this is
  <em style="background: #cfe3ff">emphasis</em>. They stay on the same line.
</p>

Common inline elements: <a>, <strong>, <em>, <b>, <i>, <span>, <code>, <abbr>, <time>, <br>, <img>, <input>, <button>, <label> and <select>.

div and span: generic containers#

<div> (block) and <span> (inline) have no meaning at all. They exist to group content so you can style it with CSS or reach it with JavaScript.

<div style="border: 2px solid #2f5fe0; padding: 8px">
  <h3>Free course</h3>
  <p>Price: <span style="color: green; font-weight: bold">₹0</span></p>
</div>

• <div> groups blocks, such as a card or a row of a layout.
• <span> wraps a word or phrase inside text, such as a price you want to colour.

Prefer meaningful elements#

Before reaching for <div> or <span>, check whether a meaningful element fits: <nav> for navigation, <article> for a blog post, <button> for a button, <strong> for important text. Use <div> and <span> only when nothing else describes the content. A page built only from divs (sometimes called "div soup") works visually but tells browsers, search engines and screen readers nothing about its structure. The Semantic HTML lesson goes further.

Nesting rules#

• Inline elements can go inside block elements: <p> containing <strong>.
• Block elements should not go inside inline-only elements: no <div> inside a <span>.
• Some blocks have extra rules, for example <p> cannot contain other blocks.
• <a> is an exception: it may wrap blocks, such as a whole card, as long as it contains no other interactive elements such as links or buttons.

CSS can change the box#

Whether an element is block or inline is just a default. CSS can change it with the display property, for example making links in a menu display: block, or laying out blocks side by side with Flexbox. The HTML element stays the same; only the presentation changes. See Display in the CSS course.

Practice#

<div style="border: 2px solid green; padding: 10px">
  <h3>Weekend sale</h3>
  <p>All courses are <span style="background: yellow">50% off</span> until Sunday.</p>
</div>

Key takeaway#