---
title: 區塊級元素
slug: Web/HTML/Block-level_elements
translation_of: Web/HTML/Block-level_elements
---
<p><span class="seoSummary">HTML (</span>超文字標記語言, <span class="seoSummary"><strong>Hypertext Markup Language</strong>) 元素通常為 "區塊級" 元素或是 <a href="/en-US/docs/HTML/Inline_elements" title="/en-US/docs/HTML/inline_elements">"行內" 元素</a>。 一個區塊級元素會藉由建立"區塊"的動作, 完全佔滿其父元素(容器)的空間。本文將為您說明其意涵.</span></p>

<p>瀏覽器預設以在元素前後換行的方式, 表現區塊級元素. 視覺上會呈現為一排縱向堆疊的方塊。</p>

<div class="note">
<p>區塊級元素必定以換行方式, 取得完整寬度的空間(向左右兩側儘可能地延伸出去)。</p>
</div>

<p>以下範例將展示區塊級元素的影響:</p>

<h2 id="Block-level_Example" name="Block-level_Example">區塊級元素</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="用法">用法</h2>

<ul>
 <li>區塊級元素只能出現於 {{ HTMLElement("body") }} 元素之內.</li>
</ul>

<h2 id="區塊級_vs._行內元素">區塊級 vs. 行內元素</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 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="相關元素">相關元素</h2>

<p>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).</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>Describes a term in a description list.</dd>
 <dt>{{ HTMLElement("div") }}</dt>
 <dd>Document division.</dd>
 <dt>{{ HTMLElement("dl") }}</dt>
 <dd>Description list.</dd>
 <dt>{{ HTMLElement("dt") }}</dt>
 <dd>Description list term.</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 the central content unique to this 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"><br>
 參閱</h3>

<ul>
 <li><a href="/en-US/docs/Web/HTML/Inline_elements" title="en/HTML/Inline_elements">行內元素</a></li>
</ul>