0

So I'm a bit confused about the usage of the html5 section tag (or rather when to use it). On the first page of my site I want to offer a description of what the site offers and on the right of that a register form. I decided that I might as well use the html spec so some things are still a bit unclear on what to use where.

For the above mentioned scenario would one use:

<div>
     <div>description</div>
     <div>registerform</div>
</div>

or

<section>
     <div>description</div>
     <div>registerform</div>
</section>

or

<div>
     <section>description</section>
     <section>registerform</section>
</div>

And is my understanding of the header tag correct in that you basically would put in there your banner, navigation and if present a login box? So something along the lines of:

<header>
     <nav>
          <img src="mylogo.png" alt="my logo"/>
          <ul>
               <li>link1</li>
               <li>link2</li>
          </ul>
          <div id="loginbox"> <== or should this be section?
               //labels and inputfields
          </div>
     </nav>
</header>

I'm mostly a backend programmer, but some of the new html5 stuff looks interesting so any help would be appreciated.

Jack Nickels
  • 193
  • 1
  • 4
  • 10

1 Answers1

0

The section tag as described in the spec:

The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

The section tag is a semantic tag that is meant to represent a literal section of your page. Within the section you would typically have a header:

<section>
   <h1>First Section</h1>
   This is a section.
</section>

Your assumptions about the header tag are basically correct. Like section, the header is simply a more natural and descriptive grouping of elements on your page.

The header represents a group of introductory or navigational aids. A header element typically contains the section’s heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos.

Garrett Vlieger
  • 9,354
  • 4
  • 32
  • 44
  • Should a header tag be put inside a section tag, or should the header/footer tags be viewed as a more specific version of the section tag for that context? And I read that the use of the div tag is discouraged(means of last resort) according to the spec. Does that mean that I should just wrap my header, xxx, footer in another section tag in case I want to place some width styling over all of those? – Jack Nickels Dec 28 '11 at 20:26
  • You can include a `header` within a `section`. Here is a decent overview of the usage: http://boblet.tumblr.com/post/134276674/html5-structure2. Also take a look at this discussion: http://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-tags. – Garrett Vlieger Dec 28 '11 at 20:32