Text Alignment

Text alignment is the capability to arrange a block of text, such as a heading or a paragraph, so that it's aligned against the left margin (left justification, the default), aligned against the right margin (right justification), or centered. Standard HTML 2.0 has no mechanisms for aligning text; the browser is responsible for determining the alignment of the text (which means most of the time it's left-justified).

HTML 3.2 introduced attributes for text and element alignment, and these attributes have been incorporated into all the major browsers. HTML 4.01 still supports alignment attributes, but the preferred method of controlling text alignment now is with style sheets.

Aligning Individual Elements

To align an individual heading or paragraph, include the align attribute in the opening tag. align has four values: left, right, center, or justify. Consider the following examples in the code snippet that follows.

The following input and output example shows the simple alignment of several headings. Figure 6.13 shows the results.

Input

<h1 align="center">Northridge Paints, Inc.</h1> <p align="center">We don't just paint the town red.</p> <h1 align="left">Serendipity Products</h1> <h2 align="right"><a href="who.html">Who We Are</a></h2> <h2 align="right"><a href="products.html">What We Do</a></h2> <h2 align="right"><a href="contacts.html">How To Reach Us</a></h2>

Output

Figure 6.13. Headings with varying alignments.

Aligning Blocks of Elements

A slightly more flexible method of aligning text elements is to use the <div> (division) tag. <div> includes several attributes, which are listed in Appendix B. Among these attributes is align (deprecated in HTML 4.01), which aligns elements to the left, right, or center just as it does for headings and paragraphs. Unlike using alignments in individual elements, however, <div> is used to surround a block of HTML tags of any kind, and it affects all the tags and text inside the opening and closing tags. Two advantages of div over the align attribute follow:

• You need to use <div> only once, rather than including align repeatedly in several different tags.

• <div> can be used to align anything (headings, paragraphs, quotes, images, tables, and so on); the align attribute is available on only a limited number of tags.

To align a block of HTML code, surround it with opening and closing <div> tags, and then include the align attribute in the opening tag. As in other tags, align can have the value left, right, or center:

<h1 align="left">Serendipity Products</h1> <div align="right"> <h2><a href="who.html">Who We Are</a></h2> <h2><a href="products.html">What We Do</a></h2> <h2><a href="contacts.html">How To Reach Us</a></h2> </div>

All the HTML between the two <div> tags will be aligned according to the value of the align attribute. If individual align attributes appear in headings or paragraphs inside the <div>, those values will override the global <div> setting.

Note that <div> itself isn't a paragraph type; it's just a container. Rather than altering the layout of the text itself, it just enables you to set off a group of text. One function of <div> is to change text alignment with the align attribute. It's also often used with CSS to apply styles to a specific block of text (much like its counterpart, <span>). In fact, to center elements within the <div> the CSS way (instead of using the deprecated align attribute), you can use the text-align property. Valid values for it are left, right, center, and justify. Figure 6.14 shows how it's used.

Input

<div style="text-align: left">Left aligned text.</div> <div style="text-align: right">Right aligned text.</div> <div style="text-align: center">Centered text.</div> <div style="text-align: justify">This text is justified. I'm adding some extra text for padding so that you can see exactly how the justification works. As you can see, the text is expanded so that it is aligned with both the left and right margins.</div>

Output

Figure 6.14. Various text alignments available using CSS.

You can also include the align attribute in the <p> tag. It's most common to use the justify setting for the align attribute with the <p> and <div> tags. When you justify a paragraph, the text is spaced so that it's flush with both the left and right margins of the page.