可省略的html标签及其实践 (本文不讨论xhtml、xml语法)
原贴地址:http://moonless.net/demo/optional-tags/
有些html元素的结束标签是可选的,如:body
、 colgroup
、 dd
、 dt
、 head
、 html
、 li
、 optgroup
、 option
、 p
、 tbody
、 td
、 tfoot
、 th
、 thead
、 tr
等
这些标签不一定需要结束是因为在多数情况下,它们的结束标签通过文档中的另一个标签隐式声明了。例如:在多数web页中,一个段落 <p>
后面通常跟着另一个段落或其它块级标签,浏览器会根据下一个段落的开始标签结束当前段落。
而像 <colgroup>
这样的标签,它们可以包含或不含类似 <col>
这样的特定标签。如果 <colgroup>
没包含 <col>
,即使不写 </colgroup>
也不会引起任何错误(列数可以通过span属性定义)。
√ 不写结束标签能提高页面加载速度
不写结束标签的最大好处是:由于这些标签实际占用了字符,省略它们可以让页面size变得更小。如果你正在寻找提高页面加载速度的方法,处理掉这些可选的结束标签是一个不错的开始。对那些有很多段落、表格的页面来说,这样做能节省不少开销。
√ 不写结束标签能避免textNode出现在元素前后
我们知道根据white-space processing model,源码中标签前后的空白字符在生成dom时,会按照规则进行忽略或合并。后者将成空白字符合并为一个空格,这会带来不少麻烦。
例如将一组块级元素 display
为 inline|inline-block
后,处理其间的空格会很痛苦。
× 不写结束标签可能带来的问题
这里列几个重要的:- 写结束标签是为了约束结构
- 虽然省略了结束标签的web页能快速加载,但它也许马上会变成你的维护负担。 比如,为省略了结束标签的表格添加新行或列时你可能会觉得很痛苦。虽然能用插入缩进来解决,但这同时抵消了不写结束标签提高的那一点点工作效率。
- css、js依赖完整元素
- 虽然多数浏览器可以显示并渲染标签没有闭合的元素,但主动闭合标签能明确js和css的行为。 如果你在使用非常精确的布局,并省去结束标签,这同时意味着放弃了对精度、健壮度的控制——你让浏览器自行判断标签的结束位置,但有时它很棒,有时它很囧……
- 结束标签有时不能省略
- 在HTML5中,
</p>
标签在后面直接跟大约25种元素时可以被省略。但HTML5中有超过100种元素,你能记住可省略结束标签的每种情形吗?也许不省略它们更容易些。
可选的html标签及其约束
译注1:下表中,如非特别说明, 空白字符 在文档中、节点前后都是可以存在或忽略的
译注2:“空白字符”是指:空格(U+0020)、制表符(U+0009)、换行(U+000A)、回车(U+000D)、换页(U+000C)。
译注3:下表中,“元素”均指 nodeType=1 的dom节点)
注1:省略元素的开始标签并不意味着开始标签不存在,它仍是隐式存在的。例如,一个HTML文档总是有一个根html元素,尽管字符串 <html>
并未在文档中出现。)
可省标签 | 省略前提 |
---|---|
<html>
|
|
</html>
| |
<head>
|
|
</head>
| |
<body>
| |
</body>
| |
</li>
| |
</dt>
| |
</dd>
| |
</p>
| |
</rt>
| |
</rp>
| |
</optgroup>
| |
</option>
| |
<colgroup>
| |
</colgroup>
| |
</thead>
| |
<tbody>
| |
</tbody>
| |
</tfoot>
| |
</tr>
| |
</td>
| |
</th>
|
参考资料:
http://webdesign.about.com/od/htmltags/qt/optional-html-end-tags-when-to-include-them.htm