Block-level elements

  • Revision slug: HTML/Block-level_elements
  • Revision title: Block-level elements
  • Revision id: 480825
  • Created:
  • Creator: jswisher
  • Is current revision? No
  • Comment

Revision Content

"Block-level" is categorization of HTML elements, as contrasted with "inline" elements. Block-level elements may appear only within a {{ HTMLElement("body") }} element. Their most significant characteristic is that they typically are formatted with a line break before and after the element (thereby creating a stand-alone block of content). That is, they take up the width of their containers.

The differences between inline and block-level elements are:

Formatting
By default, block-level elements begin on new lines.
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("audio") }} {{ HTMLVersionInline(5) }}
Audio player.
{{ 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("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.

See also

Revision Source

<p>"Block-level" is categorization of HTML elements, as contrasted with <a href="/en-US/docs/HTML/Inline_elements" title="/en-US/docs/HTML/inline_elements">"inline" elements</a>. Block-level elements may appear only within a {{ HTMLElement("body") }} element. Their most significant characteristic is that they typically are formatted with a line break before and after the element (thereby creating a stand-alone block of content). That is, they take up the width of their <em>containers</em>.</p>
<p>The differences between inline and block-level elements are:</p>
<dl>
  <dt>
    Formatting</dt>
  <dd>
    By default, block-level elements begin on new lines.</dd>
  <dt>
    Content model</dt>
  <dd>
    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.</dd>
</dl>
<p>The distinction of block-level vs. inline elements is used in HTML specifications up&nbsp; to 4.01. In HTML5, this binary distinction is replaced with a more complex set of <a href="/en-US/docs/HTML/Content_categories" title="/en-US/docs/HTML/Content_categories">content categories</a>. The "block-level" category roughly corresponds to the category of <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a> in HTML5, while "inline" corresponds to <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, but there are additional categories.</p>
<h2 id="Elements">Elements</h2>
<p>The following is a complete list of all&nbsp;HTML&nbsp;block level elements (although "block-level" is not technically defined for elements that are new in HTML5).</p>
<div class="threecolumns">
  <dl>
    <dt>
      {{ HTMLElement("address") }}</dt>
    <dd>
      Contact information.</dd>
    <dt>
      {{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt>
    <dd>
      Article content.</dd>
    <dt>
      {{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt>
    <dd>
      Aside content.</dd>
    <dt>
      {{ HTMLElement("audio") }} {{ HTMLVersionInline(5) }}</dt>
    <dd>
      Audio player.</dd>
    <dt>
      {{ HTMLElement("blockquote") }}</dt>
    <dd>
      Long ("block") quotation.</dd>
    <dt>
      {{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt>
    <dd>
      Drawing canvas.</dd>
    <dt>
      {{ HTMLElement("dd") }}</dt>
    <dd>
      Definition description.</dd>
    <dt>
      {{ HTMLElement("div") }}</dt>
    <dd>
      Document division.</dd>
    <dt>
      {{ HTMLElement("dl") }}</dt>
    <dd>
      Definition list.</dd>
    <dt>
      {{ HTMLElement("fieldset") }}</dt>
    <dd>
      Field set label.</dd>
    <dt>
      {{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt>
    <dd>
      Figure caption.</dd>
    <dt>
      {{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt>
    <dd>
      Groups media content with a caption (see {{ HTMLElement("figcaption") }}).</dd>
    <dt>
      {{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt>
    <dd>
      Section or page footer.</dd>
    <dt>
      {{ HTMLElement("form") }}</dt>
    <dd>
      Input form.</dd>
    <dt>
      {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt>
    <dd>
      Heading levels 1-6.</dd>
    <dt>
      {{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt>
    <dd>
      Section or page header.</dd>
    <dt>
      {{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt>
    <dd>
      Groups header information.</dd>
    <dt>
      {{ HTMLElement("hr") }}</dt>
    <dd>
      Horizontal rule (dividing line).</dd>
    <br />
    <dt>
      {{ HTMLElement("noscript") }}</dt>
    <dd>
      Content to use if scripting is not supported or turned off.</dd>
    <dt>
      {{ HTMLElement("ol") }}</dt>
    <dd>
      Ordered list.</dd>
    <dt>
      {{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt>
    <dd>
      Form output.</dd>
    <dt>
      {{ HTMLElement("p") }}</dt>
    <dd>
      Paragraph.</dd>
    <dt>
      {{ HTMLElement("pre") }}</dt>
    <dd>
      Preformatted text.</dd>
    <dt>
      {{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt>
    <dd>
      Section of a web page.</dd>
    <dt>
      {{ HTMLElement("table") }}</dt>
    <dd>
      Table.</dd>
    <dt>
      {{ HTMLElement("tfoot") }}</dt>
    <dd>
      Table footer.</dd>
    <dt>
      {{ HTMLElement("ul") }}</dt>
    <dd>
      Unordered list.</dd>
    <dt>
      {{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt>
    <dd>
      Video player.</dd>
  </dl>
</div>
<h3 id="See_also" name="See_also">See also</h3>
<ul>
  <li><a href="/en-US/docs/HTML/Inline_elements" title="en/HTML/Inline_elements">Inline elements</a></li>
</ul>
Revert to this revision