4.12 Character Emphasis Modes

HTML allows you to specify special character highlighting or emphasis (eg boldface, italics, etc). These elements do NOT cause page breaks, and simply change the rendering of the characters enclosed inside the tags.

HTML allows you to specify these modes in two ways: Logically (by the logical meaning of the special text you wish to mark) and physically (by explicitly specifying the style you want, such as italics, boldfaced, underline, etc.). You are STRONGLY urged to use the logical renderings, as these will be more consistently interpreted from browser to browser.

Note that the logical styles may not be distinct (i.e. different logical styles may be rendered in the same way). Also, some browsers do not support all physical styles. For example, Mosaic does NOT support underlined text -- this is rendered without the underline.

4.12.1 Elements Proposed by HTML 3

HTML 3 Proposed several new text emphasis elements, such as BIG and SMALL for bigger and smaller text, and SUP and SUB for superscripts and subscripts. These are integrated into HTML 3.2, and are implemented on most newer browsers (Navigator 2.0, Internet Explorer 3.0, etc.) You should be cautious in their user. Examples are given below, which will let you test the abilities of your own browser.

4.12.2 Elements proposed by Netscape and Microsoft

Netscape introduced the special element FONT, which controls the size of the font, on a scale from 1 to 7 (the basefont of the document can be set using the BASEFONT element -- e.g. <BASEFONT SIZE=2>). FONT is discussed in more detail below.

4.12.3 Logical Styles

Here are the different logical styles, and examples of the renderings:

ABBR

An abbreviation. for example the string <ABBR> this is an abbrev.</ABBR> is rendered: this is an abbrev..

CODE

Example of typed code (usually fixed-width font). For example the string <CODE> this is example code </CODE> is rendered: this is example code.

EM

Emphasis (usually italics). For example the string <EM> this is example text </EM> is rendered: this is example text.

STRONG

Stronger emphasis (usually bold). For example the string <STRONG> this is example strong text </STRONG> is rendered: this is example strong text.

Q

A short inline quotation. A browser might surround the text with appropriate quotation characters -- at present most do not. For example, the string <Q> this is example text </Q> is rendered: this is example text.

SAMP

A sequence of literal characters. For example the string <SAMP> this is example text </SAMP> is rendered: this is example text.

KBD

Text to be marked as keyboard input: for example, in an instruction manual this would be the text typed by the user. For example the string <KBD> this is example text </KBD> is rendered: "this is example text.

VAR

A variable name. For example, the string <VAR> this is example text </VAR> is rendered: this is example text.

DFN

The defining instance of a term (often rendered bold or bold italic). For example <DFN> this is example text </DFN> is rendered: this is example text.

CITE

A citation (typically rendered in italics). For example <CITE> this is example text </CITE> is rendered: this is example text.

4.12.4 Physical Styles

These elements physically determine the desired renderings. Please try and use the logical forms, whenever possible.

The physical style elements, and their renderings, are:

TT

Fixed width typewriter font. For example <TT> this is example text </TT> is rendered: this is example text.

B

Boldface where available (browser may render this in another manner if boldface is not possible). For example <B> this is example text </B> is rendered: this is example text.

I

Italics (may be rendered as slanted in some cases) For example <I> this is example text </I> is rendered: this is example text.

U (HTML 3)

Underline (may be rendered as slanted in some cases) For example <U> this is example text </U> is rendered: this is example text.This element is not widely supported.

BDO (HTML 4)

Bi-directional override. This is used to change the direction in which the text is displayed (e.g., for user with languages such as Arabic where the normal direction is the opposite of that with European languages. This takes the attribute DIR with values "ltr" (left-to-right) and "rtl" (right-to-left). For example <BDO DIR="rtl"> this is example text </BDO> is rendered: this is example text.This element is not widely supported.

BLINK (Netscape only)

Blinking text. For example <BLINK> this is example text </BLINK> is rendered: this is example text.

BIG (HTML 3)

Bigger text. For example <BIG> this is example text </BIG> is rendered: this is example text.

SMALL (HTML 3)

Smaller text For example <SMALL> this is example text </SMALL> is rendered: this is example text.

S (HTML 4)

Struck-through text. For example <S> this is example text </S> is rendered: this is example text.

MARQUEE (Microsoft only)

A scrolling text marquee. For example <MARQUEE> this is example text </MARQUEE> is rendered: this is example text.

SUB (HTML 3.2)

Subscripts -- For example <SUB>sub</SUB>script is rendered: _subscript.This element is not widely supported.

SUP (HTML 3.2)

Subscripts -- For example <SUP>sup</SUP>script is rendered: ^supscript. This element is not widely supported.

FONT (HTML 3.2 as a Netscape/Microsoft Extensions)

Fiddle the Font. This can be used, via the SIZE attribute (HTML 3.2) to control the font size. Thus <FONT SIZE="-1"> will select a slightly smaller font. For example <FONT SIZE="-1">smaller</FONT> is rendered: smaller.

Microsoft (3.0) and Netscape (3.0) both allow you to select font faces. Thus <FONT FACE="arial,helvetica,times"> will select an arial font (and helvetical should Arial not be available, and finally Times-Roman should Helvetica not be available). For example, <FONT FACE="arial,helvetica">this is arial font </FONT> is rendered: this is arial font.
Both browser also support font colors, via the COLOR attribute. Thus <FONT COLOR="#ff00aa">funny color</font> is rendered as funny color.

STRIKE (HTML 4)

Denotes struck-out text, usually by drawing a line through it. This is deprecated in favour of the element "S".

SPAN (HTML 4)

Introduced as a generic replacement for FONT and other inline formatting information. SPAN doesn't change the rendering at all. Instead, you need to use a style sheet to define how the content of a SPAN is formatted.