The first two examples in the previous section are similar to many others commonly found online. The second of the two comes from a Web author who thinks he is doing the right thing by pulling presentation information into CSS classes.
It is a good start, but it does not convey structure or meaning. It also continues to rely on the presentation aspects of the <p> tag without marking any text as a paragraph.
The third example is superior in many ways:
- The content is easier to read in the code.
- The article is surrounded by a <div> element with a class of article, and the credit section is surrounded by a class of credit. This breaks the portions of the code up from others and allows the usage of CSS, which does not need extra classes added to the markup. A single class per section is easier to remember, use, and document than several.
- Presentation elements such as the bold <b> tag have been dropped in favor of meaningful code. Additionally, usage of <em> for emphasis as opposed to italics is preferred.