Block, Inline, div & span

Some elements start on a new line and stretch across the page. Others sit inside a line of text like a word in a sentence. Knowing which is which explains a lot of "why does my page look like this?" moments.

In this lesson you will learn the difference between block and inline elements, the nesting rules that follow from it, and how to use the two generic containers, <div> and <span>, without overusing them.

Two ways to sit on the page

Every element has a default way of being laid out.

• A block element starts on a new line, takes the full width available, and pushes the next element down. Headings, paragraphs and lists are block elements.
• An inline element stays inside the current line and is only as wide as its content. Links, <strong> and <em> are inline elements.

The example below draws an outline around each element so you can see the boxes. Notice how the block boxes stretch across the page while the inline boxes wrap tightly around their words.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and Inline</title>
  <style>
    h2, p, ul { outline: 2px solid steelblue; }
    a, strong, em { outline: 2px solid tomato; }
  </style>
</head>
<body>
  <h2>Pune Cricket Academy</h2>
  <p>Coaching for <strong>under-14</strong> and <em>under-16</em> players.</p>
  <p>Read the <a href="#">match schedule</a> before Saturday.</p>
  <ul>
    <li>Nets practice: 6 am</li>
    <li>Fitness session: 7 am</li>
  </ul>
</body>
</html>

Where this behaviour comes from

The block or inline behaviour does not come from HTML itself. It comes from the browser's built-in stylesheet, which gives every element a default CSS display value. A paragraph gets display: block and a link gets display: inline. That means you can change it with CSS, which you will do often. See CSS Display.

The HTML standard uses its own terms for the same idea. Flow content is almost anything that can go in the body. Phrasing content is the text-level part of it: words and the inline elements that mark them up. A paragraph may only contain phrasing content.

Images, buttons and inputs are inline, which is why two buttons placed one after the other sit side by side instead of stacking.

Nesting rules that follow

Because a paragraph holds only phrasing content, you cannot put a block element such as <div>, <ul> or a heading inside <p>. The browser will not show an error. Instead it quietly closes the paragraph early, which breaks your styles in confusing ways.

<!-- What you wrote -->
<p>Fees for this term:
  <div>Tuition: ₹12,000</div>
</p>

<!-- What the browser actually builds -->
<p>Fees for this term:</p>
<div>Tuition: ₹12,000</div>
<p></p>

The browser closed the <p> before the <div>, then treated your </p> as a new, empty paragraph. Use a <div> as the outer element instead, or replace the inner <div> with a <span>.

There is one useful exception. The <a> element takes on the rules of its parent, so a link may wrap block content such as a heading and a paragraph, as long as there is no other link or button inside it. This is handy for clickable cards.

<a href="/courses/python">
  <h3>Python for beginners</h3>
  <p>Twelve weeks, weekend batches.</p>
</a>

div: the generic block container

A <div> has no meaning at all. It is a plain box that you use when you need to group elements, usually so you can style or lay them out with CSS. Give it a class so your CSS can find it.

span: the generic inline container

A <span> is the inline version of <div>. Use it to mark a few words inside a line when no meaningful element fits. A good example is the lang attribute: when a Hindi word appears in English text, a <span lang="hi"> tells screen readers to pronounce it correctly.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div and span</title>
  <style>
    .card { border: 1px solid #ccc; border-radius: 8px; padding: 12px; margin-bottom: 12px; max-width: 320px; }
    .price { color: green; font-weight: bold; }
  </style>
</head>
<body>
  <div class="card">
    <h2>Masala chai kit</h2>
    <p>Price: <span class="price">₹349</span></p>
    <p>Perfect for a <span lang="hi">garam chai</span> on a rainy day in Lucknow.</p>
  </div>
  <div class="card">
    <h2>Brass tea kettle</h2>
    <p>Price: <span class="price">₹1,299</span></p>
  </div>
</body>
</html>

Each card is a <div> because it is only a styling group here. If each card were a product that made sense on its own, <article> would be a better choice, as you learned in Semantic HTML.

Prefer meaning first

<div> and <span> are the last option, not the first. Before you reach for them, check whether a meaningful element exists:

• A clickable action is a <button>, not a <div> with a click handler. A real button works with the keyboard and screen readers for free.
• Important text is <strong>, not a <span> styled bold.
• A list of items is <ul> or <ol>, not a stack of <div> elements.
• A page region is <header>, <main>, <nav> or <footer>.

A page made almost entirely of <div> elements is nicknamed "div soup". It works, but nobody (and no assistive technology) can tell what anything is.

Changing the display with CSS

Since block and inline are just default display values, CSS can switch them. One thing surprises beginners: inline elements such as <span> and <a> ignore width and height, and their top and bottom margins do not push other lines away. If you need an inline element to accept a size, give it display: inline-block or display: block.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Changing display</title>
  <style>
    .tag { background: gold; width: 120px; height: 40px; }
    .tag.sized { display: inline-block; }
  </style>
</head>
<body>
  <p>Inline: <span class="tag">Sale</span> the width and height are ignored.</p>
  <p>Inline-block: <span class="tag sized">Sale</span> now the size works.</p>
</body>
</html>

You will learn the full box model in CSS Box Model.

Common mistakes

• Putting a <div> or a list inside <p>. The browser closes the paragraph early. Use a <div> as the wrapper instead.
• Setting width on a link or span and wondering why nothing happens. Change its display first.
• Using <div> for everything. Check for a semantic element before falling back to the generic ones.
• Choosing an element because it is block or inline. Pick the element for its meaning; CSS can change how it is laid out.

Key points

• Block elements start on a new line and take the full width; inline elements flow inside a line.
• The behaviour comes from the default CSS display value, so CSS can change it.
• A <p> can only contain text-level (phrasing) content; never put a <div>, list or heading inside it.
• <div> is a meaningless block box and <span> is a meaningless inline box, used mainly for styling hooks.
• Use semantic elements first and fall back to <div> and <span> only when nothing else fits.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tickets</title>
  <style>
    .ticket { border: 2px solid #333; padding: 10px; margin: 10px 0; max-width: 300px; }
    .fare { font-weight: bold; color: darkgreen; }
  </style>
</head>
<body>
  <div class="ticket">
    <h2>Shatabdi Express</h2>
    <p>New Delhi to Lucknow, fare <span class="fare">₹1,155</span></p>
  </div>
  <div class="ticket">
    <h2>Jan Shatabdi</h2>
    <p>Kochi to Thiruvananthapuram, fare <span class="fare">₹215</span></p>
  </div>
</body>
</html>