Learning Web Design Third Edition- P10 doc

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 defi

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

<address>

Contributed by <a href=" /authors/robbins/">Jennifer Robbins</a>,

<a href="http://www.oreilly.com/">O’Reilly 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

Note

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)

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

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.

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

Note

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

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.

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

WARNING

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 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

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

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

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

Windows (bottom) does not Support is

Internet Explorer 6

Figure 5-11. Standards-compliant

browsers, such as Mozilla Firefox (top)

automatically add quotation marks

Windows (bottom) does not Support is

fixed in IE7.

The Inline Text Element Round-up 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

Note

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.

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

Table 5-3. Presentational inline text elements

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.