前言
前端程序員在學習HTML的過程中，肯定接觸過頁面元素的兩個基本類型：塊狀元素和行內元素，也有大量的技術文章或者教程在介紹這兩個概念。但這兩個HTML元素相關的概念從字面上卻和CSS樣式有着很深的聯系，這種聯系有悖於Web規范中一直倡導的表現和樣式分離這一核心思想。在HTML5新規范中，已經淡化了元素的這兩種分類，取而代之的方案是更具有語義的HTML元素分類方式。在介紹新分類之前，先來談談塊狀元素和行內元素這兩個概念。
塊元素和行內元素
在W3C制定的HTML4.01規范中，有關內容模型部分詳細地介紹了塊狀元素和行內元素。對於這兩種類型的元素，可以從元素在瀏覽器中的默認渲染樣式上來進行區分，塊狀元素在頁面中單獨占一行，即display樣式的默認值為block，而行內元素則顯示在行中，display樣式的默認值為inline或者inline-block。
常見的塊狀元素有：
<div>、<p>、<table>、<ul>、<ol>、<h1>~<h6> 等。常見的行內元素有：<span>、<img>、<a>、<em>、<input>、<select>等。
從默認樣式上區分塊狀元素和行內元素不難，但要理解它們，還得從語義角度出發。塊狀元素可以包含其它元素，比如p元素可以包含文本和行內元素，<div>可以包含文本、塊狀元素和行內元素。行內元素表示頁面內容，只能包含行內元素，不能包含塊狀元素。盡管可以通過設置display樣式來改變行內元素和塊狀元素的默認樣式，但是其所具有的語義並不會隨着樣式的更改而更改，即行內元素設置了display樣式為block並沒有把行內元素更改為塊狀元素。
從字面意思來看，這兩個概念很容易混淆，很多新手並沒有深入地理解這兩種元素類型的實際含義，所以很多情況下並沒有正確的應用，僅僅是從頁面布局的角度出發使用塊狀元素和行內元素。大量的技術文章也誤導了很多新手，搜索有關塊狀元素和行內元素的文章，基本上都是在討論這兩種類型元素的外在默認樣式，其實質上討論的是兩個display樣式值block和inline的區別。從樣式角度理解原生的元素，這有點本末倒置。在前面的章節中反復強調，在構建頁面HTML過程中，首先考慮的是語義，判斷使用的元素合適與否，就是要判斷元素對應的標簽是否符合當前元素所要表達的語義，而不是元素的樣式是不是更符合當前的UI設計。
HTML5中的定義了內容模型，淡化了塊元素和行內元素
為了消除塊狀元素和行內元素這兩個概念引起的混淆，在HTML5規范中刻意淡化了塊狀元素和行內元素的定義，並按照元素具體的語義重新划分了元素的類型。HTML5中的分類比HTML4.01中的分類更具體，總共分為七類，每種元素並不限定於某一類型，有可能某個元素屬於多個類型，以下是具體的分類 ：
- 元數據式內容（Metadata content）：
<base>、<command>、<link>、<meta>等 - 流式內容（Flow content）：
<span>、<div>等。這個分類基本包括了HTML4.01中的塊狀元素和行內元素。 - 章節式內容：
<article>、<aside>、<nav>以及<section> - 標題式內容：
<h1>~<h6>、<hgroup>。 - 段落式內容：
<span>、<img>等。基本上等同於HTML4.01中行內元素的范圍。 - 嵌入式內容：
<img>、<iframe>、<svg>、<audio>、<video>、<canvas>等。 - 交互式內容：
<a>、<button>、<select>、<input>等。
規范中還提供了一張各元素類型之間的包含關系圖，如圖4-11所示。
圖 HTML5規范中，標簽類型關系圖
從內容模型上來說，在HTML4.01規范的內容模型部分還規定了塊狀元素和行內元素中內容的限制，比如行內元素不可以包含塊狀元素，某些塊狀元素只能包含行內元素和文字，某些塊狀元素則可以包含塊狀元素、行內元素和文字等。更混亂的是在HTML4.01 Transitional模式下和Strict模式下的規則還不完全相同。HTML5規范中結束了這種混亂的局面，並且從實際應用需求出發重新定義了內容模型。舉一個例子，假設在頁面中有一塊區域需要整個添加鏈接，應該怎么辦？a元素在HTML4.01中屬於行內元素，按照HTML4.01定義的內容模型規則，行內元素是不能夠包含塊狀元素的，假設區域的HTML代碼如下：
<h1>標題<h1>
<div>正文內容</div>
在HTML4.01規范中，只能在<h1>元素和<div>元素內部添加<a>元素，並把文本放置在<a>元素內。
<h1><a href=detail.html>標題</a><h1>
<div><a href=detail.html>正文內容</a></div>
但在HTML5中，可以這樣添加：
<a href=detail.html>
<h1>標題<h1>
<div>正文內容</div>
</a>
結論
HTML5中<a>元素可以包含塊狀元素了，這樣的定義完全是為了解決現實問題，拋棄了HTML4.01中規定的內容模型。更多有關內容模型的差異，可以查看W3C官網上有關HTML5規范和之前規范的差異的文章。
前端開發者在以后的前端開發中無須受這兩個概念對應的內容模型規則的束縛，應該結合實際的頁面設計需求重新認識HTML5規范中的內容模型，並徹底拋棄塊狀元素和行內元素這兩個概念。