What is the actual meaning of sharing content and presentation?

Question

What is the actual meaning of sharing content and presentation?

Does that just mean avoiding inline css?

Does this mean that the design should be processed without changing the HTML?

Can we make any design changes just from CSS?

• If we want to resize the image, then we will have to go to the HTML code
• If we want to add another line break in the paragraph, we will again need to go into the HTML code
• If we want to add another separator in some place we will again go to the HTML code

Which X / HTML tag should be avoided for content and presentation?

Is content sharing and presentation also useful for accessibility / screen readers? ... and for the programmer / developer / designer?

Answer 1

When defining content and presentation, see the HTML document as a data container. Then ask yourself about each element and attribute:

• Is an attribute / element a significant object in my data?
  For example, are the words between the <b> tags in bold just for display purposes, or do I want to add emphasis to this data?

• Am I using the correct attribute / element for a property that represents the type of data I want to represent?
  Since I want to add emphasis to this particular section, I have to use <em> (this does not mean italics, it means highlighting and can be shown in bold) or <strong> depending on the desired level of attention.

• Do I use the attribute / element for display only? If so, can I remove the element and the parent element using CSS?
  Sometimes a presentation tag can simply be replaced by CSS rules with a parent element. In this case, you must remove the presentation tag.

By asking yourself these three simple questions, you can usually make an informed decision. Example:

Original code: <label for="name"><b>Name:</b></label>

Checking the <b> ...

Is an attribute / element a significant object in my data?
No, the tag does not represent node data. It is just for presentation.

Am I using the correct attribute / element for a property that represents the type of data I want to represent?
<b> used to represent bold elements.

Do I use the attribute / element for display only? If so, can I remove the element and the parent element using CSS?
Since <b> is presentation, and I use it for presentation, yes. And since the <b> element affects the entire <label> , it can be deleted, and the style will be applied to the <label> .

The goal of semantic HTML is not to simplify design and redesign or to avoid inline style, but to help the parser understand what this tag is in your document. In this way, applications can be created (i.e.:: search engine) to intelligently decide what your content means and classify it accordingly.

Therefore, it makes sense to use the CSS content: property to add quotes around the text located in the <q> (it does not matter for the data contained in your document, the other that it represents), but it does not make sense to use one and the same same CSS property to add the © symbol to the footer as it matters in your data.

The same goes for attributes. Using the width and height attribute in the <img> tag representing a 16x16 icon makes semantic meaning, since it is important to understand the meaning of the <img> (the icon may have different representations depending on the size it is displayed in). Using the same attributes in an <img> tag representing a thumbnail of a larger image does not work.

Sometimes you need to add non-semantic elements in order to be able to achieve the desired presentation, but usually this can be avoided.

There are no wrong items. There are misuse of certain elements. <b> should not be used when adding emphasis. <small> should be used for legal subtext, and not for reducing text (see HTML5 - section 4.6.4 ) ... All elements have a specific use case and they all represent data (minus presentation elements, but in some cases they are used ) No items should be put off.

Attributes are another matter. Most attributes are characteristic. Attributes such as <img border> and <body fgcolor> rarely matter in the data you represent, so you should not use them (except in those rare cases).

---

Search engines are a good example of why semantic documents are so important. Microformats are a predefined set of elements and classes that you can use to represent data that search engines will understand in a certain way. Product pricing information on Google Search is an example of semantics at work.

Using predefined rules in established standards for storing information in your document, a third-party program can understand what looks like a wall of text without using heuristic algorithms that may be error prone. It also helps screen readers and other accessibility applications more easily understand the context in which the information is presented. It also helps a lot with the maintainability of your markup, as it is all about defining a set.

Answer 2

A better example is CSS Zen Garden .

The purpose of this site is to demonstrate what is possible only with CSS design, with a strict separation of content from design. Style sheets created by various graphic designers are used to change the visual representation of a single HTML file that creates hundreds of different designs. HTML markup itself never changes between different projects.

On each design page, you will have a link to view the CSS file for this project.

Answer 3

What is the actual meaning of sharing content and presentation?

This is more a design philosophy than a few specific ones. In general, this means that you must preserve the semantics of the content, think of your content as part of structured information. And it also means that you must keep all the aesthetic details from this structured information.

Does that just mean avoiding inline css?

As noted above, inline styles have nothing to do with the semantics of your content and should be avoided at all costs. But it's not only that.

it just means that after writing the html according to the design then if then if we want to make any design changes then it should be only with css, no html is needed

Unfortunately, it is not always possible to achieve any specific aesthetic goals without changing the basic layout; CSS3 is trying best to solve these problems.

Which X / HTML tag should be avoided for content and presentation?

Look for obsolete tags in W3C HTML 4.01 / XHTML 1.0 Link

Is sharing content and presentation also useful for accessibility / screen readers?

Of course. Improved structured information usually remains readable, even if some browsers render styles incorrectly (or do not display them at all). Such content may also look more adequate on print media (although print styles can be applied to achieve even better aesthetics - they, again, have nothing to do with the semantics of the content).

Is sharing content and presentation also useful for a programmer / developer / designer?

Of course. The separation of content and presentation is rooted in a more general philosophy of separation of problems. Everyone benefits from separation: the content provider doesn't have to be a good designer, and vice versa.

Answer 4

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

Take the other extreme: a page containing loads and loads of tables that are used only for layout purposes. This is a definite anti-pattern that should be avoided at all costs. The content plays the second fiddle after the layout here; it is often out of order and therefore barely machine-readable. Non-machine-readable content is bad for accessibility and bad for search engine ranking.

By marking the content without considering the presentation, you first of all make it machine-readable. Then you can also serve the same content for different customers in different formats, say, in a version with optimization for mobile devices. You can also easily change your presentation without having to mess with HTML files, say for a great redesign.

Another advantage that comes naturally by separating content and presentation (HTML-CSS files) is that you have fewer types and fewer support, plus your pages can have a consistent style, which is very easy to apply. The contrast of thousands of inline styles compared to a single style definition in a single CSS file that "naturally" applies to all elements with the same "value" (markup).

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