Rational use HTML tags to CSS layout
High CSS layout has been gradually pandemic, in the face of the so-called DIV + CSS layout of the name more worried about people not to let DIV become a substitute for the Table, multi-nested DIV will seriously affect the code can be read, apply HTML provide us with the label it.
What time should DIV?
Although in this respect there is no hard and fast rules, but personally think that DIV more general framework applicable to the position. For example, we head to the definition of a region, so the general definition of a DIV:
<div Id="header"> This is the framework of the head to write the contents of </ div>
Of course, the class can be used to define, but generally the same as in the pages will not repeat elements can be better used id to distinguish.
I observed under the Home alistapart code, which defined the head of the code are as follows:
The following is quoted 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>
<h1 Id="masthead">
<a Href="/">
<img Src="/pix/alalogo.gif" alt="A LIST Apart: For People Who Make Websites" />
</ A>
</ H1>
The following is quoted fragment:
<div Id="ish">
<a Href="/issues/214" title="Issue 214"> No. <em> 214 </ em> </ a>
</ Div>
Results visit: ALA
Defines the top of the navigation (ul), the left of the logo and that the round No.xxxx markings.
He did not make use of DIV top of the framework, but the good that the use of these codes, and why? Apply because he provided the HTML tags, as well as the name of the definition of style
The layout of the most commonly used other labels
H1
Perhaps the label that it is truly to be used rarely, because it really shows that the font is too "big", but we are CSSer, what label styles can not be changed? And it can express the meaning of the original as it role as obvious (the title) I think you already know how to use it to the ^ _ ^
Ul
This label is used to a lot of navigation part of the definition, of course, ol also can be used to replace, but there is no order of navigation links at the bar, or to use the more precise ul (remove the more obvious effects CSS)
B
This is no longer recommend the use of labels in the layout, able to bring a lot of convenience (short), although I am not too much in favour of the use of this label, but some time (for example, the layout of the local small definition) or good choice
H2
H2 use should not place with the largest distribution, but on the subheading, but some places need to define the pattern of columns, with a more appropriate label, the contents of columns on the use of p
Tags: css layout, div css layout, div layout, html, layout examples, w3c html
Leave a Reply