What is the actual meaning of separation of content and presentation?_问答_开发者

What is the actual meaning of separation of content and presentation?

Is it just mean to avoid inline css?

Does开发者_C百科 it mean that the design should be able to manipulated without changing the HTML?

Can we really make any change in design from CSS only?

If we want to change the size of images then we will have to go to in HTML code
If we wan to add one more line break in paragraph then again we will have to go to in HTML code
If we want to add one more separator at some place then again we will have to go to in HTML code

Which X/HTML tag we should avoid to use to keep separation of content and presentation?

Is separation of content and presentation also helpful for accessibility/screen reader users? ... and for programmer/developer/designer?

When defining what is content and presentation, see your HTML document as a data container. Then ask yourself the following on each element and attribute:

Does the attribute/element represent a meaningful entity in my data?
For example, are the words between  tag are in bold simply for display purposes or did I want to add emphasis on that data?
Am I using the proper attribute/element to property represent the type of data I want to represent?
Since I want to add emphasis on that particular section, I should use  (it doesn't mean italic, it means emphasis and can be made bold) or  depending of the level of emphasis wanted.
Am I using the attribute/element only for display purposes? If yes, can the element be removed and the parent element styled using CSS?
Sometimes an presentational tag can simply be replaced by CSS rules on the parent element. In which case, the presentational tag needs to be removed.

After asking yourself these three simple questions, you are usually able to make a pretty informed decision. An example:

Original Code: <label for="name">Name:</label>

Checking the  tag...

Does the attribute/element represent a meaningful entity in my data?
No, the tag doesn't represent a data node. It is there purely for presentation.

Am I using the proper attribute/element to property represent the type of data I want to represent?
 is used for presentation of bold elements.

Am I using the attribute/element only for display purposes? If yes, can the element be removed and the parent element styled using CSS?
Since  is presentational and I am using it for presentation, yes. And since the  element affects the whole of <label>, it can be removed and style be applied to the <label>.

Semantic HTML's goal is not to simplify design and redesign or to avoid inline styling, but to help a parser understand what that particular tag represent in your document. That way, applications can be created (ie.: search engine) to intelligently decide what your content signify and to classify it accordingly.

Therefore, it makes sense to use the CSS property content: to add quotes around text located in a <q> tag (it has no value to the data contained in your document other that presentation), but no sense to the use the same CSS property to add a © symbol in your footer as it does have a value in your data.

Same applies to attributes. Using the width and height attribute on an <img> tag representing an icon at size 16x16 makes semantic sense as it is important to understand the meaning of the <img> tag (an icon can have different representations depending on the size it is displayed at). Using the same attributes on an <img> tag representing a thumbnail of an larger image does not.

Sometimes you will need to add non-semantic elements to be able to achieve your wanted presentation, but usually those are avoidable.

There are no wrong elements. There are wrong uses of particular elements.  should not be used when adding emphasis.  should be used for legal sub-text, not to make text smaller (see HTML5 - Section 4.6.4 for why), etc... All elements have a particular usage scenario and they all represent data (minus presentational elements, but they do have a use in some cases). No elements should be set aside.

Attributes are a different thing. Most the attributes are presentational in nature. Attributes such as <img border> and <body fgcolor> rarely have signification in the data you are representing therefore you should not use them (except in those rare cases).

Search Engines are a good examples as to why semantic documents are so important. Microformats are a predefined set of elements and classes which you can use to represent data which search engines will understand in a certain way. The product price information in Google Searches is an example of semantics at work.

By using the predefined rules in set standards to store information in your document allows third-party programs to understand what seems to be a wall of text without using heuristics algorithms which may be prone to failures. It also helps screen readers and other accessibility applications to more easily understand the context in which the information is presented. It also greatly helps the maintainability of your markup as everything is tied to a set definition.

The best example is probably the CSS Zen Garden.

The goal of this site is to showcase what is possible with CSS-based design only, with a strict separation of content from the design. Style sheets contributed by various graphic designers are used to change the visual presentation of a single HTML file, producing hundreds of different designs. The HTML markup itself never changes between the different designs.

On each design page, you'd have a link to view the CSS file of that design.

What is the actual meaning of separation of content and presentation?

It is rather a design philosophy than somewhat concrete. In general, it means that you should preserve the semantics of the content, think of your content as of a piece of structured information. And that also means that you should keep all aesthetic details away from this structured information.

is it just mean to avoid inline css?

As noticed above, inline styles have nothing to do with semantics of your content and should be avoided at all costs. But it isn't just that.

is it just mean if after writing html according to design then if then if we want to do any change in design then it should be only with css, no need to html

Unfortunately, it is not always possible to achieve some concrete aesthetic goals without modifying the underlying markup; CSS3 tries it's best to address these issues.

Which X/HTML tag we should avoid to use to keep separation of content and presentation?

Look for deprecated tags in W3C HTML 4.01 / XHTML 1.0 Reference

Is separation of content and presentation also helpful for accessibility/screen reader users?

Surely. Better structured information generally remains readable even if certain browsers render styles incorrectly (or do not render them at all). Such content may also look more adequate on printed media (though print styles may be applied to achieve even better aestherics -- they, again, have nothing to do with content semantics).

Is separation of content and presentation also helpful for programmer/developer/designer ?

Of course. The separation of content and presentation takes its roots from more general philosophy, the separation of concerns. Everybody benefit from the separation: the content supplier does not have to be a good designer and vice versa.

Putting in line breaks at certain points is inevitable, there will usually be some overlap of presentation and content. You should always aim for perfect separation though.

Take the other extreme: A page containing loads and loads of tables that are used for layout purposes only. This is the definite anti-pattern that should be avoided at all cost. The content plays a second fiddle after the layout here; it's often not in the right order and thereby hardly machine readable. Not machine readable content is bad for accessibility and bad for the page's search engine ranking.

By marking up content without concern for presentation, you are first and foremost making it machine readable. You are then also in a position to serve the same content to different clients in different formats, say in a mobile-optimized version. You can also change the presentation easily without having to mess with the HTML files, say for a big redesign.

Another benefit that comes naturally by separating content and presentation (HTML - CSS files) is that you have less to type and less to maintain, plus your pages can have a consistent styling applied very easily. Contrast thousands of inline styles vs. one style definition in one CSS file, which is "naturally" applied to all elements with the same "meaning" (markup).

Ideally your (X)HTML consists only of meaningful, semantic markup and your CSS of styles using this markup for its selectors. In the real world you'll often mix classes and IDs into your markup that add no extra meaning, because you need these extra "hooks" to style everything the way you want to. But even here there's a difference between class="blue right-aligned" and class="contact-info secondary". Always try to add meaning to the content, not style. Balancing this is quite an art in itself. :)