是否有必要写<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规范允许在某些情况下省略某些标记,但通常这样做是不明智的。

它有两个影响——它使规范更加复杂,这反过来又使浏览器作者更难编写正确的实现(Internet Explorer就犯了错误)。

这使得在规范的这些部分出现浏览器错误的可能性很高。作为一个网站的作者,你可以通过包含这些标签来避免这个问题——所以虽然规范没有说你必须这样做,但这样做可以减少出错的几率,这是很好的工程实践。

更重要的是,最新的HTML 5.1 WG规范目前说(记住,这是一项正在进行的工作,可能会改变)。

如果元素为空,则可以省略body元素的开始标记 如果body元素中的第一个元素不是空格字符或 注释,除非body元素中的第一个元素是A 元、链接、脚本、样式或模板元素。

来自4.3.1 body元素。

这有点微妙。您可以省略body和head,然后浏览器将推断出应该插入这些元素的位置。这样做有不明确的风险,可能会导致混乱。

所以这

<html>
  <h1>hello</h1>
  <script ... >
  ...

导致script元素成为body元素的子元素,但这

<html>
  <script ... >
  <h1>hello</h1>

将导致script标记成为head元素的子元素。

你可以这样做:

<html>
    <body>
      <script ... >
      <h1>hello</h1>

然后不管你先写哪个,script还是h1,它们都可以预见地出现在body元素中。这些都是在重构和调试代码时很容易忽略的事情(例如,你有一个JavaScript,它正在寻找主体中的第一个脚本元素-在第二个片段中它将停止工作)。

一般来说,把事情说清楚总比把事情留给别人去解释要好。在这方面,XHTML更好,因为它迫使您在代码中完全显式地说明元素结构,这使代码更简单,因此不容易被误解。

所以,是的,你可以省略它们,在技术上是有效的,但这样做通常是不明智的。

其他回答

谷歌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

你自己看看吧。

此错误似乎仅限于任何文本内容和任何正文开始标记之前的表单开始标记。

的确,HTML规范允许在某些情况下省略某些标记,但通常这样做是不明智的。

它有两个影响——它使规范更加复杂,这反过来又使浏览器作者更难编写正确的实现(Internet Explorer就犯了错误)。

这使得在规范的这些部分出现浏览器错误的可能性很高。作为一个网站的作者,你可以通过包含这些标签来避免这个问题——所以虽然规范没有说你必须这样做,但这样做可以减少出错的几率,这是很好的工程实践。

更重要的是,最新的HTML 5.1 WG规范目前说(记住,这是一项正在进行的工作,可能会改变)。

如果元素为空,则可以省略body元素的开始标记 如果body元素中的第一个元素不是空格字符或 注释,除非body元素中的第一个元素是A 元、链接、脚本、样式或模板元素。

来自4.3.1 body元素。

这有点微妙。您可以省略body和head,然后浏览器将推断出应该插入这些元素的位置。这样做有不明确的风险,可能会导致混乱。

所以这

<html>
  <h1>hello</h1>
  <script ... >
  ...

导致script元素成为body元素的子元素,但这

<html>
  <script ... >
  <h1>hello</h1>

将导致script标记成为head元素的子元素。

你可以这样做:

<html>
    <body>
      <script ... >
      <h1>hello</h1>

然后不管你先写哪个,script还是h1,它们都可以预见地出现在body元素中。这些都是在重构和调试代码时很容易忽略的事情(例如,你有一个JavaScript,它正在寻找主体中的第一个脚本元素-在第二个片段中它将停止工作)。

一般来说,把事情说清楚总比把事情留给别人去解释要好。在这方面,XHTML更好,因为它迫使您在代码中完全显式地说明元素结构,这使代码更简单,因此不容易被误解。

所以,是的,你可以省略它们,在技术上是有效的,但这样做通常是不明智的。