Right usage of the tag in HTML5

问题

I have read that the tag is the header of a section. It could be used more then 1 time in the document.

Should I use the <header> tag in the section:

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

or above the <section> like:

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

Is it possible to have this sctucture for heading information and the sections:

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

do you thing this example is a good one for semantic usage oh the HTML5 tags header and section?

Or should I use instead of the <section id="main"> , the <main> tag?

回答1:

Your two cases have a different meaning:

Here the section has a header:

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

Here the parent section (*) has a header and a child section (which has no header):

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

(* Could be a sectioning element like article/section/nav/aside, or a sectioning root like body/etc.)

Both cases are possible, it depends on the meaning of your content.

See my answer to a related question, which contains an example document with different header elements.

回答2:

Don’t use section as a wrapper for styling. correct way is

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

About section and header click here and for html5 possible mistakes here

Your html should be

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

来源：https://stackoverflow.com/questions/23132120/right-usage-of-the-header-tag-in-html5

标签

html

html5

semantic-markup

Right usage of the <header> tag in HTML5

问题

回答1:

回答2: