W3C HTML Validator报<body>标签重复打开错误的原因排查

报错原因 #

HTML规范明确要求，<html>根标签下只能直接包含<head>和<body>两个子元素。你代码里的两个<header>标签直接放在了</head>之后、<body>之前，这属于不符合规范的位置。

浏览器为了兼容这种不规范代码，会自动创建一个<body>标签，并把这些“游离”的<header>元素塞进去。等你后面手动写<body>标签时，页面里已经存在一个浏览器自动生成的<body>了，所以W3C验证器会抛出“重复打开body标签”的错误。

修正后的代码 #

把两个<header>标签全部移到<body>内部即可：

<!DOCTYPE html>
<html lang="pt-br">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Globo.com</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <header>
            <img class="quadrados" src="https://via.placeholder.com/44" alt="">
            <h1 class="menu">Menu</h1>
            <h1 class="email">Email V</h1>
            <h1 class="titulo">Globo.com</h1>
            <img class="lupa" src="https://via.placeholder.com/44" alt="">
            <h1 class="busca">Busca</h1>
            <img class="boneco" src="https://via.placeholder.com/44" alt="">
            <h1 class="conta">Conta Globo</h1>
        </header>

        <header class="pequenos">
            <h1>g1</h1>
            <h1>o globo</h1>
            <h1>valor</h1>
            <h1>ge</h1>
            <h1>cartola</h1>
            <h1>globoplay</h1>
            <h1>dropz</h1>
            <h1>gshow</h1>
            <h1>quem</h1>
            <h1>receitas</h1>
        </header>

        <h2>Vacinação de Jovens</h2>
    </body>

</html>

内容的提问来源于stack exchange，提问作者lnasser