那些前端程序员深信不疑的谣言（ HTML 篇）

本文不考虑「团队规范」、「可读性」，只谈「语法」。

你了解完语法再去搞什么「团队规范」、「可读性」吧，不要本末倒置。

这里只讨论 HTML 5 ，不讨论 HTML 4.x 和 XHTML ，谨记！

谣言 1 ：属性一定要用引号包起来，比如 <div id="test">

正解： HTML 文档写得很清楚，属性有四种写法（突然有茴香豆既视感 /(ㄒoㄒ)/~~）

1 <input disabled>
2 <input value=yes>
3 <input type='checkbox'>
4 <input name="be evil">

有人一定会说加引号「最安全」，骗新人说「引号必须写」很省事啊。

我对此嗤之以鼻。

谣言 2 ：自闭合标签一定要以 /> 结尾，比如 <input /> <img />

正解：其实在 HTML 5 里 <input> 才是正确写法，详见 HTML 5 规范文档里的三处

Void elements only have a start tag;
Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single "/" (U+002F) character. This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.
Void elements: area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

很容易推理出：对于 void elements ，<meta /> 完全可以写成 <meta>，而且是推荐写法。

谣言 3 ：所有标签必须闭合，比如 <p></p>

正解：请看 HTML 5 规范文档

A p element's end tag may be omitted if the p element is immediately followed by ...

所以以下写法完全符合要求

<p> 你好，
<p> 我是方方

谣言 4 ： HTML 5 文档里必须写 <html> <head> 和 <body> 标签

正解：在没有注释的前提下，这三个标签都是可不写的。具体看规范文档。

下面这段 HTML 是合法的 HTML 5

<!DOCTYPE html>
<title>这是一个合法的 HTML 5 文档</title>
<meta charset="UTF-8">
<p>这是一个合法的 HTML 5 文档

以上哪个谣言是你深信不疑的？

Arthur2e5

2017 年 2 月 28 日

纠正一个用词：我个人其实很不喜欢“ HTML 5 ”这个叫法——各种幺蛾子版本号都是 W3C 定期把东西爬过来改个名整出来的。现在的 HTML 是 WHATWG Living Standard ，活的。看着不爽了上 GitHub 报 Issue 还可以把自己的名字丢进去。

可选标签有个 https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission 下面的表格例子，读起来超棒。

* * *

@edsgerlin Valid XML 是要从 xmlns 和不用自定义元素做起的，可以说是超级难。现在没人用 XSLT ，那就不管了吧……

@murmur 分不清 DOM 这个抽象后的结构和 HTML 源码本身真是超棒的啊。要是我告诉你早期 SGML 是像 Markdown 一样让人写起来舒服的你大概能吓死？前端世界的发展史真是 When in doubt, add a transpiler 的典范。

如果一个东西是事实，那何止是一九开？完全就是零十开。

@MinonHeart 大部分的省略功能在 HTML4 甚至 HTML1 和 SGML 就有定义。早期的 HTML 甚至没有 head 、 body: https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html 为了向下兼容性这些省略必须进 spec 的。

当然某著名头疼浏览器（旧版 IE ）确实在这方面有一个小问题，见 https://stackoverflow.com/questions/5641997/is-it-necessary-to-write-head-body-and-html-tags 提到的 form 例子。

@shijingshijing 有大规模实现的定义就不是 ambiguity 。如果有问题是你实现的问题。

@halden 实现有误。

@ltux 见上， HTML 本来就是写得舒服的。

@Felldeadbird 建议你考虑一下“全部都要”取否之后是“全都不要”还是“一些不要”。

@xuhai951753 @R18 不新，甚至很老。现在的“传统”很多是 XHTML 成风那会儿遗留下来半正式半缺东西的玩意儿，反正还是不能当 XHTML 用。