CSS layout using HTML tags

CSS advanced layout has gradually become popular, but in the face of the so-called div+css layout of the people more worried, do not let div become a substitute for table, multi-layer nested div will seriously affect the readability of the code, using HTML to provide us with the tag bar.

When should you use div?

Although there are no hard rules in this regard, the individual believes that Div is more suitable for the general framework of the positioning. For example, we define a section of the head that defines a div like this:

<div id= "Header" > here is what to write in the head frame </div>
Of course, you can use class to define, but generally speaking, if not on the same page will repeat the elements, with the ID can better distinguish.

I observed the next alistapart the first code, its head definition code as follows:

The following is a reference fragment:  <ul id= "NavBar" >   <li id= "articles" >   <a href= "/articles/" title= "articles" >Articles</a></li>   <li id= "Topics" >   <a href= " topics/"title=" topics ">Topics</a></li>   <li id=" about ">   <a href=" about/"title=" about ">About</a></li>   <li id=" Contact ">   <a href=" contact/"title=" Contact ">Contact</a></li>   <li id=" Contribute ">   <a href= "/contribute/" title= "Contribute" >Contribute</a></li>   <li id= "feed" >    <a href= "/feed/" title= "feed" >Feed</a></li>   </ul>  

 &NBSP
The following are reference fragments: <div id= "ish" > <a href= "/issues/214" title= "Issue 214" >no. <em>214</em></a> </div> effect Accessible: ala 
defines the top navigation (UL part), the big logo on the left, and the no.xxxx of the circle.

He didn't use Div to do the top frame, but it was a good illustration of the purpose of the code, why? Because he used the tags provided by HTML and the definition of the style name

Other most common layout labels

H1

This tag may really go to use very few people, because it shows the font is really too "big", but we are csser, what label style can not be changed? And the meaning it can express is as obvious as it used to be (headline) I think you already know how to use it ^_^

Ul

This label is used to define a lot of the navigation section, of course, can also use OL to replace, but there is no navigation links to the order of the bar, so or with the more accurate UL (remove the CSS after the effect is more obvious)

B

This label, which is no longer recommended for use, has a lot of convenience in the layout (because it's short), although I'm not too in favor of using the tag, but sometimes (like the layout definition of a small place) is a good choice.

H2

H2 use the most places should not be layout, but subtitle, but some places need to define the column style, use this label is more appropriate, column content use