Learning Web Design Third Edition- P10 doc

Part II: HTML Markup for Structure
76
Lists
Addresses
Last, and well, least, is the address element that is used to provide contact
information for the author or maintainer of the document. It is generally
placed at the beginning or end of a document or a large section of a docu-
ment. You shouldn’t use the address element for all types of addresses, such as
mailing addresses, so its use is fairly limited. Here’s an example of its intended
use (the “a href” parts are the markup for links we’ll get to those in Chapter
6, Adding Links).
<address>
Contributed by <a href=" /authors/robbins/">Jennifer Robbins</a>,
<a href=" Media</a>
</address>
Lists
Sometimes it is necessary to itemize information instead of breaking it into
paragraphs. There are three main types of lists in (X)HTML:
Unordered lists. Collections of items that appear in no particular order.
Ordered lists. Lists in which the sequence of the items is important.
Definition lists. Lists that consist of terms and definitions.
All list elements—the lists themselves and the items that go in them—are
block-level elements, which means that they always start on a new line by
default. In this section, we’ll look at each list type in detail.
Unordered lists
Just about any list of examples, names, components, thoughts, or options
qualify as unordered lists. In fact, most lists fall into this category. By default,
unordered lists display with a bullet before each list item, but you can change
that with a style sheet, as you’ll see in a moment.
To identify an unordered list, mark it up as a ul element. The opening <ul>
tag goes before the first list item and the closing tag </ul> goes after the last

item. Then, each item in the list gets marked up as a list item (li) by enclosing
it in opening and closing li tags as shown in this example. Notice that there
are no bullets in the source document. They are added automatically by the
browser (Figure 5-5).
<ul>
<li>Serif</li>
<li>Sans-serif</li>
<li>Script</li>
<li>Display</li>
<li>Dingbats</li>
</ul>
•
•
•
<address> </address>
Contact information
<address> </address>
Contact information
<ul> </ul>
Unordered list
<li> </li>
List item within an unordered list
<ul> </ul>
Unordered list
<li> </li>
List item within an unordered list
N o t e
The only thing that is permitted within
an unordered list (that is, between the
start and end ul tags) is one or more list

items. You can’t put other elements in
there, and there may not be any untagged
text. However, you can put any element,
even other block elements, within a list
item (li).
Lists
Chapter 5, Marking Up Text
77
But here’s the cool part. We can take that same unordered list markup, and
radically change its appearance by applying different style sheets, as shown
in Figure 5-6. In the figure, I’ve turned off the bullets, added bullets of my
own, made the items line up horizontally, even made them look like graphical
buttons. The markup stays exactly the same.
Ordered lists
Ordered lists are for items that occur in a particular order, such as step-by-
step instructions or driving directions. They work just like unordered lists
described earlier, except they are defined with the ol element (for ordered
list, naturally). Instead of bullets, the browser automatically inserts numbers
before ordered list items, so you don’t need to number them in the source
document. This makes it easy to rearrange list items without renumbering
them.
Ordered list elements must contain one or more list item elements, as shown
in this example and in Figure 5-7:
<ol>
<li>Gutenburg develops moveable type (1450s)</li>
<li>Linotype is introduced (1890s)</li>
<li>Photocomposition catches on (1950s)</li>
<li>Type goes digital (1980s)</li>
</ol>
Figure 5-6. With style sheets, you can give the same unordered list many different looks. Figure 5-6. With style sheets, you can give the same unordered list many different looks.

<ol> </ol>
Ordered list
<li> </li>
List item within an ordered list
<ol> </ol>
Ordered list
<li> </li>
List item within an ordered list
Figure 5-5. The default rendering of the sample unordered list. The bullets are added
automatically by the browser.
Nesting Lists
Any list can be nested within
another list; it just has to be placed
within a list item. This example
shows the structure of an unordered
list nested in the second ordered list
item.
<ol>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ol>
When you nest an unordered list
within another unordered list, the
browser automatically changes the

