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. 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; }
{{ EmbedLiveSample('Block-level_Example') }}
Usage
- Block-level elements may appear only within a {{ HTMLElement("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).
- {{ HTMLElement("address") }}
- Contact information.
- {{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}
- Article content.
- {{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}
- Aside content.
- {{ HTMLElement("blockquote") }}
- Long ("block") quotation.
- {{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}
- Drawing canvas.
- {{ HTMLElement("dd") }}
- Definition description.
- {{ HTMLElement("div") }}
- Document division.
- {{ HTMLElement("dl") }}
- Definition list.
- {{ HTMLElement("fieldset") }}
- Field set label.
- {{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}
- Figure caption.
- {{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}
- Groups media content with a caption (see {{ HTMLElement("figcaption") }}).
- {{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}
- Section or page footer.
- {{ HTMLElement("form") }}
- Input form.
- {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
- Heading levels 1-6.
- {{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}
- Section or page header.
- {{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}
- Groups header information.
- {{ HTMLElement("hr") }}
- Horizontal rule (dividing line).
- {{ HTMLElement("li") }}
- List item.
- {{ HTMLElement("main") }}
- Contains the central content unique to this document.
- {{ HTMLElement("nav") }}
- Contains navigation links.
- {{ HTMLElement("noscript") }}
- Content to use if scripting is not supported or turned off.
- {{ HTMLElement("ol") }}
- Ordered list.
- {{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}
- Form output.
- {{ HTMLElement("p") }}
- Paragraph.
- {{ HTMLElement("pre") }}
- Preformatted text.
- {{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}
- Section of a web page.
- {{ HTMLElement("table") }}
- Table.
- {{ HTMLElement("tfoot") }}
- Table footer.
- {{ HTMLElement("ul") }}
- Unordered list.
- {{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}
- Video player.