正确使用 <header> HTML5中的标签

Question

我读过，标签是一节的标题。 在文档中可以使用1次以上。

我应该在本节中使用<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标签的标头和部分？

还是应该使用<main>标记代替<section id="main"> ？

Answer 1

您的两种情况具有不同的含义：

这section有一个header ：

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

此处的父节（*）有一个header和一个子section （没有header ）：

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

（*可以是section元素，例如article / section / nav / aside ，或者是section root，例如body / etc。）

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

请参阅我对一个相关问题的回答，其中包含具有不同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>

关于部分和头点击这里和HTML5可能出现的错误这里

您的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>

正确使用 <header> HTML5中的标签

问题描述

2 个解决方案

解决方案1
1 2014-04-17 14:03:42

解决方案2
0 2014-04-17 11:57:56

正确使用 <header> HTML5中的标签

问题描述

2 个解决方案

解决方案1 1 2014-04-17 14:03:42

解决方案2 0 2014-04-17 11:57:56

解决方案1
1 2014-04-17 14:03:42

解决方案2
0 2014-04-17 11:57:56