HyperText Markup Language/Text Formatting

The Text Formatting elements give logical structure to phrases in your HTML document. This structure is normally presented to the user by changing the appearance of the text.

We have seen in the Introduction to this book how we can emphasize text by using   tags. Graphical browsers normally present emphasized text in italics. Some Screen readers, utilities which read the page to the user, may speak emphasized words with a different inflection.

A common mistake is to tag an element to get a certain appearance instead of tagging its meaning. This issue becomes clearer when testing in multiple browsers, especially with graphical and text-only browsers as well as screen readers.

You can change the default presentation for any element using Cascading Style Sheets. For example, if you wanted all emphasized text to appear in red normal text you would use the following CSS rule:

In this section, we will explore a few basic ways in which you can markup the logical structure of your document.

Emphasis
HTML has elements for two degrees of emphasis:
 * The  element for emphasized text, usually rendered in italics.
 * The  element for strongly emphasized text, usually rendered in bold.

An example of emphasized text:

An example rendering:

An example of strongly emphasized text:

An example rendering:

Preformatted text
Preformatted text is rendered using fixed-width font, and without condensing multiple spaces into one, which results in preserved spacing. Newlines are rendered as newlines, unlike outside preformatted text. HTML markup in the preformatted text is still interpreted by browsers though, meaning that " a " will still be rendered as " a ".

To create preformatted text, start it with &lt;pre&gt; and end it with &lt;/pre&gt;.

An example:

The resulting rendering:

,---, '---'
 * No. | Person         |
 * 1. | Bill Newton     |
 * 2. | Magaret Clapton |
 * 2. | Magaret Clapton |

Omitting the preformatting tags will cause the same text to appear all in one line:

,---, '---'
 * No. | Person         |
 * 1. | Bill Newton     |
 * 2. | Magaret Clapton |
 * 2. | Magaret Clapton |

Special Characters
To insert non-standard characters or characters that hold special meaning in HTML, a character reference is required. For example, to input the ampersand, "&", "&amp;amp;" must be typed. Characters can also be inserted by their ASCII or Unicode number code.

Abbreviations
Another useful element is. This can be used to provide a definition for an abbreviation, e.g.


 * Will be displayed as: HTML
 * When you will hover over HTML, you see HyperText Markup Language

Graphical browsers often show abbreviations with a dotted underline. The  appears as a tooltip. Screen readers may read the  at the user's request.

Note: very old browsers (Internet Explorer version 6 and lower) do not support. Because they support the related element, that element has been commonly used for all abbreviations.

An acronym is a special abbreviation in which letters from several words are pronounced to form a new word (e.g. radar - Radio Detection And Ranging). The letters in HTML are pronounced separately, technically making it a different sort of abbreviation known as an initialism.

Discouraged Formatting
HTML supports various formatting elements whose use is discouraged in favor of the use of cascading style sheets (CSS). Here's a short overview of the discouraged formatting, so that you know what it is when you see it in some web page, and know how to replace it with CSS formatting. Some of the discouraged elements are merely discouraged, others are deprecated in addition.

Cascading Style Sheets
The use of style elements such as &lt;b&gt; for bold or &lt;i&gt; for italic is straight-forward, but it couples the presentation layer with the content layer. By using Cascading Style Sheets, the HTML author can decouple these two distinctly different parts so that a properly marked-up document may be rendered in various ways while the document itself remains unchanged. For example, if the publisher would like to change cited references in a document to appear as bold text as they were previously italic, they simply need to update the style sheet and not go through each document changing &lt;b&gt; to &lt;i&gt; and vice-versa. Cascading Style Sheets also allow the reader to make these choices, overriding those of the publisher.

Continuing with the above example, let's say that the publisher has correctly marked up all their documents by surround references to cited material (such as the name of a book) in the documents with the &lt;cite&gt; tag:

&lt;cite&gt;The Great Gatsby&lt;/cite&gt;

Then to make all cited references bold, one would put something like the following in the style sheet:

cite { font-weight: bold; }

Later someone tells you that references really need to be italic. Before CSS, you would have to hunt through all your documents, changing the &lt;b&gt; and &lt;/b&gt; to &lt;i&gt; and &lt;/i&gt; (but being careful *not* to change words that are in bold that are not cited references).

But with CSS, it's as simple as changing one line in the style sheet to

cite { font-style: italic; }