The <div> tag is used to structure HTML documents into sections or divisions. A <div> is a logical block tag that has no predefined meaning or rendering. Under traditional HTML, the only major value of the <div> tag is to align sections of content by setting the align attribute to left, right, or center. By default, content within the <div> tag is left-aligned. Divisions are more significantly useful when used in conjunction with style sheets (see Chapter 10).
Aside from using the <div> tag to align blocks of text, it is possible to center text using a difficult-to-characterize proprietary tag: <center>. Under HTML 2.0-based browsers, centering text was impossible. One of the major additions introduced by Netscape was the <center> tag. HTML 3.2 adopted this element because of its widespread use, which continues today. To center text or embedded objects (such as images), simply enclose the content within <center> and </center>. In this sense, <center> appears to be a text- formatting style element, but under the HTML 3.2 and transitional 4.0 specification (and beyond), <center> is defined as an alias for a block-level structuring element and eventually will be deprecated under strict versions of HTML. Under the HTML 4.01 DTD, <center> is supposed to be simply an alias for <div align="center"> and is treated exactly the same way. Specification or not, the <center> tag is unlikely to go away, considering its simplicity and widespread use. The following example shows the use of <center> and <div>. (Figure 3-4 shows their screen rendering.)
Figure 3-4: Example rendering of <div> and <center>
<!DOCTYPEl PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/l1/DTD/l1-transitional.dtd"> <l xmlns="http://www.w3.org/1999/l" lang="en"> <head> <title>Center and Division Example</title> <meta http-equiv="content-type" content="textl; charset=ISO-8859-1" /> </head> <body> <center> <h1>This heading is centered.</h1> <p>This paragraph is also centered.</p> </center> <br /><br /> <div align="right"> <h1>Division Heading</h1> <p>Many paragraphs and other block elements can be affected by a DIV at once.</p> <p>Notice all the paragraphs are right aligned.</p> </div> </body> <l>
Although the <div> tag can be used to group large sections of a document for later application of a style sheet or various other formatting, it is not appropriate to put everything within a division. Because div is a block element, it will induce a return. If you want to group text without using a block element, use a <span> tag, as it provides logical grouping inline with no predefined look. Consider the following markup:
<p>In this sentence <span class="important">some of the text is important!</span></p>
In this markup fragment, the <span> tag wouldn't necessarily cause any particular presentation under plain HTML. However, as shown, using the class attribute, it could be related to a style sheet to make the enclosed text look different, while at the same time providing no particular logical meaning. We could do something directly, like so:
<p>In this sentence <span style="color: red; font-size: xx-large;">some of the text is big and red</span>!</p>
but that would defeat the value of separating presentation from document structure with styles. It would seem at this point the use of <div> and <span> tags might not make a great deal of sense, but they are some of the most useful of the core elements of XHTML. Their use with style sheets is discussed in Chapter 10.