是否有必要写<html>, <head>和<body>标签?
例如,我可以创建这样一个页面:
<!DOCTYPE html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<script src="js/head_script.js"></script><!-- this script will be in head //-->
<div>Some html</div> <!-- here body starts //-->
<script src="js/body_script.js"></script>
Firebug正确地将头部和身体分开:
W3C验证器表示它是有效的。
但我很少在网上看到这种做法。
有理由写这些标签吗?
谷歌HTML样式指南建议省略所有可选标签。
包括<html>, <head>, <body>, <p>和<li>。
从3.1.7可选标签:
For file size optimization and scannability purposes, consider
omitting optional tags. The HTML5 specification defines what tags can
be omitted.
(This approach may require a grace period to be established as a wider
guideline as it’s significantly different from what web developers are
typically taught. For consistency and simplicity reasons it’s best
served omitting all optional tags, not just a selection.)
<!-- Not recommended -->
<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>
<p>Sic.</p>
</body>
</html>
<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
与Liza Daly关于HTML5的说明相反,该规范实际上非常具体地规定了哪些标签可以省略,以及何时省略(规则与HTML 4.01略有不同,主要是为了澄清注释和空白等模糊元素的位置)
相关的参考文献是8.1.2.4 Optional tags,它说:
An html element's start tag may be omitted if the first thing inside the html element is not a comment.
An html element's end tag may be omitted if the html element is not immediately followed by a comment.
A head element's start tag may be omitted if the element is empty, or if the first thing inside the head element is an element.
A head element's end tag may be omitted if the head element is not immediately followed by a space character or a comment.
A body element's start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a script or style element.
A body element's end tag may be omitted if the body element is not immediately followed by a comment.
所以你的例子是有效的HTML5,并将被这样解析,html, head和body标签在它们的隐含位置:
<!DOCTYPE html><HTML><HEAD>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<script src="js/head_script.js"></script></HEAD><BODY><!-- this script will be in head //-->
<div>Some HTML content</div> <!-- here body starts //-->
<script src="js/body_script.js"></script></BODY></HTML>
注意,注释“this script will in head”实际上是作为body的一部分进行解析的,尽管脚本本身是head的一部分。根据规范,如果您希望完全不同,则</HEAD>和<BODY>标记不能被省略。(虽然相应的<HEAD>和</BODY>标签仍然可以。)
在HTML 4中省略它们是有效的:
7.3 HTML元素
开始标签:可选,结束标签:可选
7.4.1 HEAD元素
开始标签:可选,结束标签:可选
HTML文档的全局结构。
在HTML5中,没有确切的“必需”或“可选”元素,因为HTML5语法的定义更加松散。例如,title:
title元素在大多数情况下是必需的子元素,但是当更高级别的协议提供标题信息时,例如,当使用HTML作为电子邮件创作格式时,在电子邮件的主题行中,title元素可以被省略。
来自4.2.2 title元素。
在真正的XHTML5中省略它们是无效的,尽管这几乎从未被使用过(相对于XHTML-acting-like-HTML5)。
然而,从实际的角度来看,您通常希望浏览器以“标准模式”运行,以便在呈现HTML和CSS时具有可预测性。提供DOCTYPE和更结构化的HTML树将保证更可预测的跨浏览器结果。
html规范当然允许省略html、head和body标记。潜在的原因是浏览器总是寻求与现有的网页保持一致,而HTML的早期版本并没有定义这些元素。当HTML第一次这样做的时候,它是以一种当标签缺失时会推断的方式完成的。
在创建原型时,特别是在编写测试用例时,我经常发现省略标记很方便,因为它有助于使标记集中在有问题的测试上。推理过程应该以您在Firebug中看到的方式创建元素,浏览器在这方面是相当一致的。
但是…
Internet Explorer在这方面至少有一个已知的错误。甚至Internet Explorer 9也有这个功能。假设标记是这样的:
<!DOCTYPE html>
<title>Test case</title>
<form action='#'>
<input name="var1">
</form>
你应该(在其他浏览器中也会这样做)得到一个像这样的DOM:
HTML
HEAD
TITLE
BODY
FORM action="#"
INPUT name="var1"
但在ie浏览器中,你会得到这样的结果:
HTML
HEAD
TITLE
FORM action="#"
BODY
INPUT name="var1"
BODY
你自己看看吧。
此错误似乎仅限于任何文本内容和任何正文开始标记之前的表单开始标记。