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 <em></em> 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:
em { font-style:normal; color:red; }
In this section, we will explore a few basic ways in which you can markup the logical structure of your document.
Emphasis edit
HTML has elements for two degrees of emphasis:
- The
emelement for emphasized text, usually rendered in italics. - The
strongelement for strongly emphasized text, usually rendered in bold.
An example of emphasized text:
It is essential not only to guess but actually <em>observe</em> the results.
An example rendering:
An example of strongly emphasized text:
Let us now focus on <strong>structural markup</strong>.
An example rendering:
Preformatted text edit
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 "<em>a</em>" will still be rendered as "a".
To create preformatted text, start it with <pre> and end it with </pre>.
An example:
<pre>
,-----------------------,
| No. | Person |
|-----------------------|
| 1. | Bill Newton |
| 2. | Magaret Clapton |
'-----------------------'
</pre>
The resulting rendering:
,-----------------------, | No. | Person | |-----------------------| | 1. | Bill Newton | | 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 | '-----------------------'
Special Characters edit
To insert non-standard characters or characters that hold special meaning in HTML, a character reference is required. For example, to input the ampersand, "&", "&" must be typed. Characters can also be inserted by their ASCII or Unicode number code.
|
|
Abbreviations edit
Another useful element is abbr. This can be used to provide a definition for an abbreviation, e.g.
<abbr title="HyperText Markup Language">HTML</abbr>
- 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 title appears as a tooltip. Screen readers may read the title at the user's request.
Note: very old browsers (Internet Explorer version 6 and lower) do not support abbr. Because they support the related element acronym, 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 edit
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.
| Element | Effect | Example | Status | CSS Alternative |
|---|---|---|---|---|
b
|
boldface | bold | font-weight: bold;
| |
i
|
italics | italics | font-style: italic;
| |
u
|
underlined | underlined | deprecated | text-decoration: underline;
|
tt
|
typewriter face | typewriter face | font-family: monospace;
| |
s
|
strikethrough | deprecated | text-decoration: line-through;
| |
strikethrough
|
strikethrough | <strikethrough>strikethrough</strikethrough> | deprecated | text-decoration: line-through;
|
big
|
big font | big | font-size: larger;
| |
small
|
small font | small | font-size: smaller;
| |
font
|
font size | size=1 | deprecated | font-size:(value) |
center
|
center a block | deprecated | text-align: center;
|
Cascading Style Sheets edit
The use of style elements such as <b> for bold or <i> 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 <b> to <i> 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 <cite> tag:
<cite>The Great Gatsby</cite>
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 <b> and </b> to <i> and </i> (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; }