Block-level elements

  • Revision slug: HTML/Block-level_elements
  • Revision title: Block-level elements
  • Revision id: 80037
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 12 words added, 12 words removed

Revision Content

Block-level elements may appear only in {{ HTMLElement("body") }}. Their most significant characteristic is that they place a line break before and after the element (thereby creating a stand-alone block of content).

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.

Elements

The following is a complete list of all HTML block level elements.

{{ HTMLElement("article") }} {{ HTMLVersionInline("5") }}
Article content.
{{ HTMLElement("aside") }} {{ HTMLVersionInline("5") }}
Aside content.
{{ HTMLElement("blockquote") }}
Long ("block") quotation.
{{ HTMLElement("body") }}
Page body.
{{ HTMLElement("br") }}
Line break.
{{ HTMLElement("button") }}
Push button.
{{ HTMLElement("canvas") }} {{ HTMLVersionInline("5") }}
Drawing canvas.
{{ HTMLElement("caption") }}
Table caption.
{{ HTMLElement("col") }}
Table column.
{{ HTMLElement("colgroup") }}
Group of table columns.
{{ HTMLElement("dd") }}
Definition description.
{{ HTMLElement("dt") }}
Definition term.
{{ HTMLElement("embed") }}
External content.
{{ 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("map") }}
Image map.
{{ HTMLElement("object") }}
Embeds an object.
{{ HTMLElement("ol") }}
Ordered list.
{{ HTMLElement("output") }} {{ HTMLVersionInline("5") }}
Form output.
{{ HTMLElement("p") }}
Paragraph.
{{ HTMLElement("pre") }}
Preformatted text.
{{ HTMLElement("progress") }} {{ HTMLVersionInline("5") }}
Displays progress of a time consuming task.
{{ HTMLElement("section") }} {{ HTMLVersionInline("5") }}
Section of a web page.
{{ HTMLElement("table") }}
Table.
{{ HTMLElement("tbody") }}
Table body.
{{ HTMLElement("textarea") }}
Form text input area.
{{ HTMLElement("tfoot") }}
Table footer.
{{ HTMLElement("th") }}
Table column or row heading.
{{ HTMLElement("thead") }}
Table header.
{{ HTMLElement("tr") }}
Table row.
{{ HTMLElement("ul") }}
Unordered list.
{{ HTMLElement("video") }} {{ HTMLVersionInline("5") }}
Video player.

See also

{{ languages( { "ja": "ja/HTML/Block-level_elements", "pl": "pl/HTML/Elementy_blokowe" } ) }}

Revision Source

<p>Block-level elements may appear only in {{ HTMLElement("body") }}. Their most significant characteristic is that they place a line break before and after the element (thereby creating a stand-alone block of content).</p>
<p>The differences between inline and block-level elements are:</p>
<dl> <dt> </dt><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>
<h2>Elements</h2>
<p>The following is a complete list of all HTML block level elements.</p>
<dl> <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline("5") }}</dt> <dd>Article content.</dd> <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline("5") }}</dt> <dd>Aside content.</dd> <dt>{{ HTMLElement("blockquote") }}</dt> <dd>Long ("block") quotation.</dd> <dt>{{ HTMLElement("body") }}</dt> <dd>Page body.</dd> <dt>{{ HTMLElement("br") }}</dt> <dd>Line break.</dd> <dt>{{ HTMLElement("button") }}</dt> <dd>Push button.</dd> <dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline("5") }}</dt> <dd>Drawing canvas.</dd> <dt>{{ HTMLElement("caption") }}</dt> <dd>Table caption.</dd> <dt>{{ HTMLElement("col") }}</dt> <dd>Table column.</dd> <dt>{{ HTMLElement("colgroup") }}</dt> <dd>Group of table columns.</dd> <dt>{{ HTMLElement("dd") }}</dt> <dd>Definition description.</dd> <dt>{{ HTMLElement("dt") }}</dt> <dd>Definition term.</dd> <dt>{{ HTMLElement("embed") }}</dt> <dd>External content.</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> <dt>{{ HTMLElement("li") }}</dt> <dd>List item.</dd> <dt>{{ HTMLElement("map") }}</dt> <dd>Image map.</dd> <dt>{{ HTMLElement("object") }}</dt> <dd>Embeds an object.</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("progress") }} {{ HTMLVersionInline("5") }}</dt> <dd>Displays progress of a time consuming task.</dd> <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline("5") }}</dt> <dd>Section of a web page.</dd> <dt>{{ HTMLElement("table") }}</dt> <dd>Table.</dd> <dt>{{ HTMLElement("tbody") }}</dt> <dd>Table body.</dd> <dt>{{ HTMLElement("textarea") }}</dt> <dd>Form text input area.</dd> <dt>{{ HTMLElement("tfoot") }}</dt> <dd>Table footer.</dd> <dt>{{ HTMLElement("th") }}</dt> <dd>Table column or row heading.</dd> <dt>{{ HTMLElement("thead") }}</dt> <dd>Table header.</dd> <dt>{{ HTMLElement("tr") }}</dt> <dd>Table row.</dd> <dt>{{ HTMLElement("ul") }}</dt> <dd>Unordered list.</dd> <dt>{{ HTMLElement("video") }} {{ HTMLVersionInline("5") }}</dt> <dd>Video player.</dd>
</dl>
<h3 name="See_also">See also</h3>
<ul> <li><a href="/en/HTML/Inline_elements" title="en/HTML/Inline_elements">Inline elements</a></li>
</ul>
<p>{{ languages( { "ja": "ja/HTML/Block-level_elements", "pl": "pl/HTML/Elementy_blokowe" } ) }}</p>
Revert to this revision