杂散开始标签html和head

thadley 发表于 Dev

塔德利

我是一名新程序员，正在我的第一个RoR网站（具有已实现的bootstrap主题）上工作，并且在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？，Stray开始标记错误，从W3C Validator获取“杂散结束标记html”，尽管都没有解决我的情况。我相信我的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）

编辑

提出了明确的问题。

先生

删除<div id="header">包裹您的<head>。<div>用于包含将在您的网站中显示的内容<body>。
之前<html>，请声明doctype像<!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>