0

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?

Sam
  • 7,252
  • 16
  • 46
  • 65
Mutatos
  • 1,675
  • 4
  • 25
  • 55
  • You should use `header` inside of `section` and using `sections` like `
    ` is a better practice. Check **[HERE](http://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-tags)** for some good explanations.
     – Batu.Khan Apr 17 '14 at 11:47
  • `main` tag should be used only once, globally, as the container of main content of your site, in your example, obviously, you should change `
    ` to `
    `. Web crawlers often look only into the `main` tag if it exists, what prevents you from, for example, caching navigation bar when you have a poor content in your site, for example, on index site, and so on. `div`, on the other hand, should be used only when no other tag passses to the semantic of it`s content.
     –  Apr 17 '14 at 13:34
  • It seems that your second question about `main` has no relation to your first question about `header`. You should create a separate question in such a case. – unor Apr 17 '14 at 14:04

2 Answers2

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.

Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
  • thanks man. I have understand now the header function. I have here an example structure of my site. Can you verify it please? The problem is, where can I post it, because it is not allowed to answer my question :-( – Mutatos Apr 18 '14 at 10:43
  • @NikoNik: If you have a specific question/problem, create a new question here on Stack Overflow. If you want a review of your code, post a question on [codereview.se]. – unor Apr 18 '14 at 13:55
0

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>
Community
  • 1
  • 1
Animesh
  • 1,005
  • 10
  • 20