HTML 标簽，閉合還是不閉合？

你在寫 html5 代碼的時候，是否糾結過應該寫

還是

，是寫 還是寫 。寫 為什麼是錯的呢？反正我糾結過，而且我發現這個話題其實比我想象中有意思的多。

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

無内容元素（void elements）

無内容元素是一種不能包含任何内容的特殊元素。而其他元素，比如

，則既可以不包含任何内容，又可以包含另一個元素或者文字。

比較常見的無内容元素有：

不太常見的無内容元素有：

現存所有的無内容元素就是以上這些了。

這樣的寫法是不合法的 html 寫法，因為它暗示 br 可以包含内容（但

你好！ 是完全沒有意義的）。而

和

這兩種寫法都很常見。

盡管我們都知道 xhtml 強制你必須寫成

，但 html 裡卻沒有明文規定。

追溯曆史

為了完全地了解無内容元素，我們有必要了解一下它的曆史。

html、xml 和 xhtml 都是基于 sgml 的，sgml 的全稱是“标準通用标記語言”，起草于1986年。

html 和 xml 都派生自 sgml，其中 xml 是 sgml 的限制性子集，而 xhtml 是基于 xml 的。

xhtml 基本上和 html 一樣，但是是基于 xml 的。

知道這層關系後，接下來進入本文最有意思的部分。

sgml 有一個特性叫做“無尾标簽（net，null end tag）”。當标簽内隻有簡單的文字的時候，使用無尾标簽就可以無須再閉合這個标簽了。比如你可以把 quoted text 寫成 。）

那麼，不包含任何内容的标簽就可以寫成

如果按照這個邏輯，

，那麼

豈不是要被解析為

> 了嗎？如果你和我想得一樣，你肯定也會覺得這種文法很蠢。

不幸的是 html4 規範的制定者們不這麼認為，并且把它寫進規範裡了。不過顯然當時的浏覽器廠商對這種文法也不以為然，支援的程度不大。（在這一點上，說不定浏覽器廠商們做了一件好事。）

xml （也适用于 xhtml）規範的制定者意識到這種文法不怎麼好，就直接沒有包含無尾标簽這種特性，

同時為無内容标簽提供了一種比較好了解的文法。這種文法的名字叫做“無元素标簽”，它看起來是這樣的：

。這種文法看起來非常自然，是以當時的大多數開發者都認為這才是正确的寫法。

幸運地是 html 一直在改進，w3c 的成員一直在從他們過去作出的錯誤中學習經驗教訓。是以 html5 相比之前的版本才有這麼大的進步。

在介紹 html5 的新文法時， w3c 說：

html5 的文法完全相容 html4 和 xhtml1，但是不相容 sgml 中那些晦澀的 html4 特性。比如無尾标簽（

html5 好樣的！

（我覺得他們應該保留“短标簽”特性，比如 不錯喲>，我覺得這個特性很酷。不過，至少現在的 html 已經不再是那麼雜亂無章了。）

合法性

好吧，我們回到文章開頭關于合法性的問題，目前的 html5 規範中關于非内容标簽的解釋是這樣的：

此類标簽應由下列部分組成，順序須與下表保持一緻：

一個 “<” 字元。

标簽名。

此項可選，一個或多個屬性，每一個屬性的前面必須有一個或多個空格。

此項可選，一個或多個空格。

此項可選，一個 “/” 字元，此項隻能在無内容元素中出現。

一個 “>” 字元。

倒數第二部分的 “/” 字元是可選的，而且沒有任何實際含義。是以

其實沒有實質差別。

正确性

喜歡 xml 和 xhtml 的開發者可能會說，“對呀，雖然 / 是可選的，但是

的寫法‘更正确’一些。”

我必須告訴你你錯了。事實上，有觀點認為無内容标簽裡的 / 其實是一個被容忍的文法錯誤。這種容忍是基于相容性考慮的，它使得所有浏覽器和解析器都把

同等對待。

關于這一點，google 代碼風格指南 也明确規定了不要關閉無内容标簽。

缺點

當然，不關閉無内容标簽也有弊端，不過我認為這掩蓋不了它的優點：使你的代碼幹淨簡潔。

第一個缺點就是開發者必須知道哪些标簽的無内容标簽。假設你不知道 是不是無内容标簽，那麼當你找不到它的閉合标簽時，你就會疑惑到底應不應該關閉這個标簽。不過無内容标簽總共也隻有那麼幾個，而且一般一眼就能看出來某個标簽是不是無内容标簽。

第二個缺點是編輯器可能對沒有閉合的無内容标簽處理不好。編輯器的開發者們必須了解無内容标簽，提供恰當的文法高亮和代碼補全。當你在編輯器裡寫了一個 ，編輯器必須要知道它後面永遠不會接一個 。

但是這些功能實作起來很簡單，我所知道的編輯器對這方面支援得都還挺好，是以這算不上一個真正的缺點。

我對無内容标簽的看法

我覺得無内容标簽這個概念其實是可以從 html 中剔除的，我們完全可以給這些标簽添加内容，來代替它的某些屬性。

以 标簽為例，它有一個強制的 alt 屬性，這個屬性的存在是為了讓那些看不到圖檔的使用者（可能是因為生理缺陷，也可能是因為他們使用的裝置不支援圖檔）知道這個圖檔的内容是什麼（如果圖檔隻是處于美觀考慮，你其實不應該添加 alt 屬性）。

我的問題來了：為什麼不用 的内容代替 alt 屬性？我認為這樣寫更直覺：

image of doge。

标簽甚至還有一個叫 content 的屬性！為什麼不直接把 content 的值寫在标簽的内容裡呢？ 應該寫成 value content ，就像 那樣。其他标簽不一而足。

是以真正應該保留的無内容标簽隻有少數幾個，隻不過 w3c 必須考慮向後相容性，是以要改變現狀還是很困難的。

最後的想法：

這個标簽真的很困擾我，因為它的含義很簡單，寫法卻很羅嗦。 這種寫法看起來似乎是錯的，因為

問題在于

使用 标簽來代替

原文連結： matias meno 翻譯： 伯樂線上 - 方應杭