HTML5: Header: Should I use 2 headers or 2 nav tags?

I have a header which I have attached that I made in Photoshop
.

I decided to try HTML5 and have some questions.

Is it possible to use 2 nav tags for in the header?

My first nav tag has a different background image than the rest of the header.


<header>
<div id="header_top") <-- different background image/colour so I made new div -->
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Privacy</li>
<li>Contact</li>
</ul>
</nav>
</div>


<div id="logo"> <-- Title and tag, maybe I'll add in a picture logo at a later date -->
<h1> Title Here </h1>
<p> Your #1 Resource Guide </p>
</div>

<div id=social>
  <div id=twitter_icon_here> </div>
  <div id=facebook_icon_here> </div>
  <div id=google_icon_here> </div>
</div>


<nav> <-- main navigation bar in blue - should I wrap this in a div? -->
<ul>
<li>Besellers</li>
<li>Brand</li>
<li>Type</li>
<li>Articles</li>
</ul>
<nav>


</header>



I am guessing this looks very messy.

I have a few questions:

  1. Because the first Nav tag has a different background color, should I place it in its own div, or can I just give the nav tag its own class and width 100% and style the background?

  2. I want to position the logo div exactly where I want, so a div is essential for this right or is there a new tag that I can do this with in HTML5?

  3. For the main navigation with the blue background, again should I make a new div for this or just style the nav tag if thats possible?

I’ve tried looking online and on google but still having a bit of difficulty, usually I wrap everything in their own divs but html 5 seems to make it a bit cleaner.

You might as well remove the “header” and “nav” tags you don’t need them.
All you are doing is adding extra crap to the mix. Its pointless.

Agreed with logic_earth. Especially, nav has a meaning and it’s got a role (navigation) and it’s generally recommended that you have just one, for “primary navigation”.

But if you wanted to get all jiggy with CSS3 and HTML5 whatnot, and forget about older browsers and IE and all that, you could do something like…


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf=8">
    <title>FOO: Your #1 resource for Bar, Baz and Quux</title>
    <meta name="description" content="one or two sentences about FOO">
    <style>
html, body, ul, form, fieldset {
  margin: 0;
  padding: 0;
}

img {
  vertical-align: bottom;
  border: 0;
}

body {
  color: #222;
  font: 100%/1.3em verdana,'dejavu sans','lucida grande',sans-serif;
  background-color: #cfcfcf;
}

header {
  position: relative;
  display: block;
  padding-top: 44px;
  background: #cfcfcf url(headerbg.png) 0 0 repeat-x;
  border-top: 1px solid #989898;
}

h1 {
  margin: 0 0 30px 40px;
  font-size: 1.2em;
  line-height: 1em;
  text-transform: uppercase;
}
        h1 small {
          display: block;
          font-size: .8em;
        }

nav h2 {
  position: absolute;
  left: -999em;
}

nav ul {
  list-style: none;
}

