219

有必要写<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 Validation 说它是有效的。

但我很少在网上看到这种做法。

有什么理由写这些标签吗？

4

6 回答 6

161

HTML 规范当然允许省略html、head和body 标签。根本原因是浏览器一直在寻求与现有网页保持一致，而 HTML 的早期版本并没有定义这些元素。当 HTML2.0首先，这样做的方式是在丢失时推断出标签。

我经常发现在原型设计时省略标签很方便，尤其是在编写测​​试用例时，因为它有助于将标记集中在有问题的测试上。推理过程应该完全按照您在 Firebug 中看到的方式创建元素，并且浏览器在这方面非常一致。

但...

IE 在这方面至少有一个已知的错误。甚至 IE9 也展示了这一点。假设标记是这样的：

<!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

自己看吧。

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

于 2011-04-12T23:57:38.520 回答
90

HTML 的 Google 样式指南建议省略所有可选标签。这
包括 <html>、<head>、<body>和<p>。<li>

https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags

出于文件大小优化和可扫描性目的，请考虑省略可选标签。HTML5 规范定义了哪些标签可以省略。

（这种方法可能需要建立一个宽限期作为更广泛的指导方针，因为它与 Web 开发人员通常被教导的内容大不相同。出于一致性和简单性的原因，最好省略所有可选标签，而不仅仅是选择。）

<!-- 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.
于 2014-09-09T16:18:49.187 回答
51

与@Liza Daly 关于 HTML5 的注释相反，该规范实际上非常具体地说明了哪些标签可以省略，以及何时可以省略（并且规则与 HTML 4.01 有点不同，主要是为了阐明注释和空格等模棱两可的元素所属的位置）

相关参考是http://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags，它说：

  • 如果 html 元素中的第一件事不是注释，则可以省略 html 元素的开始标记。

  • 如果 html 元素后面没有紧跟注释，则可以省略 html 元素的结束标记。

  • 如果元素为空，或者头部元素内的第一件事是一个元素，则头部元素的开始标签可以省略。

  • 如果 head 元素后面没有紧跟空格字符或注释，则可以省略 head 元素的结束标记。

  • 如果 body 元素为空，或者 body 元素内的第一件事不是空格字符或注释，则 body 元素的开始标记可以省略，除非 body 元素内的第一件事是脚本或样式元素。

  • 如果 body 元素后面没有紧跟注释，则可以省略 body 元素的结束标记。

因此，您的示例是有效的 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</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script></BODY></HTML>

请注意，注释“this script will be in head”实际上被解析为 body 的一部分，尽管脚本本身是 head 的一部分。根据规范，如果您希望它完全不同，那么</HEAD>and<BODY>标记可能不会被省略。（虽然对应的<HEAD>and</BODY>标签还是可以的）

于 2013-02-26T16:44:38.270 回答
16

在 HTML4 中省略它们是有效的：

7.3 The HTML element
start tag: optional, End tag: optional

7.4.1 The HEAD element
start tag: optional, End tag: optional

http://www.w3.org/TR/html401/struct/global.html

在 HTML5 中，没有确切的“必需”或“可选”元素，因为 HTML5 语法定义更松散。例如title：

在大多数情况下，title 元素是必需的子元素，但是当更高级别的协议提供标题信息时，例如当 HTML 用作电子邮件创作格式时，在电子邮件的主题行中，可以省略 title 元素.

http://www.w3.org/TR/html5/semantics.html#the-title-element-0

在真正的 XHTML5 中省略它们是无效的，尽管这几乎从未使用过（相对于 XHTML-acting-like-HTML5）。

然而，从实际的角度来看，您通常希望浏览器在“标准模式”下运行，以便在呈现 HTML 和 CSS 时具有可预测性。提供 DOCTYPE 和更结构化的 HTML 树将保证更可预测的跨浏览器结果。

于 2011-04-12T21:55:38.917 回答
16

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

它有两个效果 - 它使规范更加复杂，这反过来又使浏览器作者更难编写正确的实现（正如 IE 错误所证明的那样）。

这使得规范的这些部分出现浏览器错误的可能性很高。作为网站作者，您可以通过包含这些标签来避免该问题 - 因此，虽然规范没有规定您必须这样做，但这样做可以减少出错的可能性，这是一种良好的工程实践。

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

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

http://www.w3.org/html/wg/drafts/html/master/sections.html#the-body-element

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

所以这

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

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

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

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

你可以通过这样做明确

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

然后无论您首先拥有的是脚本还是 h1，它们都将不出所料地出现在 body 元素中。这些是重构和调试代码时容易忽略的事情。（例如，您有 JS 正在寻找正文中的第一个脚本元素 - 在第二个片段中它将停止工作）。

作为一般规则，明确的事情总是比让事情开放解释要好。在这方面，XHTML 更好，因为它强制您在代码中完全明确您的元素结构，这使得它更简单，因此不易被误解。

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

于 2014-01-14T12:01:06.640 回答
-4

Firebug 正确显示了这一点，因为您的浏览器会自动为您修复错误的标记。此行为未在任何地方指定，并且可能（将）因浏览器而异。这些标签是您使用的 DOCTYPE 所必需的，不应省略。

html 元素是每个 html 页面的根元素。如果您查看所有其他元素的描述，它会说明可以在哪里使用元素（几乎所有元素都需要头部或身体）。

于 2011-04-12T21:48:45.173 回答