Using the ALIGN Attribute

The ALIGN attribute can be used to center, right-align, or justify heading and paragraph elements. To try this out in the example, right-align the H1 element, center the H2 element, and justify the P element (see Figure 2.9).

Figure 2.9: The ALIGN attribute can horizontally align headings and paragraphs.

<h1 align="right">Miranda's World</h1>
<p align="justify">Welcome to my world! My name is
<i><b>Miranda Jones</b></i>. I'm a sophomore at Excelsior
College, majoring in <a href="/">urban horticulture</a>. When not studying, my
favorite activity is <em>inline skating</em>, which is
<b>great exercise</b>, but also a lot of <strong>fun</
strong>. Continue reading to find out more about my
interests, activities, family, friends, hobbies, causes, or
anything else I see fit to include. While this page is fairly
simple to start out, I hope to expand it later to be much
more comprehensive.</p>
<h2 align="center">Personal Information</h2>

When a paragraph is justified, the text is aligned with both margins. You should be aware when setting paragraph text as justified, however, that HTML does not have the capability to hyphenate longer words to further even out the spacing between words on a justified line of text. The result may be that excessive spaces between words (or "gutters") will be inserted in order to justify a line. Studies have also shown that ragged-right text (text aligned only with the left margin, with ragged text along the right margin) is easier to read and comprehend for all users, and not just for users with visual disabilities.

Using the CENTER Element

Alternatively, the CENTER element can be used to center one or more elements. It can also be used to center elements that cannot be centered using the ALIGN attribute, such as the UL or IMG elements. Remove the centeralignment set for the H2 element and then use the CENTER element to center the H2 element and the following paragraph and bulleted list (see Figure 2.10):

<center>
<h2 align="center">Personal Information</h2>
<p>Here is some more information about me:</p>
<!-- The content of the following list will change periodi-
cally. -->
<ul>
<li>I have red hair and green eyes.
<li>I <i>like</i> science and math.
<li>I'm taller than my boyfriend.
<li>I live to skate!
<li>When not studying or skating, I like to go to the movies.
</ul>
</center>

Figure 2.10: The ALIGN attribute can horizontally align headings and paragraphs.