是否有必要编写HEAD，BODY和HTML标签？

194

是否有必要写<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  tags 
— 拉里（Larry Cinnabar）
source
5
位于html5.validator.nu的HTML5验证器需要title标记。这是它认为有效的最小文件：<!DOCTYPE html> <title>A</title>
— bonh，2015年

Answers:

142

省略html，head和body 标签肯定是由HTML规范允许的。根本原因是浏览器一直试图与现有网页保持一致，而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开始标记之前的开始标记。

— 阿罗奇
source
5
HTML 1.0定义的HTML，HEAD和BODY：w3.org/MarkUp/draft-ietf-iiir-html-01.txt
— Liza Daly
6
@Liza-嗯，该文档是否定义了HTML 1.0还是有争议的，但我认为，这些元素早于HTML 2.0。谢谢。但是，请参阅1992年的w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/…。那时该元素不存在。
— Alohci 2011年
1
此错误似乎不会影响Internet Explorer 11（我也测试了IE8，并确认它受到了影响）
— jornane 2014年
2
@Justin-这些限制在很大程度上是技术性的，通常不会影响您。所以是的，如果注释节点或空白出现在head元素之前还是在head元素内部（页面的JS 可能依赖于它）对您的页面很重要，那么您必须明确标识head开始标记以使这种关系正确。但是，如果不是这样（并且我还没有写过HTML页面的地方），那么head标签将被推断为明智的位置，您可以放心地忽略它。同样对于其他html，head和body标签。
— Alohci 2014年
3
@Justin这个答案似乎有一个线索，因为问题是“是否有必要编写HEAD，BODY和HTML标签？” 这不是一个好习惯。约定可能会发生变化...只需看一下Google样式指南...该约定表明您应省略这些标签... :-)
— Potherca
77

《 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.
— 里马
source
2
不兼容的示例：我用于Web开发（实时）的实时重新加载工具会自动在头中插入脚本。最后没有<head>标记，它将无法正常工作。
— Offirmo
@Offirmo那是什么？
— 肯·夏普
@KenSharp livereload Web开发工具通常可以通过在所服务的页面中插入一些代码来工作，例如：<script src="http://localhost:35729/livereload.js"></script>。对于奇特的模板，他们不知道应该在哪里插入代码。
— Offirmo '02
1
@offirmo livereload的文档说明您应该自己将该脚本添加到客户端页面。也许您正在使用为您执行此操作的魔术库。那应该是您遇到困难的根源。
— kequc '16
7
忽略所有可能的标签是明智的和愚蠢的。节省的带宽仅占很小的百分比（尤其是由于大多数连接都自动压缩），而在极端情况下的人为错误几率很高（请考虑作者，编辑器甚至HTML解析器编写器）。也很难发现错误（由于熵的变化）。
— TextGeek
48

与@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元素的开始标签。

  • 如果head元素后面没有空格或注释，则可以省略head元素的end标签。

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

  • 如果body元素后没有紧随其后的注释，则可以省略body元素的end标签。

因此，您的示例是有效的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>

请注意，尽管脚本本身是头部的一部分，但注释“此脚本将在头部”实际上被解析为正文的一部分。根据规范，如果您希望完全不同，则不得省略</HEAD>和<BODY>标签。（尽管相应的<HEAD>和</BODY>标签仍然可以）

— 伊恩·克莱兰德
source
15

在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用作电子邮件创作格式时，在电子邮件的Subject行中），可以省略title元素。

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

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

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

— 丽莎·戴利（Liza Daly）
source
13
不要将元素与标签混淆。请参阅本页其他地方的cHao的评论。对于html，head和body，元素是必选的，但标签是可选的。
— Alohci 2011年
实际上，您在最后一点上是错误的。标记遗漏是SGML DTD的一项功能，所有支持SGML解析的浏览器（即所有浏览器）也都支持标记遗漏。之所以不能在XHTML5中执行此操作，是因为它是XML，而不是SGML。XML太笨拙，无法推断元素。
— OdraEncoded 2013年
@OdraEncoded您能为您的声明提供验证吗？我发现情况并非如此（请参见HTML标准）。
— 牙刷
@OdraEncoded-关闭，但是不太正确。根据ISO 8879的定义，标记遗漏是SGML解析器的一项可选功能（尽管大多数支持），尽管Python的'html.parse'似乎不支持，但几乎所有HTML解析器都支持它（请参见stackoverflow.com/questions/29954170/…）。
— TextGeek
14

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

它有两个作用-使规范更加复杂，从而使浏览器作者更难编写正确的实现（如IE弄错了演示）。

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

更重要的是，最新的HTML 5.1 WG规范目前表示（请注意，这是一项正在进行中的工作，可能还会更改）。

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

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

这有点微妙。您可以省略身体和头部，然后浏览器将推断出这些元素应插入的位置。这带有不明确的风险，这可能引起混乱。

所以这

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

导致script元素是body元素的子元素，但这

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

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

您可以通过这样做来明确

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

然后，无论您拥有脚本或h1中的哪个，它们都将可预测地出现在body元素中。这些都是在重构和调试代码时容易忽略的事情。（例如，假设您有JS在体内寻找第一个脚本元素-在第二个片段中它将停止工作）。

一般而言，对事物保持露骨总比使事物易于解释容易。在这方面，XHTML更好，因为它迫使您完全清楚地了解代码中的元素结构，这使其更简单，因此不容易被误解。

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

— 彼得·巴格纳尔
source
1
IE出错了，因为作者根本不在乎标准。如果不能正常工作是他们的错。定义了标准，因此它们应确保IE可以使用它们。
— 肯·夏普
3
@KenSharp我不同意，但是直到您可以强迫所有客户不要使用它之前，我们还是会坚持下去。因此，最好编写完全明确的代码，而不是依赖一切正常工作。
— Peter Bagnall
1
多年来，用户一直由于不符合要求而被迫丢弃IE。没有人期望用户继续使用IE6，即使人们仍在安装Windows XP。我们也不能指望永远支持Windows 3.1。OSI 8级错误。
— 肯·夏普
1
确切的标记可以省略，确切的位置，也随HTML版本的不同而不同。避免它们似乎也是一个很好的理由（最明显，最常见和最一致的情况除外）。
— TextGeek
@TextGeek <!DOCTYPE html>。
— 挪威
-2

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

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

— Halfdan
source
那么，可能是非跨浏览器吗？
— 拉里·朱纳巴尔
5
换句话说-不良做法会产生不确定的结果。
— 兰迪
3
@Innuendo仅仅因为一件大事并不意味着它已经很好地组合在一起了。
— Demian Brecht
2
作为对权威的呼吁，我认为这令人信服。google.com也是无效的HTML。并不意味着您应该如此。
— Rein Henrichs
17
元素必须存在。没有说的标签做。实际上，不带html / head / body标签的HTML是有效的，只要没有元素出现在不应该出现的位置即可。（<title>后一<p></p>，例如。）
— 超
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.