Revision 979705 of Block-level elements

<p><span class="seoSummary">HTML (<strong>Hypertext Markup Language</strong>) elements are usually either "block-level" elements or <a href="/en-US/docs/HTML/Inline_elements" title="/en-US/docs/HTML/inline_elements">"inline" elements</a>. 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.</span></p>

<p>Browsers typically display the block-level element with a newline both before and after the element. The following example demonstrates the block-level element's influence:</p>

<h2 id="Block-level_Example" name="Block-level_Example"><span style="color:rgb(51, 51, 51); margin-left:-3px; text-transform:none">Block-level elements</span></h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">
&lt;p&gt;This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.&lt;/p&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">
p { background-color: #8ABB55; }
</pre>

<p>{{ EmbedLiveSample('Block-level_Example') }}</p>

<h2 id="Usage">Usage</h2>

<ul>
 <li>Block-level elements may appear only within a {{ HTMLElement("body") }} element.</li>
</ul>

<h2 id="Block-level_vs._inline">Block-level vs. inline</h2>

<p>There are a couple of key differences between block-level elements and inline elements:</p>

<dl>
 <dt>Formatting</dt>
 <dd>By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.</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("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>
</dl>

<dl>
 <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("main") }}</dt>
 <dd>Contains&nbsp;the central content unique to this&nbsp;document.</dd>
 <dt>{{ HTMLElement("nav") }}</dt>
 <dd>Contains navigation links.</dd>
</dl>

<dl>
 <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/Web/HTML/Inline_elements" title="en/HTML/Inline_elements">Inline elements</a></li>
</ul>