Divisions and Centering | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

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>

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Center and Division Example  </title>   <meta http-equiv="content-type" content="text/html; 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>   </html>

Spans

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.

< Day Day Up >