bullet style for the second-level list.
Unfortunately, the numbering style
is not changed by default when you
nest ordered lists. You need to set
the numbering styles yourself using
style sheets.
Part II: HTML Markup for Structure
78
Lists
If you want a numbered list to start at a number other than “1,” you can use
the start attribute in the ol element to specify another starting number, as
shown here:
<ol start="17">
<li>Highlight the text with the text tool.</li>
<li>Select the Character tab.</li>
<li>Choose a typeface from the pop-up menu.</li>
</ol>
The resulting list items would be numbered 17, 18, and 19, consecutively.
N o t e
The start attribute is not supported in the “Strict” versions of HTML and
XHTML, so you have to use CSS generated text (beyond the scope of this book)
instead. Unfortunately, generated text is not supported by IE6(Win) and earlier.
If you need to alter numbering in a way that is supported by all browsers, stick
with the “Transitional” version of (X)HTML and use the start attribute. The dif-
ference between Strict and Transitional is explained in Chapter 10.
Definition lists
Definition (or dictionary) lists are used for lists of terms with their respective
definitions. They are a bit different from the other two list types in format. The
whole list is marked up as a definition list (dl) element. The content of a dl is
some number of terms (indicated by the dt element) and definitions (indicated

by the dd element). Here is an example of a brief definition list (Figure 5-8).
<dl>
<dt>Linotype</dt>
<dd>Line-casting allowed type to be selected, used, then recirculated
into the machine automatically. This advance increased the speed of
typesetting and printing dramatically.</dd>
<dt>Photocomposition</dt>
<dd>Typefaces are stored on film then projected onto photo-sensitive
paper. Lenses adjust the size of the type.</dd>
<dt>Digital type</dt>
<dd><p>Digital typefaces store the outline of the font shape in a
format such as Postscript. The outline may be scaled to any size for
output.</p>
<p>Postscript emerged as a standard due to its support of
graphics and its early support on the Macintosh computer and Apple
laser printer.</p>
</dd>
</dl>
<dl> </dl>
A definition list
<dt> </dt>
A term
<dd> </dt>
A definition
<dl> </dl>
A definition list
<dt> </dt>
A term
<dd> </dt>
A definition

Figure 5-7. The default rendering of an ordered list. The numbers are added
automatically by the browser.
Changing Bullets
and Numbering
You can use the
list-style-type

style sheet property to change the
bullets and numbers for lists. For
example, for unordered lists, you
can change the shape from the
default dot to a square or an open
circle, substitute your own image,
or remove the bullet altogether. For
ordered lists, you can change the
numbers to roman numerals (I., II.,
III. or i., ii., iii.), letters (A., B., C., or a.,
b., c.), and several other numbering
schemes. Changing the style of lists
with CSS is covered in Chapter 17.
Adding Line Breaks
Chapter 5, Marking Up Text
79
The dl element is only allowed to contain dt and dl elements. It is okay
to have multiple definitions with one term and vice versa. You can not put
block-level elements (like headings or paragraphs) in terms (dt), but the defi-
nition (dd) can contain any type of content (inline or block-level elements).
At this point, you’ve been introduced to all of the elements for defining dif-
ferent blocks of text. In Exercise 5-1 (following page), you’ll get a chance to
mark up a document yourself and try them out.

Adding Line Breaks
All of the elements we’ve seen so far start automatically on new lines. But
sometimes it is desirable to add a line break within the flow of text. Because
we know that the browser ignores line breaks in the source document, we
need a specific directive to tell the browser to “add a line break here.”
The inline line break element (br) does exactly that. The classic use of the
br element is to break up lines of addresses or poetry. It is an empty ele-
ment, which means it does not have content. Just add the br element (<br>
in HTML, <br /> in XHTML) in the flow of text where you want a break to
occur, as shown in here and in Figure 5-9.
<p>
So much depends <br />upon <br /><br />a red wheel <br />barrow
</p>
<br />
(XHTML)

<br>
(HTML)
A line break
<br />
(XHTML)

<br>
(HTML)
A line break
Figure 5-9. Line breaks are inserted at each br element.Figure 5-9. Line breaks are inserted at each br element.
Figure 5-8. The default rendering of a definition list. Definitions are set off from the terms
by an indent.
Part II: HTML Markup for Structure
80

Adding Line Breaks
Unfortunately, the br element is easily abused (see Warning). Consider
whether using the CSS white-space property (introduced in Chapter 12,
Formatting Text) might be a better alternative for maintaining line breaks
from your source without extra markup.
exercise 5-1
|
Fun with block elements
Below you will find the raw text of a recipe web page. The document structure
elements have been added, but it’s up to you to decide which element is the best
match for each block of content. The complete list of block elements is provided on
this page as a reminder of what you have to choose from, but you won’t necessarily
use all of them in this example.
You can write the tags right on this page. Or, if you want to use a text editor and see
the results in a browser, this text file is available online at www.learningwebdesign.
com/materials. The resulting code appears in Appendix A.
<html>
<head><title>Tapenade Recipe</title></head>
<body>
Tapenade (Olive Spread)
This is a really simple dish to prepare and it's always a big hit at
parties. My father recommends:
"Make this the night before so that the flavors have time to blend.
Just bring it up to room temperature before you serve it. In the
winter, try serving it warm."
Ingredients
1 8oz. jar sundried tomatoes
2 large garlic cloves
2/3 c. kalamata olives
1 t. capers

