Chez Augustin

A web site had quotes inserted in different pages, used as an opening to several articles.

Here is one such quote (and how it was presented):

“The remedy for what ails our democracy is not simply better education (as important as that is) or civic education (as important as that can be), but the reestablishment of a genuine democratic discourse in which individuals can participate in a meaningful way – a conversation of democracy in which meritorious ideas and opinions from individuals do, in fact, evoke a meaningful response.”

Al Gore, The Assault on Reason

With the authorization of the webmaster, here is the page used as example.

Here is the code the webmaster used to present the quote:

There are two problems with this code:

1. One would cause the page not to validate, because it is not XHTML 1.0 Strict.
2. The other problem would not be detected by the validator because it uses valid code, but it still breaks the principle of separation of content and presentation.

Can you find them?

Using valid HTML markup

The validation problem is here:

The validator complains that there is no attribute "align" for the element <p>. Indeed, "align" tells the browser how to present the content: it is the function of css to do that.

The quick and dirty solution is to use in-line CSS (i.e. css declared within an HTML element, as an attribute). The result would be:

Despite being correct (it will validate), this code is less than ideal. See below to know why.

Why bother?

The thing is most, if not all, browsers will properly handle improper HTML. Both the "improper" HTML and the "correct" one are presented exactly the same within the browser.
So: what's the difference? Why bother going the trouble to validate the HTML and learn CSS code since the end result seems to be the same?

To understand why it is style a good idea to code valid HTML, one has to go to the philosophy that inspired the creation of CSS in the first place. Here is not the place to reproduce the whole justification. Let's just say that the style of a web site can change anytime by just applying a single style sheet. That style sheet will affect ALL the content on the site, including pages created years earlier. The HTML code however will stay the same. If changes in the HTML of the page content must be made, each single page must be updated individually by hand, one by one.

In the example above, suppose we decide one day to change the presentation of the quotes. If the presentation is hard coded within the HTML, each of the pages containing a quote must be manually changed one by one, so that we have a consistent look throughout the site.

On the other hand, if a proper semantic HTML markup has been used and the styling definition relegated to a CSS file, then changing the styling of the quotes throughout the web site is only a matter of changing one CSS file.

This is the reason why the following code, although valid, is the wrong approach:

Here the CSS code is embedded within the HTML, and to change the styling, one still would have to change each individual page to make it consistent in every page.

What's the second problem then?

Now that you have read so far, can you guess what is the second problem that I mentioned above?

Read again the beginning and try to guess before reading below.

Have you guessed?

The problem is both with the use of the elements <p> and <strong>.

It's a minor point, but I guess that <blockquote> would be semantically more correct than <p>. It is indeed a block with a quote inside: so the element <blockquote> describes better that the content is (regardless on how it is presented).

The use of <strong> is more problematic. <strong> is a proper semantic element describing the content: it is an important text that needs to be strongly emphasized. Making the text bold is the usual way to strongly emphasize text, but it doesn't have to be this way.

The problem here is the webmaster's logic: instead of thinking in terms of content ("What is the semantic value of what I am typing?"), he's thinking in terms of presentation ("I want this to look bold. How do I achieve that?").

The proper approach would be to use the HTML to properly describe the semantic nature of the text, and then use CSS to make it look the way we want. This is a long term investment: the HTML code won't decay and can remain the same, but the presentation can be adjusted across the site at any time by modifying a single CSS file.

A solution

Notice that it is not the solution: there are different ways to code the quote.

So, here is a solution:

Here, we wrap the whole thing (the actual quote AND the author) in a <blockquote> element. <blockquote> are commonly used in different contexts. In the site, there is a repeated pattern of opening an article with a quote with the name of the author. So, in order to be able to theme such <blockquote>'s differently from the other <blockquote> used in different contexts, we use the class "quote". The class name will be used in the CSS code (see below). We could have named the class differently, e.g. "important-quote" or "quote-with-author" or "opening-quote".

The name of the author is placed in a paragraph on its own, with a proper class identification (naturally: "author").

Note that we don't use the element <strong> anymore.

Note also that we don't make use of inline CSS declaration anymore. By keeping the CSS (below) in its own file, it is easier to change anytime without editing each single page. Inline CSS declaration is useful when we want to make a one-off exception on how the text is presented. E.g. above: I needed to make an extra high blank space between two paragraphs to signify to the readers that I expected them (you!) to actually go back to the beginning of the article and take a second guess at what the second problem was.
That's why I used the following inline CSS declaration:

To conclude our solution, we need to add the following code to the CSS file :

Thus we get valid HTML and a CSS-based presentation that can be changed any time.