Block-level elements

In this article, we'll examine HTML block-level elements and how they differ from inline-level elements.

HTML (Hypertext Markup Language) elements historically were categorized as either "block-level" elements or "inline-level" elements. Since this is a presentational characteristic it is nowadays specified by CSS in the Flow Layout. A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a "block".

Browsers typically display the block-level element with a newline both before and after the element. You can visualize them as a stack of boxes.

Note: A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The following example demonstrates the block-level element's influence:

Block-level elements

HTML

<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>

CSS

p { background-color: #8ABB55; }

Usage

  • Block-level elements may appear only within a <body> element.

Block-level vs. inline

There are a couple of key differences between block-level elements and inline elements:

Content model

Generally, block-level elements may contain inline elements and (sometimes) other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.

Default formatting

By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.

The distinction of block-level vs. inline elements was used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of content categories. While the "inline" category roughly corresponds to the category of phrasing content, the "block-level" category doesn't directly correspond to any HTML5 content category, but "block-level" and "inline" elements combined together correspond to the flow content in HTML5. There are also additional categories, e.g. interactive content.

Elements

The following is a complete list of all HTML "block-level" elements (although "block-level" is not technically defined for elements that are new in HTML5).

<address>

Contact information.

<article>

Article content.

<aside>

Aside content.

<blockquote>

Long ("block") quotation.

<details>

Disclosure widget.

<dialog>

Dialog box.

<dd>

Describes a term in a description list.

<div>

Document division.

<dl>

Description list.

<dt>

Description list term.

<fieldset>

Field set label.

<figcaption>

Figure caption.

<figure>

Groups media content with a caption (see <figcaption>).

Section or page footer.

<form>

Input form.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Heading levels 1-6.

Section or page header.

<hgroup>

Groups header information.

<hr>

Horizontal rule (dividing line).

<li>

List item.

<main>

Contains the central content unique to this document.

Contains navigation links.

<ol>

Ordered list.

<p>

Paragraph.

<pre>

Preformatted text.

<section>

Section of a web page.

<table>

Table.

<ul>

Unordered list.

See also