4. Text Formatting

In Chapter 1, you have seen that the tag can make text bold. The effects of other tags are demonstrated in the following example.

bold

emphasized

strong

italic

THE^superscript

THE_subscript

computer code

computer variable

~~deleted~~

inserted

Blockquote

The BLOCKQUOTE element is rendered with wider margin (both left and right). Example:

This is the text WITHOUT blockquote. This is the text WITHOUT blockquote. This is the text WITHOUT blockquote. This is the text WITHOUT blockquote.

This is the text WITH blockquote. This is the text WITH blockquote. This is the text WITH blockquote. This is the text WITH blockquote.

Spaces and Line Breaks

By default, the browser condenses multiple spaces into one and removes line breaks of a plain text. To add spaces, you may use the code  . One   represents one space. To add a line break, use the tag . Note that the BR element does not have an end tag. A slash is added before ">" to close the BR element. Although most browsers still recognize , it is a good practice to use the standard notation .

Spaces and line breaks are commonly used in formatting poetry. The following is an example from Edgar Allan Poe's Annabel Lee.

It was many and many a year ago,
         In a kingdom by the sea,
That a maiden there lived whom you may know
         By the name of Annabel Lee;
And this maiden she lived with no other thought
         Than to love and be loved by me.

Preformatted Text

The tag for preformatted text is <pre>, which is used to preserve both spaces and line breaks. The above poem can also be coded as:

It was many and many a year ago,
     In a kingdom by the sea,
That a maiden there lived whom you may know
     By the name of Annabel Lee;
And this maiden she lived with no other thought
     Than to love and be loved by me.

Apparently, using <pre> is much simpler than   and . However, the PRE element does have a drawback: the length of a line is also preserved. For other elements, text will "wrap" automatically. That means, if a line is longer than the width of its parent element, extra words will go to the next line. This prevents the need of horizontal scrolling. Now, if the PRE element contains a poem with lines longer than the screen width (e.g., on a smartphone), readers will have to scroll horizontally. This would be a bad design.

Fortunately, the newest version of Cascading Style Sheet, CSS3, has introduced a style property that can solve this problem (see Chapter 9).