The overall layout in Div+css layout optimization

In Div+css layout, this is generally the case for the overall structure of the

<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">这里是网站的标题</div>
　<div id="nav">这里是网站导航栏</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.

Second navigation bar selection-navigation bar is composed of several small pieces of content, we choose unordered list <ul><li> to show that the menu is the most suitable!

Finally, the above content can be optimized into:

<div id="header">
　　
　　<ul>
　　 <li>这里是网站导航栏</li>
　　</ul>
</div>