HTML規(guī)范：標(biāo)簽，閉合還是不閉合？

作者：方應(yīng)杭編譯 2014-03-17 09:34:01

你在寫 HTML5 代碼的時(shí)候，糾結(jié)過，而且我發(fā)現(xiàn)這個(gè)話題其實(shí)比我想象中有意思的多。如果你對我的研究過程不感興趣，你可以直接跳到“合法性”這一節(jié)得到答案。

你在寫 HTML5 代碼的時(shí)候，是否糾結(jié)過應(yīng)該寫 <br /> 還是 <br>，是寫 <input /> 還是寫 <input>。寫 <script src="script.js" /> 為什么是錯(cuò)的呢？反正我糾結(jié)過，而且我發(fā)現(xiàn)這個(gè)話題其實(shí)比我想象中有意思的多。

如果你對我的研究過程不感興趣，你可以直接跳到“合法性”這一節(jié)得到答案。

無內(nèi)容元素（Void elements）

無內(nèi)容元素是一種不能包含任何內(nèi)容的特殊元素。而其他元素，比如 <div>，則既可以不包含任何內(nèi)容，又可以包含另一個(gè)元素或者文字。

比較常見的無內(nèi)容元素有：

<br> <hr> <img> <input> <link> <meta>

不太常見的無內(nèi)容元素有：

<area> <base> <col> <command> <embed> <keygen> 
<param> <source> <track> <wbr>

現(xiàn)存所有的無內(nèi)容元素就是以上這些了。

<br></br> 這樣的寫法是不合法的 HTML 寫法，因?yàn)樗凳?br 可以包含內(nèi)容（但 <br>你好！</br> 是完全沒有意義的）。而 <br> 和 <br /> 這兩種寫法都很常見。

盡管我們都知道 XHTML 強(qiáng)制你必須寫成 <br />，但 HTML 里卻沒有明文規(guī)定。

追溯歷史

為了完全地了解無內(nèi)容元素，我們有必要了解一下它的歷史。

HTML、XML 和 XHTML 都是基于 SGML 的，SGML 的全稱是“標(biāo)準(zhǔn)通用標(biāo)記語言”，起草于1986年。
HTML 和 XML 都派生自 SGML，其中 XML 是 SGML 的約束性子集，而 XHTML 是基于 XML 的。

XHTML 基本上和 HTML 一樣，但是是基于 XML 的。

知道這層關(guān)系后，接下來進(jìn)入本文最有意思的部分。

SGML 有一個(gè)特性叫做“無尾標(biāo)簽（NET，Null End Tag）”。當(dāng)標(biāo)簽內(nèi)只有簡單的文字的時(shí)候，使用無尾標(biāo)簽就可以無須再閉合這個(gè)標(biāo)簽了。比如你可以把 <quote>Quoted text</quote> 寫成 <quote/Quoted text/。（你沒有看錯(cuò)，這個(gè)標(biāo)簽中不含 >。）

那么，不包含任何內(nèi)容的標(biāo)簽就可以寫成 <quote// 了，其中 quote 是標(biāo)簽名，***個(gè) / 用于啟用無尾標(biāo)簽，第二個(gè) / 表示無尾標(biāo)簽結(jié)束。

如果按照這個(gè)邏輯，<br// 中的前半部分 <br/ 會(huì)被解析為 <br>，那么 <br/> 豈不是要被解析為 <br>> 了嗎？如果你和我想得一樣，你肯定也會(huì)覺得這種語法很蠢。

不幸的是 HTML4 規(guī)范的制定者們不這么認(rèn)為，并且把它寫進(jìn)規(guī)范里了。不過顯然當(dāng)時(shí)的瀏覽器廠商對這種語法也不以為然，支持的程度不大。（在這一點(diǎn)上，說不定瀏覽器廠商們做了一件好事。）

XML （也適用于 XHTML）規(guī)范的制定者意識到這種語法不怎么好，就直接沒有包含無尾標(biāo)簽這種特性，
同時(shí)為無內(nèi)容標(biāo)簽提供了一種比較好理解的語法。這種語法的名字叫做“無元素標(biāo)簽”，它看起來是這樣的：<br />。這種語法看起來非常自然，因此當(dāng)時(shí)的大多數(shù)開發(fā)者都認(rèn)為這才是正確的寫法。

幸運(yùn)地是 HTML 一直在改進(jìn)，W3C 的成員一直在從他們過去作出的錯(cuò)誤中學(xué)習(xí)經(jīng)驗(yàn)教訓(xùn)。因此 HTML5 相比之前的版本才有這么大的進(jìn)步。

在介紹 HTML5 的新語法時(shí)， W3C 說：

HTML5 的語法完全兼容 HTML4 和 XHTML1，但是不兼容 SGML 中那些晦澀的 HTML4 特性。比如無尾標(biāo)簽（<em/content/）。

HTML5 好樣的！

（我覺得他們應(yīng)該保留“短標(biāo)簽”特性，比如 <strong>不錯(cuò)喲</>，我覺得這個(gè)特性很酷。不過，至少現(xiàn)在的 HTML 已經(jīng)不再是那么雜亂無章了。）

合法性

好吧，我們回到文章開頭關(guān)于合法性的問題，目前的 HTML5 規(guī)范中關(guān)于非內(nèi)容標(biāo)簽的解釋是這樣的：

此類標(biāo)簽應(yīng)由下列部分組成，順序須與下表保持一致：

