W3cubDocs

/HTML

Block-level elements

HTML (Hypertext Markup Language) elements are usually either "block-level" elements or "inline" elements. A block-level element occupies the entire space of its parent element (container), thereby creating a "block." This article helps to explain what this means.

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.

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:

Formatting: By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.
Content model: Generally, block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.

The distinction of block-level vs. inline elements is used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of content categories. The "block-level" category roughly corresponds to the category of flow content in HTML5, while "inline" corresponds to phrasing content, but there are additional categories.

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> HTML5: Article content.
<aside> HTML5: Aside content.
<blockquote>: Long ("block") quotation.
<canvas> HTML5: Drawing canvas.
<dd>: Describes a term in a description list.
<div>: Document division.
<dl>: Description list.
<dt>: Description list term.
<fieldset>: Field set label.

<figcaption> HTML5: Figure caption.
<figure> HTML5: Groups media content with a caption (see <figcaption>).
<footer> HTML5: Section or page footer.
<form>: Input form.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Heading levels 1-6.
<header> HTML5: Section or page header.
<hgroup> HTML5: Groups header information.
<hr>: Horizontal rule (dividing line).
<li>: List item.
<main>: Contains the central content unique to this document.
<nav>: Contains navigation links.

<noscript>: Content to use if scripting is not supported or turned off.
<ol>: Ordered list.
<output> HTML5: Form output.
<p>: Paragraph.
<pre>: Preformatted text.
<section> HTML5: Section of a web page.
<table>: Table.
<tfoot>: Table footer.
<ul>: Unordered list.
<video> HTML5: Video player.

Block-level elements

Block-level elements

HTML

CSS

Usage

Block-level vs. inline

Elements

See also