Section 10.1. Choosing Text Elements
10.1. Choosing Text Elements
This chapter, jam-packed as it is with text elements, is a good opportunity for a reminder about the importance of
In the early
Now we have Cascading Style Sheets (CSS) to visually format any element any way we like, at last liberating us from the browsers' default rendering styles. That means you must choose elements that accurately describe your content. If you don't like how it looks, change it with a style sheet. If you don't see an HTML element that fits, use a generic div or span element to add appropriate structure and meaning. Additional tips on good markup are listed in Chapter 8.
|
10.2. The Building Blocks of Content
Text elements fall into two broad categories: inline and block.
Inline elements
occur in the flow of text and do not cause line breaks by default (they are covered later in this chapter).
Block-level elements
, on the other hand, have a default presentation that starts a new line and tends to stack up like blocks in the normal flow of the document. Block elements make up the main
Compared to inline elements, there are relatively few block elements. This section looks at heading levels, paragraphs, blockquotes, preformatted text, and addresses. Lists and list items are also block elements, and they are discussed later in this chapter, as is the generic div element used for defining custom block elements. The other block-level elements are tables and forms, which are treated in their own respective chapters. 10.2.1. HeadingsHeadings are used to introduce ideas or sections of text. (X)HTML defines six levels of headings, from h1 to h6 , in order from most to least important.
<h n >...</h n > Attributes
Deprecated attributes
This example defines the element as a
<h1>Camp Sunny-Side Up</h1>
HTML syntax requires that headings appear in order (for example, an
h2
should not precede an
h1
) for proper document structure. Doing so not only
Browsers
10.2.2. ParagraphsParagraphs are the most rudimentary elements of a text document. They are indicated by the p element.
<p>...</p> Attributes
Deprecated attributes
Paragraphs may contain text and inline elements, but they may not contain other block elements, including other paragraphs. The following is an example of a paragraph
<p>
Paragraphs are the most rudimentary elements of a text
document. They are indicated by the p element.
</p>
Because paragraphs are block elements, they always start a new line. Most browsers also add margins above and below block elements. Text is formatted flush-left, ragged right for
HTML 4.01 allows the end
</p>
tag to be omitted, leaving
10.2.3. Quotations (blockquote)Use the blockquote element for lengthy quotations, particularly those that span several paragraphs and require line breaks.
<blockquote>...</blockquote> Attributes
It is recommended that content within a blockquote be contained in other block-level elements, such as paragraphs, headings, lists, and so on, as shown in this markup example.
<blockquote cite=
"http://www.jenandtheneverendingstory.com"
>
<p>This is the beginning of a lengthy quotation
(text continues...)
</p>
<p>And it's still going on and on
(text continues...)
</p>
</blockquote>
The cite attribute is intended to be used to provide information about the source from which the quotation was borrowed, but it has very limited browser UI support (only Netscape 6+ as of this writing) and is not currently in common use. The HTML specification recommends that blockquotes be displayed as indented text, which, in fact, they usually are. The blockquote element should not be used merely to achieve indents. 10.2.4. Preformatted TextPreformatted text is used when it is necessary to preserve the whitespace in the source (character spaces and line breaks) when the document is displayed. This may be useful for code or poetry where spacing and alignment is important for meaning. Preformatted text is indicated with the pre element.
<pre>...</pre> Attributes
Deprecated Attributes
Preformatted text is unique in that it displays exactly as it is typed in the HTML source codeincluding all line returns and multiple character spaces. Long lines of text stay intact and are not reflowed. The pre element in this example displays as shown in Figure 10-1. The second part of the figure shows the same content marked up as a p element for comparison. <pre> This is an example of text with a lot of curious whitespace. </pre> <p> This is an example of text with a lot of curious whitespace. </p>
Preformatted text is
Figure 10-1. Preformatted text compared to a paragraph
10.2.5. AddressesThe address element is used to provide contact information for the author or maintainer of the document. It is not appropriate for all address listings. It is generally placed at the beginning or end of the document, or associated with a large section of content (such as a form).
<address>...</address> Attributes
An address might be used as shown in this markup example. <address> Contributed by <a href="../authors/robbins/">Jennifer Robbins</a>, <a href="http://www.oreilly.com/">O'Reilly Media</a> </address>
|
