Question

我已经读过标签是节的标题。它可以在文档中使用多次。

我应该在以下部分使用<header>标记：

<section>
<header>
</header>
</section>

或<section>之上：

<header>
</header>
<section>
</section>

是否可以为标题信息和章节提供此结构：

<section id="main">

    <header id="results">
      <h1>My Results</h1>
    </header>

    <section id="results">
        <section id="result1">
           <h2>Title</h2>
           <div class="body"></div>
        </section>
        <section id="result2">
           <h2>Title</h2>
           <div class="body"></div>
        </section>
       .
       .
       .
    </section>

</section>

你认为这个例子是一个很好的语义用法哦HTML5标签标题和节吗？

或者我应该使用<section id="main"> <main>代码来代替{{1}}？

Answer 1

你的两个案例有不同的含义：

此处section有一个header：

<section>
<header>
</header>
</section>

此处，父部分（*）包含header和子section（没有header）：

<header>
</header>
<section>
</section>

（*可以是article / section / nav / aside之类的切片元素，也可以是像body / etc这样的切片根。 / p>

这两种情况都是可能的，这取决于你内容的含义。

请参阅my answer相关问题，其中包含具有不同header元素的示例文档。

Answer 2

不要将section用作样式的包装器。正确的方法是

<body>
    <header>        
            <h1>Header in h1</h1>
            <h2>Subheader in h2</h2>        
    </header>    
    <section>
        <article>
            <header>
                <h1>Article #1</h1>
            </header>
            <section>
                This is the first article.
            </section>
        </article>
        <article>
            <header>
                <h1>Article #2</h1>
            </header>
            <section>
                This is the second article.  
            </section>
        </article>
    </section>
    <aside>
        <section>
            <h1>Links</h1>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </section>        
    </aside>
    <footer>Footer</footer>
</body>

关于部分和标题点击here以及html5可能出现的错误 here

你的HTML应该是

<body>
    <header>
        <h1>Search Form</h1>
    </header>
    <section id="content">
       <h1>Search Result Title</h1>
       <ul id="sponsored_ads">
           <li></li>
           <li></li>
       </ul>
       <ul id="organic_ads">
        <li></li>
           <li></li>
      </ul>        
       <article id="left_menu_1">
         <ul>
           <li></li>
           <li></li>
         </ul>
       </article>
       <article id="left_menu_2>
         <ul>
           <li></li>
           <li></li>
         </ul>
       </article>
    </section>
    <footer></footer>
</body>

正确使用HTML5 </header>中的<header>标记

2 个答案: