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. Later, 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 HTML content category, but "block-level" and "inline" elements combined correspond to the flow content in HTML. There are also additional categories, e.g. interactive content.
Changing element levels
You can change the visual presentation of an element using the CSS display property. For example, by changing the value of display from inline to block, the browser will render the inline element as a block box rather than an inline box, and vice versa. However, doing this will not change the category and the content model of the element. For example, even if the display of the span element is changed to block, it should still only contain phrasing 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.
<nav>-
Contains navigation links.
<ol>-
Ordered list.
<p>-
Paragraph.
<pre>-
Preformatted text.
<section>-
Section of a web page.
<table>-
Table.
<ul>-
Unordered list.
See also