Question

当我无法在布局中正确嵌套时，我是如何使用标头标签的？ EG：

<body>

<header>

<div class="topBar"></div>
<div class="mainBox">
    <div class="headWrapper">       
        <div class="searchWrap">
            <label for="SearchBox">Search Scirra</label>
            <input type="text" name="SearchBox" id="SearchBox" tabindex="1" />
            <div class="s searchIco"></div>
        </div>
        <!-- Logo placeholder -->       
    </div>

    <nav>
        <ul class="mainMenu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#" class="mainSelected">Construct</a></li>
            <li><a href="#">Arcade</a></li>
            <li><a href="#">Manual</a></li>
        </ul>
        <ul class="underMenu">
            <li><a href="#">Homepage</a></li>   
            <li><a href="#">Construct</a></li>
            <li><a href="#" class="underSelected">Products</a></li>
            <li><a href="#">Community Forum</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>

    </header>

    <div class="contentWrapper">
        <div class="wideCol">
                 Content!  Whee whee!  Elephants are powerful!  Elephants are strong!
                 *SNIP REST OF DOCUMENT THAT FLOWS FROM HERE*

语义上这是正确的，但它没有正确嵌套，我做错了/对吗？我需要更改文档结构吗？我是迂腐吗？

Answer 1

看起来<div class="mainBox">未关闭。它需要在标题关闭之前关闭。

Answer 2

您目前使用哪种浏览器来测试HTML5？根据浏览器的不同，您可能无法正常工作。

有效的HTML5网页可能如下所示：

<!DOCTYPE HTML>
<html>
  <head>
    <title>TITLE</title>
  </head>
  <body>
    <section>
      <header>
        <h1>HTML5!</h1>
      </header>
      <p>
        lalalal bla bla bla!
      </p>
    </section>
  </body>
</html>

HTML5正确嵌套标头标记

2 个答案: