The design of Web page head with CSS

In the Div+css layout, this is generally the case for the overall architecture:

<div id= "Header" ></div>
<div id= "center" ></div>
<div id= "Footer" ></div>

and for the header section, certainly to display the site title, in addition to displaying the site title, you may want to show other important objects, such as the site's navigation bar:

<div id= "Header" >
<div id= "title" > here is the title of the website </div>
<div id= "NAV" > here is the website navigation bar </div>
</div>

Many people generally write this, of course, there is no grammatical error. But there's a principle for div, that is to use as little as possible div nesting (and table-like disadvantages: 1, for users: the browser to consume resources to the nesting relationship analysis, affect the speed; 2, for search: Search engine on the nesting layer may have limitations). And the readability of this writing to us is not too high.

So how is the optimization, the most scientific way of writing it?
We use other XHTML code to replace the above Div, so how to choose??
first the choice of the title--we know that in XHTML the H1-h6 is the title, and the header title is the most important in the full page, we choose H1 to indicate that the title is natural.
Next navigation bar selection-navigation bar is composed of several small pieces of content, we select unordered list

<ul><li></li></ul>

To show that the menu is the most suitable!  
Finally, the above content can be optimized into:

<div id= "Header" >
<ul>
<li> This is the website navigation bar </li>
</ul>
</div>