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 属性?我认为这样写更直观:

doge.pngImage of doge。

标签甚至还有一个叫 content 的属性!为什么不直接把 content 的值写在标签的内容里呢? 应该写成 Value content ,就像 那样。其他标签不一而足。

所以真正应该保留的无内容标签只有少数几个,只不过 W3C 必须考虑向后兼容性,所以要改变现状还是很困难的。

最后的想法:

这个标签真的很困扰我,因为它的含义很简单,写法却很罗嗦。 这种写法看起来似乎是错的,因为

问题在于

使用 标签来代替

原文链接: Matias Meno 翻译: 伯乐在线 - 方应杭

文章转载自 开源中国社区 [http://www.oschina.net]

相关文章
|
2月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
58 5
|
22天前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
87 49
|
16天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
30 5
|
1月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
1月前
|
存储 移动开发 前端开发
|
2月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
45 2
|
2月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
41 1
|
3月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
152 1
|
3月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
319 1
|
2月前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
121 0