HTML and CSS Reference
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
Allows you to mark up addresses
Indicates a definition list (especially for term/definition pairs, but can be used
for other key/value pairs as well)
Indicates a definition term within a definition list
Indicates the definition of a term within a definition list
Indicates extended quotes
Indicates inline quotes
Labels form elements
Marks headers of columns and rows within a table
Marks table headers
Marks table footers
Groups form elements
Creates form buttons
Specifies citations or references to other sources
Indicates sample output of scripts, programs, etc.
Indicates text to be entered by the user
Specifies abbreviated forms or words or phrases
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).