Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

Alignment: Text

  • Print
  • + Share This
Laying out a Web page presents a unique challenge to the designer, especially if you have previous experience in another medium. This article explains how text alignment works in HTML, and why some aspects of Web layout are more about compromise than control.
This article is adapted from Creative HTML Design.2.
Like this article? We recommend

Like this article? We recommend

Alignment: Text

If you are used to laying out graphics and text in other media, even other computer-based media, you will find a unique challenge in HTML's alignment capabilities—or its lack thereof.

Because of the Web's unique distributed environment, in which you have no idea what disparate types of systems your page will be viewed on, HTML was not originally equipped to align the various elements on a page. The original HTML had no facility for text alignment, tables, or even inline images—let alone a method of sizing and aligning them.

Fortunately, that has changed significantly. Although it's still common to hear Web publishers complain about their lack of control over the final display properties of a given page, the situation is rapidly improving.

As you read this article, keep in mind that alignment in HTML is not an easy issue. You are dealing with a lot of variables over which you have no control. Many of your efforts in this area will be more of a compromise than you are probably used to. Absolute control over layout is not possible with pure HTML, but it's more than possible to create pages that will look great on a variety of platforms.

Text Alignment Tags

In its simplest form, aligning text is a matter of how a paragraph flows from one line to the next. For example, the paragraphs in my book Creative HTML Design.2 are aligned on the left sides of each line relative to the margins on the page. That is called left-justified text. Figure 1 shows the different alignments available in HTML.

Figure 1 Examples of text-justification options: left, right, middle, and justified (left and right).

HTML gives us the ability to center or align text against the left or right margins. Beginning with HTML 4.0, justified alignment is also available. The 4.0 versions of Netscape Navigator and MS Internet Explorer support full justification. HTML supports text content anywhere within a document; in fact, HTML treats most content as text, including inline graphics. However, in order to control the appearance of text, it must be within some sort of container that specifies the desired attributes. The most common container for text is the paragraph element (the P tag).

  • + Share This
  • 🔖 Save To Your Account