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

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

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

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

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

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

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

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

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

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

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

追溯歷史

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

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

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

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

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

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

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

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

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

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

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

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

HTML5 好樣的！

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

合法性

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

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

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

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

正確性

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

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

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

缺點(diǎn)

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

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

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

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

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

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

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

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

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

<meta> 標(biāo)簽甚至還有一個(gè)叫 content 的屬性！為什么不直接把 content 的值寫(xiě)在標(biāo)簽的內(nèi)容里呢？<input value="Value content"> 應(yīng)該寫(xiě)成 <input> Value content</input> ，就像 <textarea> 那樣。其他標(biāo)簽不一而足。

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

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

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

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

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

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

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