Section 10.2. The Building Blocks of Content
10.2. The Building Blocks of ContentText 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 components of document structure. 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.
<hn>...</hn> Attributes
Deprecated attributes
This example defines the element as a first-level heading. <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 improves accessibility, but aids in search engine optimization (information in higher heading levels is given more weight). Using heading levels consistently throughout a siteusing h1 for all article titles, for exampleis also recommended. Browsers generally render headings in bold text in decreasing size, but style rules may be applied to easily change their presentation. 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 marked up as a p element. <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 left-to-right reading languages (and flush-right for right-to-left reading languages). Style sheets may be used to override any default browser rendering. HTML 4.01 allows the end </p> tag to be omitted, leaving user agents to parse the beginning of a new block element as the end of the previous paragraph. In XHTML, however, all elements must be terminated, and omitting end tags will cause the document to be invalid. For reasons of forward compatibility, it is recommended that you close paragraphs and all elements regardless of the markup language you are using. 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 meant to be displayed in a fixed-width font to preserve the alignment of columns of characters. Authors are discouraged from changing the font face and whitespace settings with style sheets. Preformatted elements may include any inline element with the exception of img, object, big, small, sub, sup, and font, all of which would disrupt the column alignment of the fixed-width font. 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> |
EAN: 2147483647
Pages: 325