Div + CSS features and advantages

Source: Internet
Author: User

1. Clear Structure
Separating the presentation and structure of pages, we can build a div + CSS + JS file to achieve performance, structure, and behavior separation, in doing so, just like the MVC pattern used by our program, the advantage is that the coupling is smaller and easier to maintain. The code is small and the structure is clear.
2. Speed
The speed advantage is divided into two considerations
Occupied bandwidth
<Div> </div> at least less code than <Table> <tr> <TD> </tr> </table>
Table Nesting is generally
<Table>
<Tr>
<TD> </TD>
</Tr>
</Table>
<Div> </div> is written in this way, so the number of rows is also small. Of course, the table can also be written as a line, but the DIV code is indeed much less than the table.
Webpage execution speed
1) The overall display speed. Anyone who has learned how to compile knows that grammar analysis is required, A <Table> <tr> <TD> </tr> </table> must be analyzed in IE or other browsers. In this way, div is simple, it is easy to match. For the moment, we can imagine that the analysis is done using the stack method.
2) Customer Experience
If the table is nested, it will be unlucky. If the last </table> is not executed, it will be a whiteboard.
However, if you use Div, You can first display a part of it, and the customer experience is much better. Its principle is related to the first article.
3. Search Engine Optimization
When a crawler loads data into your webpage, if it is a nested table, it also needs to analyze a large number of complex structured tables. It is not easy to write a regular expression, but div is different, obviously, it is much simpler. Search engines like to clean code (its true significance is that it increases the proportion of valid keywords in the total code of webpages ), therefore, websites created using CSS + Div web standards have a certain advantage of Friendly search engines.

However, the shortcomings of CSS + Div website construction are also obvious at present:

Comparing the table layout and CSS + Div, we found that CSS syntax is actually very easy and convenient. Designers also admitted that they do not need to have mastered CSS + Div as profound knowledge as rocket heaven, but some concepts do need to be digested and absorbed by them. At the same time, the bug issue is also one of the reasons to prevent CSS popularization. Even web professionals often spend a lot of time modifying bugs, not to mention those new to CSS. In-depth comparisons show that some issues that can be easily solved through tables become complicated when CSS + div is used. If it is a CSS enthusiast, it may be a challenge and fun for him, but for general designers, this is undoubtedly frustrating.

In addition, if the design elements of most websites are evenly distributed across the entire site, the design elements of CSS websites are usually placed in several external files, which may be quite complex, the file is not small, and the problems caused by this will become invisible. For example, if a CSS file call exception occurs, the entire website will become miserable.

Browser compatibility is also a problem that hinders CSS + DIV at present. The pages normally displayed in IE are completely invisible to Firefox. CSS + div is further supported by browser vendors. Various reasons make the popularization of web standards a high threshold, which is also the superiority of many web standards advocates.

As we all know, web marketers are most concerned about the friendliness of search engines. As we all know, search engines like to clean code (the true meaning is that they increase the proportion of valid keywords in the total code of webpages ), therefore, websites created using CSS + Div web standards have a certain advantage of Friendly search engines. However, the indexing and sorting of web pages by the search engine is clearly not measured by the use of tables and CSS positioning. This is why many websites with traditional table la s are ranked first, there are many reasons why the ranking of web pages made using CSS and web standards is still low. For search engines, content, structure, links, and other factors are always the most important indicators for website optimization.

# Html/XHTML/XML Column

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.