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="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 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. . 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. 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. 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