Aligning Text on a Page

It's easy to take for granted the fact that most paragraphs are automatically aligned to the left when you're reading information on the Web. However, there are certainly situations in which you may choose to align content to the right or even the center of a page. HTML gives you the option to align a single HTML element, such as a paragraph of text, or entire sections of a page. Before we get into the details of these two alignment approaches, however, let's briefly recap how attributes work.

In Hour 3, "Linking to Other Web Pages," you briefly learned how attributes are used to provide additional information related to an HTML tag. Attributes are special code words used inside an HTML tag to control exactly what the tag does. They are very important in even the simplest of web pages, so it's important that you get comfortable using them. As an example, attributes are used to determine the alignment of paragraphs. When you begin a paragraph with the <p> tag, you can specify whether the text in that paragraph should be aligned to the left margin, right margin, or center of the page by setting the style attribute.

By the Way

The style attribute is actually used for just about all HTML formatting, as you'll learn throughout this lesson and the remainder of the book.

Aligning a Paragraph

To align a paragraph to the right margin, you place style="text-align:right" inside the <p> tag at the beginning of the paragraph. To center a paragraph, use <p style="text-align:center">. Similarly, the tag to align a paragraph to the left is <p style="text-align:left">. (For the record, this last alignment setting is seldom used because paragraphs are always aligned to the left by default when you use plain old <p>.) The text-align part of the style attribute is referred to as a style rule, which means that it is setting a particular style aspect of an HTML element. There are many style rules you can use to carefully control the formatting of web page content.

By the Way

Every attribute and style rule in HTML has a default value that is assumed if you don't set the attribute yourself. In the case of the text-align style rule of the <p> tag, the default value is left, so using the bare-bones <p> tag has the same effect as using <p style="text-align:left">. Learning the default values for common style rules is an important part of becoming a good web page developer.

The text-align style rule is not reserved for just the <p> tag. In fact, you can use the text-align style rule with just about any HTML tag that contains text, including <h1>, <h2>, the other heading tags, and some tags you will meet later. There are many other style rules besides text-align. You will find out how to use them as you learn more HTML tags.

According to the official HTML standard, it doesn't matter whether tags and attributes are in uppercase or lowercase letters. However, the more exacting XHTML standard requires tags and attributes to be lowercase, so it's important to make all of your code lowercase to adhere to XHTML. The XHTML standard also requires quotation marks around attribute values.

For example, the following code is technically acceptable in most popular web browsers:

 <P STYLE=TEXT-ALIGN:CENTER> 

However, this code does not conform to the latest standards for how web pages should be designed because it is in uppercase and the style attribute value text-align:center isn't in quotes. If you want to stay compatible with upcoming standards and software, you should always use the following instead:

 <p style="text-align:center"> 

By the Way

Keep in mind that sometimes the same style rule can have different meanings when used with different tags. For instance, you will discover in Hour 8, "Putting Graphics on a Web Page," that style="text-align:left" does something quite different when used with the <img> image tag than it does when used with the text tags discussed in this hour.

It's worth pointing out that prior to CSS style rules, HTML content was aligned using a special tag named <align>. The <align> tag functioned much like the text-align style rule, but it was eliminated from XHTML by the W3C. It still works in most browsers but you're discouraged from using it.

Aligning an Entire Section of a Page

When you want to set the alignment of more than one paragraph or heading at a time, you can use the text-align style rule with the <div>, or division, tag. By itself, <div>, and its corresponding closing </div> tag, actually doesn't do anything at allwhich would seem to make it a peculiarly useless tag!

Yet if you include a text-align style rule, <div> becomes quite useful indeed. Everything you put between <div style="text-align:center"> and </div>, for example, is centered. This may include lines of text, paragraphs, headings, images, and all the other things you'll learn how to put on web pages in upcoming lessons. Likewise, <div style="text-align:right"> will right-align everything down to the next </div> tag.

By the Way

Later in the book you'll find out that the <div> tag is also useful as a means of organizing text for applying special formatting styles.

Listing 5.1 demonstrates the style attribute and text-align style rule with both the <p> and the <div> tags. The results are shown in Figure 5.1. You'll learn many more advanced uses of the <div> tag in Part III.

Listing 5.1. The text-align Style Rule Used with the style Attribute

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   <head>     <title>Bohemia</title>   </head>   <body>     <div style="text-align:center">       <h1>Bohemia</h1>       <h3>by Dorothy Parker</h3>     </div>     <p style="text-align:left">       Authors and actors and artists and such<br />       Never know nothing, and never know much.<br />       Sculptors and singers and those of their kidney<br />       Tell their affairs from Seattle to Sydney.     </p>     <p style="text-align:center">       Playwrights and poets and such horses' necks<br />       Start off from anywhere, end up at sex.<br />       Diarists, critics, and similar roe<br />       Never say nothing, and never say no.     </p>     <p style="text-align:right">       People Who Do Things exceed my endurance;<br />       God, for a man that solicits insurance!     </p>   </body> </html> 

Figure 5.1. The alignment settings in Listing 5.1, as they appear in a web browser.