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

时间:2014-04-17 11:37:52

标签: html html5 semantic-markup

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

我应该在以下部分使用<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}}?

2 个答案:

答案 0 :(得分:1)

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

此处section有一个header

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

此处,父部分(*)包含header和子section(没有header):

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

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

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

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

答案 1 :(得分:0)

不要将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>