Web Web page Standard learning: Talking about the importance of structure from "DIV+CSS"

css|web| Standard | Web page

As we all know, web standards in the early days of China's dissemination, people use "div+css" to describe the Web standards, seems to be a bit of truth, according to the domestic web designer's coding level, it seems to use a div with CSS to replace the table layout.

But the people who have studied the Web standard for a while know that this is a misunderstanding, then some people put forward, abandon Div+css's argument, advocate Xhtml+css, because to use two languages to structure the Web page, but this name is also inaccurate, incomplete, Because only the XHTML1.0 standard and the CSS2.0 (CSS2.1) specification are mentioned.

In fact, the Web Standard is the Web standard, called the other is not right, he is the web development of some of the set of standards, xhtml,xml,css,dom,ecmascript, to develop these standards for better constraints, the Web platform (browser) developers, And we follow web standards development, also for their own sake, through the efforts of the public, forcing rogue developers to follow the uniform standards, reduce the difficulty of developers, so that our works better cross-platform, across the browser barriers (Ie,ff,opera, etc.), across the barriers to equipment (PCs, handheld devices, mobile phones, Printing equipment, etc.), across user barriers (color blindness, anomalous trichromatism, poor eyesight, physical disability, etc.).

Why follow Web standards for design and development? The previous paragraph has also been macro mentioned, Cross-platform unified in a standard, and ultimately reduce the difficulty of development. The concrete implementation certainly does not have a boss so great to join the standard cause, the businessman always according to the interest drive, is which interest drives them to apply the Web standard?

Less code and components, easy to maintain

Lower bandwidth requirements (more concise code) and lower cost.

more likely to be searched by search engines

Easy revision, no need to change page content

To provide a printed version without copying content

Improve the usability of the website.

When the end owner sees the code in the application Web Standard is very concise, there have been many never met Div, and then you show him, can be arbitrary revision, a variety of devices compatible, a variety of browser compatible, very good, the boss is very appreciative, so many benefits, we fully support the Web standards, and lead to the results, The Web Standard technical talent is hot, the application Web Standard development project increases, the development efficiency becomes the question, the development pattern is still groping, inside appears, in the Web standard application some wrong method, Div's abuse, class's abuse, the structure is messed up, The emphasis on CSS is much more than the emphasis on XHTML.

What is a div? At the beginning of people's understanding is no semantics, the use of things to layout without semantics, is correct, since there is no semantics, div these three letters will not appear.

Jeffrey Zeldman's explanation is "to explain the div with the phrase division is the most appropriate". Div and span are used as cuts to split documents, so they have semantics. The DIV union ID and Class attribute provide a common mechanism for adding a struct to a document.
Div divides the document into a piece, how to distinguish this piece to layout? That is how to give a unique ID to the Div, the generic div gives a class value, and you can assign an ID on the class basis. If the ID does not appear to be able to, all class, as long as a reasonable name can be, you can for header area, add Class,

, Class Idheader tell you, here is the only and header area. But IDs are a property that best reflects the structure of a document. When you complain about not being reused for IDs, think about the power of IDs!

The attributes of IDs have incredibly powerful features. The id attribute can complete the following functions:

As a style sheet selector, let's create a compact, minimized XHTML paging file.

The goal anchor of the most hypertext link to replace the outdated name attribute (or forward compatible with her)

As a reference method for special elements in a DOM based script.

The name of the object element as a declaration.

As a common purpose process processing tool (in the example of the Web-site: "When the Plex HTML page extracts data from a bad database, or the HTML document into another format, etc., this benefit is used to indicate the area")

Now also often appear combination class structure, is to have a CSS framework, and then any combination of class to achieve layout, seemingly is to improve the efficiency of the shortcut, but the cost is to destroy the structure, (of course, there are exceptions, such as grids CSS), the general approach is like the design of Tudou front code

This maintenance brings a lot of difficulty, that is, the structure design is not reasonable, just for div+css rather than for web standards.

Web standards to grasp a few points:

Use structural, semantic markup.

Separate presentation from the (X) HTML document using CSS.

Rely on JavaScript as is enhancement for, not a replacement of, website features.

Use structured, semantically labeled

Using CSS to isolate performance elements in (X) HTML documents

Rely on JavaScript to enhance, not replace, the characteristics of the site (for example, if CSS does not do, to JavaScript rather than instead of CSS to do what he can do)

For the structure of a variety of combinations I have been very disgusted, maybe I do not understand the depth of the understanding of his benefits, perhaps a reasonable combination of structure and development efficiency, but I did not find, I will be inconsistent.

This is the way the style is grouped

Give me a layout example

Several classes are grouped into a left-floating, wide 400 background for a white area
You may have a Ponzi class library, page only need any combination of class can be completed, save most of the time spent on CSS, but bring the next structure of chaos, so do and table layout is no different, but the code looks good, and the amount of code is not too big difference. In the early days of applying web standards, a reasonable table layout is also allowed. So many classes remind me of the long table attributes.

Is the hard work is to use DIV with CSS to simulate a table is easy to achieve the effect? and achieve the same poor table layout?

Semantics is also a part of the structure, in addition to the rational use of (X) HTML markup Language, ID is a part of the semantic component, div ID is like a lattice of instant stickers, tell you the semantics of Div, tell you the meaning of this block.

Micro-format (microformat) is a new way of embedding structured data in standard XHTML code. His birth is also very clear that the structure of the web is always the first, the advantages of the semantic is very realistic embodiment, Div's attribute planning also embodies the semantics, not just a passing on the style of the work interface. Take a look at the IBM Documentation Center, "separating data and formatting using microformats" to understand how it works.

Actually said so much, I also have a bit of no clue. The main thing is that I have a description of the contradiction between structure and development efficiency, and how the CSS framework can not break the ring structure of a query. And for structure and efficiency my point of view is "only a reasonable structure, is your web standardization of the fundamental motivation", the web is the bearer of information, there is no reason for visual effects, but to undermine the reasonable structure.