Validity - Refactoring HTML: Improving the Design of Existing Web Applications - page 142

Replace Presentational Elements with CSS
Remove all big , small , strike , s , tt , and u elements and insert equivalent CSS or semantic elements.
Code View:
<big>All Items A Fraction of Their Usual Price!</big>
<small>That fraction is 7/3.</small>
<strike>Pick up laundry.</strike>
<s>Walk dog.</s>
<tt>$ ls *.txt</tt>
<u>The Lord of The Rings</u>
*.announce {font-size: 64pt; }
*.legal {font-size: 6pt }
*.done {text-decoration: line-through }
*.announce {font-size: 64pt; }
*.legal {font-size: 6pt }
*.done {text-decoration: line-through }
cite {text-decoration: underline}
...
<strong class="announce">
All Items A Fraction of Their Usual Price!
</strong>
<span class="legal">That fraction is 7/3.</span>
<span class="done">Pick up laundry.</span>
<del>Walk dog.</del>
<samp>$ ls *.txt</samp>
<cite>The Lord of The Rings</cite>
Motivation
XHTML strict does not allow any of these elements either. Usually there's a good semantic reason for these
styles that you can capture with specific elements, such as cite , or with a class attribute.
Potential Trade-offs
Very old browsers may not recognize the CSS rules, so a few details may not come across, but we're talking
truly ancient browsers here. Even the earliest browsers that supported CSS at all supported this much.
Mechanics
Validation against the strict DTD finds all of these. Alternatively, you can search for the start-tags <big , <small ,
<strike , and so on. These elements aren't as commonly used, so there aren't likely to be quite as many of
them as i and b .
Sometimes these elements are purely presentational. In this case, replace them with a span and attach the