nav ul:first-of-type {
  padding: 0 40px 0 20px;
  background-color: #3c93df;
  background-image: -webkit-linear-gradient(top,#64acec,#3c93df);
  background-image: -moz-linear-gradient(top,#64acec,#3c93df);
  background-image: -ms-linear-gradient(top,#64acec,#3c93df);
  background-image: -o-linear-gradient(top,#64acec,#3c93df);
  background-image: linear-gradient(top,#64acec,#3c93df);
  border: solid #000;
  border-width: 1px 0;
  overflow: hidden;
}
        nav ul:first-of-type li, .siteMenu li, .social li {
         display: inline; /*IE*/ 
        }
        nav ul:first-of-type a {
          float: left; 
          width: 8em;
          padding: 8px 5px;
          color: #fff;
          font-size: 1.1em;
          text-align: center;
          text-transform: uppercase;
          text-decoration: none; 
        }
                nav ul:first-of-type a:focus,
                nav ul:first-of-type a:hover,
                nav ul:first-of-type a:active {
                  color: #444;
                }
                  
        ul form {
          position: relative;
          float: right;
        }
                ul fieldset {
                  border: 0;
                }
                ul label {
                  position: absolute;
                  left: -999em;
                }
                ul input[type="text"] {
                  display: block;
                  min-width: 150px;
                  margin: 4px 0;
                  padding: 2px 80px 2px 2px; 
                  font-size: 1em;
                  background-color: #e1e1e1;
                  border-color: transparent;
                  border-radius: 4px;
                }
                ul input[type="submit"] {
                  position: absolute;
                  right: 5px;
                  top: 6px;
                  color: #fff;
                  font-size: 1em;
                  background-color: transparent;
                  border: 0;
                } 
                ul input[type="text"]:focus + input {
                  right: -999em;
                } 

.siteMenu {
  position: absolute;
  top: 4px;
  right: 40px;
}
        .siteMenu a { 
          float: left;
          margin: 2px 0;
          padding: 0 10px;
          color: #000;
          font-size: .8em;
          line-height: 1em;
          text-decoration: none;
          border-left: 1px solid #000;
        }
                .siteMenu li:first-child a {
                  border-left: 0;
                }
                .siteMenu a:focus,
                .siteMenu a:hover,
                .siteMenu a:active {
                  text-decoration: underline;
                }
.social {
  position: absolute;
  right: 42px;
  top: 44px;
}
        .social a {
          float: left;
          width: 42px;
          height: 42px;
          margin-right: 6px;
          overflow: hidden;
        }
                .social img {
                  display: block;
                }
                .social a[href*="twit"] img {
                  margin-left: -47px;
                }
                .social a[href*="goog"] img {
                  margin-left: -94px;
                }
                  
                .social a:focus img,
                .social a:hover img,
                .social a:active img {
                  margin-top: -42px;
                }
    </style>
  </head>
  <body>
    <header>
      <h1>Title Here <small>Your #1 Resource guide</small></h1><!--this assumes the tagline
is practically a part of the page title, otherwise the h1+p setup you had is fine-->
      <nav>
        <h2>Resources</h2>
        <ul>
          <li><a href="bestsellers.html">Bestsellers</a></li> 
          <li><a href="brand.html">Brand</a></li> 
          <li><a href="type.html">Type</a></li> 
          <li><a href="articles.html">Articles</a></li> 
          <li><a href="faq.html">FAQ</a></li> 
          <li>
            <form method="get" action="search.pl" id="formSearch">
              <fieldset>
                <label for="search">Search terms:</label>
                <input type="text" id="search" name="search">
                <input type="submit" value="SEARCH">  
              </fieldset>
            </form>
          </li>
        </ul> 
        <h2>Site menu</h2>
        <ul class="siteMenu">
          <li><a href="home.html">Home</a></li> 
          <li><a href="about.html">About</a></li> 
          <li><a href="privacy.html">Privacy</a></li> 
          <li><a href="contact.html">Contact</a></li> 
        </ul> 
        <h2>Social junk</h2>
        <ul class="social">
          <li><a href="facespace.com"><img src="socialjunk.png" alt="facespace"></a></li> 
          <li><a href="twit.com"><img src="socialjunk.png" alt="twot me yo!"></a></li> 
          <li><a href="googley.com"><img src="socialjunk.png" alt="googz"></a></li> 
        </ul>
      </nav>
    </header>
  </body>
</html>

You can see I have hipster tags for the lawlz. Nav could be a div. Browsers don’t know the difference (yet).
Could even remove <header> entirely and have the body hold that background image, even better.

…and I’m sure you’ll have some webfonts, which would likely change all the font and line-height sizes set, but you’d adjust the CSS for that.

Could even add in some Javascript for more fun.

http://stommepoes.nl/rubbed/header.html <– only tested in two hipster browsers, neither of which were, obviously, IE

  1. Because the first Nav tag has a different background color, should I place it in its own div, or can I just give the nav tag its own class and width 100% and style the background?

You could have just had a ul and given it the background. This might mean floating the li’s to the right which you may not want because then the order is backwards, or use text-align: right and display: inline-block on the li’s… and let the ul itself remain automatically 100% wide and hold the background image. But you could also have a single, huge bg image on the <header> (or div id=“header”, whatever) itself.

  1. I want to position the logo div exactly where I want, so a div is essential for this right or is there a new tag that I can do this with in HTML5?

You can give the h1 a background image if you want. Just give it enough left padding and some min-height and say
h1 {
padding: 0 0 0 widthOfLogo+paddingFromLeftEdge;
min-height: heightOfLogo;
background: url(logo.png) 0 0 no-repeat;
}

The thing to keep in mind is, most of these objects of yours are already blocks, and every block gets at least one background image. HTML5 isn’t a license for adding bloat; its only saving grace when you do add otherwise unnecessary tags is, those tags are supposed to add meaning… it’s just that, today, they still don’t (though the native roles these elements have, you can add those to regular HTML4 elements for now… those will work today in most popular screen readers, which is mostly who roles are for).

  1. For the main navigation with the blue background, again should I make a new div for this or just style the nav tag if thats possible?

Again, you could style the ul itself directly. With no nav in sight. You see I put hipster css gradients on the ul itself and just floated the a’s around.

I didn’t use type=search on the form input because that gives it retarded styles in Safari and does nothing for the rest of the browsers… staying with type=text you retain more CSS styling freedom. Also, since we have a label stating “search-something”, a role of search is kinda redundant and unnecessary I think.