Website uses the benefits of CSS + DIV

Intermediary trading SEO diagnostic Taobao guest hosting technology hall

The use of CSS + DIV on site refactoring has become more and more people are paying attention, especially in large sites, just this afternoon, IT168 home page on the choice of this approach. In fact, earlier such as Alibaba, 163 and other large portal site has already completed the reconstruction work. As early as last year, Robin had the habit of using CSS + DIV to write web page source code, and personally felt that this method was indeed much stronger than the traditional TABLE form source code architecture.

BLOG BLOG program this night is very good oh

A lot of SEO technology enthusiasts do not quite understand CSS + DIV compared with the TABLE in the end come to my advice, today I come to a unified answer :)

According to my personal experience in writing web pages for almost a year, using CSS + DIV to reconstruct web pages relative to the traditional TABLE page layout has the following four significant advantages:

1: Performance and content are separated

Peel off the design part in a separate style file that holds only textual information in the HTML file.

2: improve search engine indexing efficiency of the web page

By replacing the nested tags with HTML that contains only structured content, search engines will search your web content more effectively and may give you a higher rating.

3: improve page browsing speed

For the same page visual effects, using CSS + DIV reconstruction page capacity than the TABLE encoded page file size is much smaller, the former generally only the latter 1/2 size.

4: easy to maintain and revision

You can redesign the entire site's page simply by modifying a couple of CSS files.

From the above description of the point of view, the use of CSS + DIV refactoring the site can greatly enhance the website users and search engine friendly.

CSS + DIV Therefore, the current layout of the mainstream webpage, in my opinion the main core reasons, in fact, not only meet the W3C standards, but through the use of CSS + DIV, web project from now on:

Performance and content separation

Now div + css has been very popular, the major sites have restructured into div + css mode, NetEase is the best example, the use of layers and CSS, the most intuitive to the user experience is that the web page opens a lot faster. Give users a good experience, why not do it?

Today I mainly from the SEO point of view to analyze the use of DIV + CSS web site or the need for reconstruction:

Site with div + css easy to move closer to the W3C standards, the site is in line with the W3C standard is a search engine to the page ranking of an influencing factor, especially YAHOO, it looks heavier.

Site source code is simple, in addition to a few div, ul, li, dl, dd, dt like the label, almost no other labels, so that the site content is completely exposed in front of the search engine spiders, easy to grab the key content, Increase the proportion of the key content of the page, so as to increase the proportion of ranking factors.

Key content can be easily read by spiders first. The general site is left and right tri-bar, the main content of the page is in the middle column, and the spider to read the page content is in accordance with the top-down, left-to-right order, if your left column content More, then the trouble, the main content of your page will be reduced in weight. With div + css you can write the main first in front, write the left column, right column content, and then through a CSS positioning on it

Easy to adjust the site structure layout. For the commonly used form layout, if you want to change the layout, can be described as a sudden move the whole body, the site layer structure if the design is reasonable, you can easily change the site's performance with CSS, this is the structure and content, behavior separation. If the site structure changes regularly, naturally spiders on the search engine attractive.

A good use of layers and css website, the future optimization work will naturally be a lot of effort.

ask:

1, Introduction: Why use table layout is not wise?

The reason why tables exist in HTML is only for one purpose: to display tabular data. However, since border = "0" allows designers to put pictures and text in this invisible grid. To date, forms have dominated the design of visually rich websites, but it has hampered a better, more engaging, more flexible, and more powerful approach to website design.

2, Overview: What is the use of this for me?

We will tell you a way of working that will:

Make your pages load faster

Reduce your traffic costs

Let you modify the design more efficient and less costly

Help keep your entire site visually consistent

Make your site better searchable by search engines

Make your site more accessible to viewers and browsers

As more and more people adopt the Web standards in the world, it can also increase your competitive position in the workplace (in fact, reduce the risk of unemployment).

3, the form of the problem

Mix format data with your content.

This makes the size of the file unnecessarily large, and the user must download this formatting information once for each page.

Bandwidth is not free.

This makes it extremely laborious (and expensive) to redesign existing sites and content.

It also makes it extremely difficult and costly to keep our visual consistency across the site.

Form-based pages also greatly reduce their affinity for people with disabilities and those using cell phones or PDAs.

