Question

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

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

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）

修改

澄清问题。

Answer 1

移除包裹<div id="header">的{{1}}。 <head>用于包含将在<div>。
在<body>之前，声明类似<html>。

您应该拥有的HTML：

<!DOCTYPE html>

Answer 2

你不应该将你的头部包裹在div中。分区应该只在体内。更有可能的是，这会使验证器瘫痪。

Answer 3

通过http://validator.w3.org

的w3验证程序运行它

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

您的一般结构应如下所示（不要忘记doctype）

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

迷路开始标记html和头部

3 个答案: