The Promise of CSS - Pro CSS Techniques - page 4

Creating Semantically Rich (X)HTML Markup
Now that you understand the benefits of semantic markup, how can you go about creating
(X)HTML that is as structured and meaningful as possible?
Start by using the right (X)HTML elements for your content. If it's a paragraph, put it in a <p>
tag. If it's a header, put it in an <h x > tag. If it's a list of links, use <a> tags inside of list elements.
This may sound simple, but it's astonishing how many sites you'll find on the Internet that don't
bother with these details at all. They choose to put two <br> tags after some text rather than
using the paragraph element, or they use <font size="5"> instead of a header element.
To help you decide on the right elements for your content, become familiar with some of
the lesser-used (X)HTML tags. There are a whole host of useful elements out there that many
web developers seem to completely forget about. By simply adopting some of these tags as
your own, you can quickly add structure, context, and styling hooks to your documents. We'll
be using many of these tags later in the topic as we get into styling various page elements. In
the meantime, you may wish to brush up on your (X)HTML if these are not elements you are
familiar with. Table 1-1 lists some of the lesser-used tags you may want to get to know.

Table 1-1. Semantic (X)HTML Elements That Are Often Underused by Designers and Developers

Element Purpose

address Allows you to mark up addresses

dl Indicates a definition list (especially for term/definition pairs, but can be used

for other key/value pairs as well)

dt Indicates a definition term within a definition list

dd Indicates the definition of a term within a definition list

blockquote Indicates extended quotes

q Indicates inline quotes

label

Labels form elements

th

Marks headers of columns and rows within a table

thead Marks table headers

tfoot Marks table footers

fieldset Groups form elements

button Creates form buttons

cite Specifies citations or references to other sources

samp Indicates sample output of scripts, programs, etc.

kbd Indicates text to be entered by the user

abbr Specifies abbreviated forms or words or phrases

acronym

Indicates acronyms

It should be obvious by now, but when creating semantic markup, you want to avoid presen-
tational tags such as <font> , <i> , <b> , and <u> . The sole purpose of each of these tags is to create
a visual effect, which in the modern world of web development is the job of CSS, not (X)HTML.
You should use elements like em and strong to define the meaning of the content, and then use
CSS to specify your desired presentation for those elements (such as underlined, bold, or italic).