4, the transitional design uses margin and padding instead of extra form cells and interval GIF.
Use link and @import to load the style. The former is used for early browsers, the latter for current browsers.
<link href = "/ basic.css" _fcksavedurl = "" / basic.css "" _fcksavedurl = "" / basic.css "" rel = "stylesheet" type = "text / css">
<style type = "text / css" media = "screen"> <! -
@import url (modern.css) screen;
-> </ style>
5, the structured tag: what you want to write what you want to write even if the writing CSS is very simple, use CSS to typesetting really need a way of thinking and some of our past differences.
We typesetting not to think "this thing is here, that thing is there" but rather the type of information in the page and the structure of the information.
We use the <h1> tag to mark the most important headline; the next level entry is marked with <h2>, and so on; and the paragraph is placed in the <p> tag.
This is what we call "structural markers" or "semantic markers."
Your content will not be placed in the form and form elements, replace them is the div element. Also assign an id or class to your div element, but this is to describe their content or functionality, not their appearance.
When you put an object in italics, you probably want to emphasize it either, or do you want to reference a book title? If it is the former, should use <em>; If the latter, in fact, use <cite>.
If an object is marked as bold, in fact it should be marked <strong>.
If you want to add a newline somewhere, this is probably the beginning of a new beginning. If it is not at the beginning, it will not be some kind of class (type) appeared in your site? In both cases, you should replace CSS with CSS.
.foo {display: block}
Consider the situation where you need to navigate something that is out of order with links:
Use the <ul> tag to edit them.
link1
link2
link3
link4
link5
Horizontal navigation bar We can use CSS to control the appearance of this list displayed on the page.
By using display: inline we can create a horizontal navigation bar.
link1
link2
link3
link4
link5
This is the code used in the navigation bar above:
# nav1 {
margin-top: 1em;
margin-bottom: 0.5em;
}
# nav1 ul {
background-color: silver;
text-align: center;
margin-left: 0;
padding-left: 0;
border-bottom: 1px solid gray
}
# nav1 li {
list-style-type: none;
padding: 0.25em 1em;
border-left: 1px solid white;
display: inline
}
# nav1 li: first-child {
border: none;
}
Vertical navigation bar
link1
link2
link3
link4
link5
Here's the code for the vertical navigation bar:
# nav2 {
background-color: silver;
border: solid 1px gray;
width: 8em
}
# nav2 ul {
list-style-type: none;
margin: 0;
padding: 0;
border: none
}
# nav2 li {
margin: 0;
padding: 0.25em 0.5em 0.25em 1em;
border-top: 1px solid gray;
width: 100%;
display: block
}
html> body # nav2 li {
width: auto;
}
# nav2 li: first-child {
border: none
}
6, from playing table skills to follow the Web standards: a comprehensive consideration If you have the contents of the site points a good class, then it is time to analyze each page, put them in accordance with the logical decomposition.
Main Navigation Bar Navigation Header and Footer Content Related Information Other
Notice the analysis of tabular structures made up of nested tables, white spacers, and bounding boxes (because we want to replace them with the much simpler tabular structure organized with div tags). Once you have analyzed the structure of the page, you can begin to uncover the surface and analyze the places in your page code that can be converted to structured tags.
As a perfectionist, destroy all <font> tags and spaces GIF!
Similarly, get the <b> and <br> tags together.
Remove the appearance of those in the table mark (bgcolor, background, etc.).
Change the CSS calls (such as <span class = "header">) that are purely used to represent the appearance to structured tags.
7, the description of the mark to describe the structure of the mark You can use "Find and Replace" (or regular expression), but the best way is to open the page in your browser, and then copy and paste the text to your HTML editor.
The key is to use structured way to think! Simply replacing the <b> tag with <strong> is not enough.
Which is the most important entry? Use <h1> to mark it. The second is <h2>, and so on. Use <p> to mark the paragraph. Mark the navigation bar as an unordered list.
Select a DOCTYPE to use. (We recommend XHTML transitional, do not use XHTML strict unless you are a master on this path.)
8, Divide your page reasonably in divs Put your main navigation bar in a div with the main id attribute set to mainnav, and the sub navigation bar in a sub or subnav div. The footer looks like this: <div id = "footer">, and for the entire page, it's placed inside <div id = "content">.
Even though it is not so pleasing yet, as soon as you start adding rules to the style sheet, it instantly becomes cute.
9, it's time to start writing your own CSS First, set a boundary for each div. For example: div {border: 1px dotted gray; padding: .5em} This will help you to see exactly what's inside and no longer need to scroll the screen.
First, write CSS (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, etc.) as defined elements to make best use of context-dependent or recursive descent structures Selector. This can make your mark more clearly. For example: #subnav li {border: 1px solid black; padding: .5em; display: inline} will be able to affect only the list items in your div's div. Test in as many browsers as possible, after all you can have friends help you test with their own browser

Accept the lessons site can not change too much at one time, this slowly change this station legendary private service ☞: every day to provide the most complete information. AD is inevitable, haha