Text Formatting Tags

Physical Text Styles

The exact fonts and sizes used for text will vary depending on your particular browser. In general, text not surrounded by tags is displayed in the standard, proportional font in a 10 to 12 point size.

Text can be formatted in a predictable style using the Physical text tags; however, this partially defeats the purpose of a "Page Description Langauge" such as HTML, since it is intended to tell how the elements of the page are used rather than how they appear. HTML 4 allows you to specify the appearance of any tag through Cascading Style Sheets, so it is best to use logical text styles. For instance, this style sheet defines <cite> as italics and <em> as bold:

<style type="text/css">
<!--
cite    {font-style:italic;}
em      {font-weight: bold;}
// -->
</style>
Some of the physical text styles are:

This is a <b>Bold</b> text example. (<strong> preferred) CSS

This is an <i>Italics</i> text example. (<em> preferred) CSS

This is a <sub>Subscript</sub> text example. CSS

This is a <sup>Superscript</sup> text example. CSS

The tags for Underline <u>, Strikethrough <strike> & <s>, Teletype text <tt>, Big <big>, and the Font tag <font> have all been deprecated and will not be supported in HTML 5. They should not be used in new documents and substitutions should be made in all edited documents.

Older versions of FireFox® and Opera supported blinking text using the <blink> text</blink> tags. Don't use it! It is highly annoying. CSS

Logical Text Styles

The original intent of Markup Languages was to show the use of the text rather than its appearance. These tags express the use but have no set presentation. Each browser will shows them as it chooses, although the physical style of most is common across today's browsers. The appearance of these tags may be defined using Cascading Style Sheets. This is preferred in HTML 4 to using Physical Text Styles.

The size of text used in headings on an HTML page is defined by "Header" tags. Headings always appear on a separate line (they cannot be embedded in a line of text). There are six sizes of text available. The Header tags are of the form <h# align="left|center|right">text</h#> where # is a number between 1 and 6 with 1 as the largest size and 6 as the smallest. ALIGN determines position of line with LEFT as default. The following are examples of the six text sizes.

<h1>Header 1</h1>

<h2>Header 2</h2>

<h3 align="center">Header 3 </h3>

<h4 align="right">Header 4</h4>

<h5>Header 5</h5>
<h6>Header 6</h6>

Headers can be grouped using the <hgroup>multiple headers</hgroup> tags. This is useful for applying styles to multiple headers.

Indent and color

for all these headers

is controlled by the hgroup

Other logical text tags are:

This is a <m>Mark</m> text example (highlight text).

This is a <time></time> text example.

This is an <em>Emphasis</em> text example.

This is a <strong>Strong</strong> text example.

This is an <address>

Address
</address> text example. (May contain an automatic line break.)

This is a <cite>Citation</cite> text example.

This is a <dfn>Definition</dfn> text example.

This is a <del>Deleted</del> text example.

This is an <ins>Inserted</ins> text example.

This is a <code>Program Code</code> text example.

This is a <var>Variable</var> text example.

This is a <samp>Sample Output</samp> text example.

This is a <kbd>Keyboard Input</kbd> text example.

This is a <q>Quoted</q> text example. Text should appear in quotes. (Support FF2, OP9, SF3, CH1)

This is a <abbr title="meaning of abbreviation">abbr.</abbr> (abbreviation) text example. Placing the cursor over the abbreviation text should cause the meaning of abbreviation to appear in a Tooltip window. FireFox and Opera also use a dotted underline. (Support FF2, OP9, IE7, CH1)

This is a <acronym title="meaning of acronym">WWW</acronym> (acronym) text example. Placing the cursor over the acronym text should cause the meaning of acronym to appear in a Tooltip window. FireFox and Opera also use a dotted underline. (Support FF2, OP9, IE7, CH1) (will not be supported in HTML 5, use ABBR)

This is a <small>small</small> text example. Small has changed meaning and representation in HTML5 . <small> now means small print as in legal documents. To replicate the older meaning of <small> use CSS.

Changing text direction and language

The Bi-directional Output tag can change the base language or text direction for a section of a page. The tag has the form:

<bdo lang="language_code" dir="LTR|RTL">text</bdo>

Where LTR=left to right and RTL=right to left. This is an example of BDO with dir="RTL".

This is the direction in which Hebrew text is read.


Next Lesson Next Page

HTML Home