此篇會從，以前 HTML 標籤主要的兩種類型（區塊元素、行內元素）來開始介紹，最後會介紹新增的 Content categories。

區塊元素 block element

瀏覽器通常在顯示區塊元素時，在元素前後都有一個換行符號。可以把它們想像成一堆盒子（block box）。

常見的區塊元素有：<div>、<h1~h6>、<ul>、<li>、<p>、<hr> 其餘元素請參考 MDN 文件。

Tips

• 區塊元素都會另起一行
• 區塊元素寬度預設為父層寬度
• 區塊元素高度預設為內容本身的高度

<span class="bg-yellow-200">行內元素</span>
<div class="bg-sky-200">區塊元素</div>
<span class="bg-yellow-200">行內元素</span>

從上方範例來看區塊元素特性

• 區塊元素會另起一行，是因為瀏覽器會在區塊元素前後添加一個換行符號。
• 區塊元素寬度與父元素相同，是因為其特性會佔滿父元素（容器）的整個水平空間。
• 區塊元素高度預設為內容本身的高度，因此上方高度為預設文字樣式的高度。

行內元素 inline element

行內元素只會佔據定義元素標籤，本身的空間，而非破壞原本的內容的佈局。

常見的行內元素有：<a>、<span>、<br> 其餘元素請參考 MDN 文件。

Tips

• 並排
• 不會換行

<p class="bg-sky-200">
    這是一段還有<span class="bg-yellow-200">黃色文字</span>的段落</p>

從上方範例來看行內元素特性

• 並排特性，當相鄰元素為行內元素時，會使相鄰行內元素並排在同一行。
• 不會換行，只佔用必要的寬度（內容本身寬度）。

由於行內元素特性較多，此篇幅不會介紹太多，詳細的可以參考前面這篇文章 行內元素特性與常見錯誤用法。

區塊元素 vs. 行內元素

下方從三個方向（包裹彼此、起始位置、結構大小）來討論兩者差異。

包裹彼此

• 區塊元素可以包行內元素
• 行內元素不能包區塊元素（雖然不是不能包區塊元素，但不建議這麼做）

因為行內元素只會包含 data 以及其他行內元素，有一個例外就是 a 標籤。

起始位置

• 區塊元素只能從新的一行開始
• 行內元素可以在一行中任意位置開始

結構大小

• 區塊元素適用於比較大的結構
• 行內元素適用於比較小的結構

區塊元素可能包含行內元素和其他區塊元素，這種結構是為了區別出更大的結構，使區塊元素建立比行內元素更大型的結構。

Content categories

在歷史上元素被歸類為 區塊元素、行內元素。由於這是一種特徵的呈現，它現在變為 CSS Flow Layout 來指定。

區塊元素、行內元素主要為 HTML 4.01 之前使用，HTML5 後的元素被更複雜的 Content categories 所取代。

HTML5 後新增了很多語意化標籤（例如：header、footer、article）以及定義了更多不同種類的標籤（例如：canvas、audio、video），為了在使用 HTML 標籤時能夠清楚表達該區塊的用途，如果只靠 區塊元素、行內元素 來代表元素的種類鐵定是不夠的。

因此才會有新的 Content categories 出現，來依照不同的用途，區分出更多元素類別。

Tips

• 行內元素大致對應phrasing content的類別。
• 區塊元素沒有直接對應的類別，反而是和行內元素一起對應到 flow content 類別。

除了上述兩種類別外還有其餘幾種可以參考 MDN 文件（Metadata content、Sectioning content、Heading content、Embedded content、Interactive content、Palpable content、Form-associated content）。

reference

• Content categories
• MDN Block-level elements、inline element