區塊級元素
HTML（超文字標記語言, Hypertext Markup Language）元素通常為『區塊級』元素或是『行內級』元素。一個區塊級元素會藉由建立『區塊』的動作，完全佔滿其父元素（容器）的空間。本文將為你說明其意涵.
瀏覽器預設以在元素前後換行的方式，表現區塊級元素。視覺上會呈現為一排縱向堆疊的方塊。
備註：區塊級元素必定以換行方式，取得完整寬度的空間（向左右兩側儘可能地延伸出去）。
以下範例將展示區塊級元素的影響：
區塊級元素
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;
}
用法
- 區塊級元素只能出現於
<body>元素之內。
區塊級 vs. 行內元素
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.
相關元素
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).
<address>-
Contact information.
<article>-
Article content.
<aside>-
Aside content.
<blockquote>-
Long ("block") quotation.
<dialog>-
Dialog box.
<dd>-
Describes a term in a description list.
<div>-
Document division.
<dl>-
Description list.
<dt>-
Description list term.
<fieldset>-
Field set label.
<figcaption>-
Figure caption.
<figure>-
Groups media content with a caption (see
<figcaption>). -
Section or page footer.
<form>-
Input form.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>-
Heading levels 1-6.
<header>-
Section or page header.
<hgroup>-
Groups header information.
<hr>-
Horizontal rule (dividing line).
<li>-
List item.
<main>-
Contains the central content unique to this document.
-
Contains navigation links.
<ol>-
Ordered list.
<p>-
Paragraph.
<pre>-
Preformatted text.
<section>-
Section of a web page.
<table>-
Table.
<ul>-
Unordered list.