一個(gè) “<” 字符。
標(biāo)簽名。
此項(xiàng)可選，一個(gè)或多個(gè)屬性，每一個(gè)屬性的前面必須有一個(gè)或多個(gè)空格。
此項(xiàng)可選，一個(gè)或多個(gè)空格。
此項(xiàng)可選，一個(gè) “/” 字符，此項(xiàng)只能在無內(nèi)容元素中出現(xiàn)。
一個(gè) “>” 字符。

倒數(shù)第二部分的 “/” 字符是可選的，而且沒有任何實(shí)際含義。所以 <br> 和 <br /> 其實(shí)沒有實(shí)質(zhì)區(qū)別。

正確性

喜歡 XML 和 XHTML 的開發(fā)者可能會(huì)說，“對呀，雖然 / 是可選的，但是 <br /> 的寫法‘更正確’一些。”

我必須告訴你你錯(cuò)了。事實(shí)上，有觀點(diǎn)認(rèn)為無內(nèi)容標(biāo)簽里的 / 其實(shí)是一個(gè)被容忍的語法錯(cuò)誤。這種容忍是基于兼容性考慮的，它使得所有瀏覽器和解析器都把 <br> 和 <br /> 同等對待。

關(guān)于這一點(diǎn)，Google 代碼風(fēng)格指南也明確規(guī)定了不要關(guān)閉無內(nèi)容標(biāo)簽。

缺點(diǎn)

當(dāng)然，不關(guān)閉無內(nèi)容標(biāo)簽也有弊端，不過我認(rèn)為這掩蓋不了它的優(yōu)點(diǎn)：使你的代碼干凈簡潔。

***個(gè)缺點(diǎn)就是開發(fā)者必須知道哪些標(biāo)簽的無內(nèi)容標(biāo)簽。假設(shè)你不知道 <img> 是不是無內(nèi)容標(biāo)簽，那么當(dāng)你找不到它的閉合標(biāo)簽時(shí)，你就會(huì)疑惑到底應(yīng)不應(yīng)該關(guān)閉這個(gè)標(biāo)簽。不過無內(nèi)容標(biāo)簽總共也只有那么幾個(gè)，而且一般一眼就能看出來某個(gè)標(biāo)簽是不是無內(nèi)容標(biāo)簽。

第二個(gè)缺點(diǎn)是編輯器可能對沒有閉合的無內(nèi)容標(biāo)簽處理不好。編輯器的開發(fā)者們必須了解無內(nèi)容標(biāo)簽，提供恰當(dāng)?shù)恼Z法高亮和代碼補(bǔ)全。當(dāng)你在編輯器里寫了一個(gè) <input>，編輯器必須要知道它后面永遠(yuǎn)不會(huì)接一個(gè) </input>。

但是這些功能實(shí)現(xiàn)起來很簡單，我所知道的編輯器對這方面支持得都還挺好，所以這算不上一個(gè)真正的缺點(diǎn)。

我對無內(nèi)容標(biāo)簽的看法

我覺得無內(nèi)容標(biāo)簽這個(gè)概念其實(shí)是可以從 HTML 中剔除的，我們完全可以給這些標(biāo)簽添加內(nèi)容，來代替它的某些屬性。

以 <img> 標(biāo)簽為例，它有一個(gè)強(qiáng)制的 alt 屬性，這個(gè)屬性的存在是為了讓那些看不到圖片的用戶（可能是因?yàn)樯砣毕荩部赡苁且驗(yàn)樗麄兪褂玫脑O(shè)備不支持圖片）知道這個(gè)圖片的內(nèi)容是什么（如果圖片只是處于美觀考慮，你其實(shí)不應(yīng)該添加 alt 屬性）。

我的問題來了：為什么不用 <img> 的內(nèi)容代替 alt 屬性？我認(rèn)為這樣寫更直觀：

<img src="doge.png">Image of doge</img>。

所以真正應(yīng)該保留的無內(nèi)容標(biāo)簽只有少數(shù)幾個(gè)，只不過 W3C 必須考慮向后兼容性，所以要改變現(xiàn)狀還是很困難的。

***的想法：<script> 標(biāo)簽

這個(gè)標(biāo)簽真的很困擾我，因?yàn)樗暮x很簡單，寫法卻很羅嗦。<script src="my-script.js"></script> 這種寫法看起來似乎是錯(cuò)的，因?yàn)?<script> 的內(nèi)容與 my-script.js 并沒有邏輯關(guān)聯(lián)。（HTML 規(guī)范允許你同時(shí)給它添加內(nèi)容和 src 屬性）

問題在于 <script> 標(biāo)簽不是一個(gè)無內(nèi)容標(biāo)簽，你可以把 JavaScript 寫在它里面。所以這里并沒有可選的 / 閉合標(biāo)記（譯注：這就是為什么<script src="script.js" />的寫法是錯(cuò)的）。

使用 <link> 標(biāo)簽來代替 <script> 就***了，因?yàn)樗呀?jīng)被用于導(dǎo)入外部文件，而且提供了所有必需的屬性。當(dāng)然，Web 平臺總是需要考慮向后兼容，不然所有不支持這種語法的舊式瀏覽器全都無法解析你的頁面了。

原文鏈接： Matias Meno 翻譯：伯樂在線 - 方應(yīng)杭

譯文鏈接： http://blog.jobbole.com/61514/

責(zé)任編輯：林師授來源：伯樂在線