Instructions
Combine tomatoes and garlic in a food processor. Blend until as smooth
as possible.
Add capers and olives. Pulse the motor a few times until they are
incorporated, but still retain some texture.
Serve on thin toast rounds with goat cheese and fresh basil garnish
(optional).
</body>
</html>
Text Block Elements
headings
h1
,
h2
,
h3
,
h4
,
h5
,
h6
paragraph
p
long quotes
blockquote
preformatted
pre
author contact
address

unordered list
ul
ordered list
ol
list item
li
definition list
dl
term
dt
definition
dd
A t A G l A n c e
WA R N I N G
Be careful that you aren’t using br ele-
ments to force breaks into text that really
ought to be a list. For instance, don’t do
this:
<p>milk<br />
bread<br />
orange juice<br />
</p>
If it’s a list, use the semantically correct
unordered list element instead, and turn
off the bullets with style sheets.
<ul>
<li>milk</li>
<li>bread</li>
<li>orange juice</li>
</ul>

The Inline Text Element Round-up
Chapter 5, Marking Up Text
81
The Inline Text Element Round-up
Most (X)HTML text elements are inline elements, which means they just
stay in the flow of text and do not cause line breaks. Inline text elements fall
into two general categories: semantic elements and presentational elements.
Those terms should be familiar by now.
The semantic elements describe the meaning of the text; for example, an
acronym or emphasized text. The presentational elements provide descrip-
tions of the element’s typesetting or style, such as bold, italic, or underlined.
It should come as no surprise that the presentational inline elements are
discouraged from use in contemporary web design where style information
should kept be separate from the markup. For that reason, we’ll pay more
attention to the preferred semantic elements in this section.
Semantic inline elements
The semantic text elements describe the enclosed text’s meaning, context
or usage. The way they look when they appear in the browser window
depends on a style sheet, either one you provide or the browser’s built-in
default rendering.
Despite all the types of information you could add to a document, there are
only a dozen of these elements in (X)HTML. Table 5-2 lists all of them. We’ll
discuss each in more detail in this section.
Table 5-2. Semantic inline text elements
Element Description
abbr
abbreviation
acronym
acronym
cite

citation; a reference to another document, such as a book title
code
program code sample
del
deleted text; indicates an edit made to a document
dfn
the defining instance or first occurrence of a term
em
emphasized text
ins
inserted text; indicates an insertion in a document
kbd
keyboard; text entered by a user (for technical documents)
q
short, inline quotation
samp
sample output from programs
strong
strongly emphasized text
var
a variable or program argument (for technical documents)
Deprecated
Elements
A number of elements and attributes
in (X)HTML have been deprecated,
which means they are being phased
out and are discouraged from use.
You may run across them in existing
markup, so it is worthwhile knowing
what they are, but there is no reason

to use them in your documents.
Most of the deprecated elements
and attributes are presentational
and have analogous style sheet
properties that should be used
instead. Others are simply obsolete
or poorly supported.
The following is a complete list of
deprecated elements.
applet
inserts a Java applet
basefont
establishes default font
settings for a document
center
centers its content
dir
directory list (replaced
by unordered lists)
font
font face, color, and size
isindex
inserts a search box
menu
menu list (replaced by
unordered lists)
s
strike-through text
strike
strike-through text

u
underlined text
Part II: HTML Markup for Structure
82
The Inline Text Element Round-up
Adding emphasis to text
There are two elements that indicate that text should be emphasized: em for
emphasized text and strong for strongly emphasized text. Emphasized text
elements almost always display in italics by default, but of course you can
make them display any way you like with a style sheet. Strong text typically
displays in bold text. Screen readers may use a different tone of voice to con-
vey emphasized text, which is why you should use an em or strong element
only when it makes sense semantically, not just to achieve italic or bold text.
The following is a brief example of emphasized and strong text elements in
the flow of a paragraph element. Figure 5-10 should hold no surprises.
<p>Garamond is a <em>really</em> popular typeface, but Times is a
<strong>really really</strong> popular typeface.</p>
Short quotations
Use the quotation (q) element to mark up short quotations, such as “To be or
not to be” in the flow of text, as shown in this example.
Matthew Carter says, <q>Our alphabet hasn't changed in eons.</q>
According to the HTML 4.01 Recommendation, browsers should automati-
cally add quotation marks around q elements, so you don’t need to include
them in the source document. Many standards-compliant browsers (Firefox,
IE7(Win), Netscape, Opera, Safari, and IE on the Mac) do just that.
Unfortunately, Internet Explorer 5, 5.5, and 6 on Windows, which account for
as much as 70% of web traffic as of this writing, do not (Figure 5-11). That
makes using the q element kind of tricky: if you leave the quotation marks out,
IE5 and 6 users won’t see them, but if you include them, everyone else will see
them twice. As old versions vanish, the q element will become more useful.

