HTML Block and Inline Elements

Every visible HTML element is laid out by the browser as either a block or an inline box. Block boxes stack vertically and fill the available width; inline boxes flow horizontally within a line of text, like words in a sentence. Understanding this distinction is essential for controlling page layout.

It is important to know that "block" and "inline" are not fixed HTML categories — they describe how an element is rendered by default. Modern HTML5 groups elements by content categories (flow content, phrasing content, etc.), while block-vs-inline is really a CSS concept controlled by the display property. That means any element's default behavior can be overridden: a <span> can be made to behave like a block, and a <div> like inline.

See also: CSS display property · <div> tag · <span> tag

This page covers what block-level and inline elements are, the full list of each, how display lets you change the default, the all-important nesting rule, and when to reach for <div> versus <span>.

Block-level Elements

A block-level element is an HTML element that starts on a new line and takes up the full available width of its parent element’s horizontal space. This kind of element creates blocks of content (paragraphs, page divisions). The majority of HTML elements are block-level elements.

Block-level elements are used within the body of an HTML document and can contain inline elements, or other block-level elements.

Example of a block-level element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div>This is a block-level element. It starts on a new line and takes up the full width.</div>
    <p>This is another block-level element. It also starts on a new line.</p>
  </body>
</html>

Try it Yourself »

Block-level elements:
`<address>`
`<canvas>`
`<dt>`
`<footer>`
`<hr>`
`<noscript>`
`<pre>`
`<ul>`

Inline Elements

Unlike block-level elements, inline elements do not start on a new line. They begin within a line and only take up as much width as it is necessary. Inline elements are included as a part of the main text.

Inline elements commonly contain other inline elements, or they can be empty.

Example of an inline element:

Here an <img> sits next to a paragraph, and an inline <a> element flows inside the text without breaking the line:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Heading </h1>
    <p>This is Aleq's photo</p>
    <img src="https://placehold.co/200x185?text=Photo" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Try it Yourself »

To see inline flow clearly, place a <span> in the middle of a sentence. Because <span> is inline, the text continues on the same line and only the span's content is affected:

<p>The total price is
  <span style="color: red; font-weight: bold;">$49.99</span>
  including tax.</p>

The styled $49.99 stays in the line of running text — nothing wraps to a new line.

Inline elements:
`<a>`
`<br>`
`<data>`
`<i>`
`<kbd>`
`<output>`
`<script>`
`<strong>`
`<time>`

Changing Display with CSS

Because block and inline are rendering behaviors, you can switch them with the CSS display property. This is one of the most common reasons to use display at all.

In the example below, a <span> is forced to render as a block (so it starts on a new line and takes the full width), and a <div> is forced to render inline (so it sits in the flow of text):

<!DOCTYPE html>
<html>
  <head>
    <style>
      span.as-block {
        display: block;
        background: #e0f7fa;
      }
      div.as-inline {
        display: inline;
        background: #ffecb3;
      }
    </style>
  </head>
  <body>
    <span class="as-block">I am a span behaving like a block.</span>
    <p>Text before <div class="as-inline">a div behaving inline</div> text after.</p>
  </body>
</html>

display: inline-block

There is a useful third value, display: inline-block. It flows alongside other content like an inline element, but it also honors width, height, and top/bottom margin/padding like a block element — the best of both.

A classic use case is a horizontal navigation bar or a row of buttons that need a set width and padding while still sitting side by side:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .btn {
        display: inline-block;
        width: 120px;
        padding: 10px 0;
        margin: 4px;
        text-align: center;
        background: #2196f3;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <a class="btn" href="#">Home</a>
    <a class="btn" href="#">About</a>
    <a class="btn" href="#">Contact</a>
  </body>
</html>

Each link keeps its width and padding (block behavior) yet still lines up horizontally (inline behavior).

Nesting Rule: Block Inside Inline Is Not Allowed

A key rule of HTML: a block-level element should not be placed inside an inline element. For example, a <span> (inline) must not wrap a <div> (block). Doing so produces invalid HTML, and browsers may "fix" it by splitting your markup in unexpected ways.

Invalid — a block <div> inside an inline <span>:

<!-- Invalid: do not put a block element inside an inline element -->
<span>
  <div>This block must not be here.</div>
</span>

Valid — keep the inline <span> inside the block <div>:

<!-- Valid: an inline element nested inside a block element -->
<div>
  <span>This inline element belongs here.</span>
</div>

The reverse direction (inline inside block) is always fine. When you need a block container, use a block element such as <div>, not <span>. Note: links are a special case — since HTML5, an <a> element may wrap block content.

div vs span: Generic Containers

When no existing element fits, HTML offers two generic, meaningless "wrapper" elements you reach for constantly:

<div> — a generic block-level container. Use it to group larger sections of content for layout or styling (a card, a sidebar, a row).
<span> — a generic inline container. Use it to target a small piece of text within a line, such as coloring a single word or attaching a tooltip.

A simple rule of thumb: if you are grouping whole chunks of the page, choose <div>; if you are marking up a fragment inside running text, choose <span>.

<!-- div: groups a block section -->
<div class="card">
  <h2>Welcome</h2>
  <p>Hello, <span class="username">Aleq</span>!</p>
</div>

Prefer a semantic element (<section>, <article>, <nav>, <strong>, <em>, …) when one describes your content; fall back to <div>/<span> only when nothing more meaningful applies.

Practice

Which statement about HTML block and inline elements is correct?

Whether an element renders as block or inline is controlled by the CSS display property and can be changed.A block element such as a div may be placed inside an inline span without producing invalid HTML.The span element is a generic block-level container used to group large sections of a page.Setting display to inline-block removes an element's ability to honor width and height.