可省略的html标签及其实践 （本文不讨论xhtml、xml语法）
by 司徒正美
at 2012-12-03 15:10:00
original http://www.cnblogs.com/rubylouvre/archive/2012/12/03/2799538.html
原贴地址：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