<em> </em>
Emphasized inline text
<strong> </strong>
Strongly emphasized inline text
<em> </em>
Emphasized inline text
<strong> </strong>
Strongly emphasized inline text
Figure 5-10. The default rendering of emphasized and strong text.Figure 5-10. The default rendering of emphasized and strong text.
<q> </q>
Short inline quotation
<q> </q>
Short inline quotation
Mozilla Firefox 1
Internet Explorer 6
Figure 5-11. Standards-compliant
browsers, such as Mozilla Firefox (top)
automatically add quotation marks
around
q elements; Internet Explorer 6 for
Windows (bottom) does not. Support is
fixed in IE7.
Mozilla Firefox 1
Internet Explorer 6
Figure 5-11. Standards-compliant
browsers, such as Mozilla Firefox (top)
automatically add quotation marks
around q elements; Internet Explorer 6 for
Windows (bottom) does not. Support is
fixed in IE7.

The Inline Text Element Round-up
Chapter 5, Marking Up Text
83
Abbreviations and acronyms
Marking up shorthand terms as acronyms and abbreviations provides
useful information for search engines, screen readers, and other devices.
Abbreviations, indicated by the abbr element, are shortened versions of a
word ending in a period (Conn. for Connecticut, for example). Acronyms,
indicated by the acronym element, are abbreviations formed by the first let-
ters of the words in a phrase (such as WWW or USA). Both elements use the
title attribute to provide the long version of the shortened term, as shown
in this example.
<acronym title="American Type Founders">ATF</acronym>
<abbr title="Points">pts.</abbr>
Citations
The cite element is used to identify a reference to another document, such
as a book, magazine, article title, and so on. Citations are typically rendered
in italic text by default. Here’s an example:
<p>Passages of this article were inspired by <cite>The Complete Manual
of Typography</cite> by James Felici.</p>
Defining terms
In publishing, the first and defining instance of a word or term is often
called out in some fashion. In this book, defining terms are set in blue text.
In (X)HTML, you can identify them with the dfn element and format them
visually using style sheets. They are also useful for foreign phrases where a
translation can be provided by a title attribute.
<p><dfn>Script typefaces</dfn> are based on handwriting.</p>
Program code elements
A number of inline elements are used for describing the parts of technical
documents, such as code (code), variables (var), program samples (samp), and

user-entered keyboard strokes (kbd). For me, it’s a quaint reminder of HTML’s
origins in the scientific world (Tim Berners-Lee developed HTML to share
documents at the CERN particle physics lab in 1989).
Code, sample, and keyboard elements typically render in a constant-width
(also called monospace) font such as Courier by default. Variables usually
render in italics.
Inserted and deleted text
The ins and del elements are used to mark up changes to the text and indi-
cate parts of a document that have been inserted or deleted (respectively).
Chief Executive Officer:<del title="retired">Peter Pan</del><ins>Pippi
Longstockings</ins>
<abbr> </abbr>
Abbreviation
<acronym> </acronym>
Acronym
<abbr> </abbr>
Abbreviation
<acronym> </acronym>
Acronym
<cite> </cite>
Citation
<cite> </cite>
Citation
<dfn> </dfn>
Defining term
<dfn> </dfn>
Defining term
<code> </code>
Code
<var> </var>

Variable
<samp> </samp>
Program sample
<kbd> </kbd>
User-entered keyboard strokes
<code> </code>
Code
<var> </var>
Variable
<samp> </samp>
Program sample
<kbd> </kbd>
User-entered keyboard strokes
N o t e
The acronym element is likely to go away
in future versions of (X)HTML in favor
of using the abbr element for all acro-
nyms and abbreviations.
Part II: HTML Markup for Structure
84
The Inline Text Element Round-up
Presentational inline elements
The remaining inline text elements in the (X)HTML specification provide
typesetting instructions for the enclosed text. Like all inline text elements,
these elements have an opening tag and a closing tag, so you should already
be familiar with how they work.
As I mentioned earlier, professional web authors are careful to keep style
information like this out of the (X)HTML document. I’m not saying that you
should never use these elements; they are perfectly valid elements and many
of them (such as bold and italic) are included in future versions of XHTML

