流浪开始标签html和head答案

【问题标题】：Stray start tag html and head流浪开始标签html和head
【发布时间】：2014-07-22 03:11:50
【问题描述】：

我是一名新程序员，在我的第一个 RoR 网站上工作（使用已实施的引导主题）并且在处理 HTML 时遇到了一些（看似简单的）问题，通过 facebook 调试器发现了图像共享问题。错误显示“您的页面在正文而不是头部有元标记。这可能是因为您的 HTML 格式错误，它们在解析树中的位置较低。请修复此问题，以便标签可用。

我在http://validator.w3.org/ 使用 HTML5 进行了测试。这是我特别好奇的两个错误：

Line 33, Column 20: Stray start tag html.
<html class="no-js">

Line 36, Column 6: Stray start tag head.
<head>

我已经对此进行了一段时间的研究，并发现了许多类似的问题： Stray start tag html, Stray start tag HTML in validator?, Stray start tag Error, Getting "Stray end tag html" from W3C Validator 虽然没有人解决我的情况。我相信我有正确的 HTML5 格式：

<html>
  <head>
    <meta>
    <link>
    <script></script>
    <title></title>
  </head>
  <body>
  </body>
</html>

我很好奇“no-js”或 div id 是否有效果并且在这方面没有找到太多帮助。

我的代码：

<html class="no-js">

<div id="header">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <meta property="og:title" content="one breath">
    <meta property="og:description" content="This moment is your life. Breathe. Notice it.">
    <meta property="og:image" content="http://i61.tinypic.com/2yjzpsz.png">
    <meta property="og:url" content="http://www.onebreath.io">

    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="bootstrap-theme.css">
    <link rel="stylesheet" href="main.css">
    <link rel="image" type="image/png" href="breathenoticeit.png">

    <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>

    <!-- favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

    <title>one breath</title>
</head>
</div>

<body>
.... content ....
</body>     
</html>

我的问题：什么是格式错误的 HTML？具体来说，如何解决 HTML 验证器给出的杂散起始标签 html 和杂散起始标签头错误（最终修复 facebook 调试器错误并显示正确的图像）？

非常感谢任何帮助！（完整的网站是 www.onebreath.io）

编辑

已提出澄清问题。

【问题讨论】：

@Teemu 我相信这是我实现的引导主题模板的一部分。（也许那是没有的...）你认为这可能导致错误吗？
您应该编辑问题以澄清被问到的内容（例如，您应该指定您在验证器的用户界面中选择了 HTML5），而不是回答它或评论答案。
@JukkaK.Korpela 感谢您的反馈。我删除了该评论/答案并澄清了问题。

标签： javascript html ruby-on-rails ruby

【解决方案1】：

删除包裹<head> 的<div id="header">。 <div> 用于包含将在您的<body> 中显示的内容。
在<html> 之前，声明一个像<!DOCTYPE html> 这样的文档类型。

您应该拥有的 HTML：

<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">

<meta property="og:title" content="one breath">
<meta property="og:description" content="This moment is your life. Breathe. Notice it.">
<meta property="og:image" content="http://i61.tinypic.com/2yjzpsz.png">
<meta property="og:url" content="http://www.onebreath.io">

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="bootstrap-theme.css">
<link rel="stylesheet" href="main.css">
<link rel="image" type="image/png" href="breathenoticeit.png">

<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>

<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

<title>one breath</title>
</head>

<body class="no-js">
.... content ....
</body>     
</html>

【讨论】：

谢谢！我实现了这些更改，但仍然在验证器上收到错误。现在它还会引发错误“第 33 行，第 15 列：Stray doctype。”到目前为止，facebook 调试器似乎也没有变化。
查看源代码 - www.onebreath.io。你开始你的文件两次......？你也两次声明一个文档类型......
我也刚刚意识到这一点，并相应地编辑了问题（和代码），从而解决了问题。感谢您的帮助！

【解决方案2】：

你不应该将你的 head 部分包裹在一个 div 中。 Divs 应该只在体内。这很可能是验证器的绊脚石。

【讨论】：

【解决方案3】：

通过http://validator.w3.org 的 w3 验证器运行它

您所看到的只是 HTML 有效性的问题。 <html> 没有类属性并且<div> 不能是<html> 的直接子元素，它必须在<body> 或允许<div> 成为子元素的其他元素内。

你的一般结构应该是这样的（不要忘记文档类型）

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body class="no-js">
<!-- content -->
</body>
</html>

【讨论】：