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.
-
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.
<header>
-
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.