currently in development.
I am encouraging you, however, to consider whether there might be another
way to mark up the content that provides meaning and not just style instruc-
tions. There’s an alternative—whether it’s a semantic element or a style sheet
property—for just about every element in this category.
All of the presentational inline text elements along with the recommended
alternatives are listed in Table 5-3.
Adios, <font>!
The
font
element—an inline
element used to specify the size,
color, and font face for text—is the
poster child for what went wrong
with HTML. It was first introduced
by Netscape Navigator as a means
to give authors control over font
formatting not available at the
time. Netscape was rewarded with
a temporary slew of loyal users,
but the HTML standard and web
development community paid a
steep price in the long run. The
font

element is emphatically deprecated,
and you shouldn’t use it ever.
Not only does
font
add no semantic

value, it also makes site updates
more laborious because every
font
element needs to be hunted
down and changed. Compare this
to style sheets that let you reformat
elements throughout a site with a
single rule edit.
The
font
element has three
attributes, all of which have been
deprecated as well:
color
specifies the color of the
text
face
specifies a font or list of
fonts (separated by commas).
size
specifies the size for the font
on a scale of 1 to 7, with 3 as the
default.
Be aware that some WYSIWYG web
authoring tools still make heavy
use of the
font
element unless you
specify that you want all styles to be
handled with CSS.




exercise 5-2
|
Fix it
This document was written by someone who doesn’t know as much about modern
markup practices as you do. It needs some work.
Some markup is incorrect and needs to be fixed, some elements could be marked
up more accurately, and there is one element that was overlooked but should be
marked up for better accessibility. In all, there will be seven changes. Some of them
are obvious, and some of them are subtle.
You can make your changes right on this page, or download the source from www.
learningwebdesign.com/materials/ and edit the file in a text editor. The improved
markup is provided in Appendix A.
<h1>You've Won!
<p><b>Congratulations!</b> You have just won dinner for two at the
highly acclaimed Blue Ginger restaurant in Wellesley, Mass. In
addition to dinner, you will receive an autographed copy of Ming
Tsai's book, <i>Blue Ginger</i>. To redeem your prize, go to our site
and enter your prize code (Example: <tt>RPZ108-BG</tt>). We're sure
you're going to <i>love</i> it!<p>
The Inline Text Element Round-up
Chapter 5, Marking Up Text
85
Table 5-3. Presentational inline text elements
Element Description Alternative
b
bold text Use the strong element instead if appropriate, or use the font-weight CSS prop-
erty: font-weight: bold

big
makes text slightly larger
than the default text size
In CSS, use a relative font-size keyword to make text display slightly larger than
the surrounding text: font-size: bigger
center
centers the enclosed text Use the CSS text-align property to center the text in an element:
text-align: center
font
specifies the size, color, and
typeface (see the Adios,
<font>! sidebar)
All of the functionality of the font element has been replaced by the font-fam-
ily, font-size, and color CSS properties:
Example: font-family: sans-serif; font-size: 120%; color: white;
i
italic text Use the em element instead if appropriate, or use the CSS font-style property:
font-style: italic
s* strike-through text Use the CSS text-decoration property to make text display with a line through
it: text-decoration: line-through
small
makes text slightly smaller
than the default text size
Use a CSS relative font-size keyword to make text display slightly smaller
than the surrounding text: font-size: smaller
strike* strike-through text Use the CSS text-decoration property to make text display with a line through
it: text-decoration: line-through
sub
subscript (smaller font posi-
tioned below the text base-

line)
Use a combination of the font-size and vertical-align CSS properties to
resize and position subscript text: font-size: smaller; vertical-align:
sub;
sup
superscript (smaller font
positioned slightly above the
text baseline)
Use a combination of the font-size and vertical-align CSS properties to
resize and position subscript text: font-size: smaller; vertical-align:
sup;
tt
teletype; displays in constant-
width (monospace) font, such
as courier
Use a code, samp, or kbd element, if appropriate. Otherwise use the font-family
property to select a specific or generic fixed-width font:
font-family: “Andale Mono”, monospace;
u* underlined text Use the CSS text-decoration property to make text display with a line under it:
text-decoration: underline
* These elements have been “deprecated” in HTML 4.01, which means they will be phased out of future versions of XHTML.