Learning HTML 3.2: Logical Text Markup

Emphasized Text

<EM> is used to indicate emphasized text.  While it is often rendered identical to <I>, italics, using <EM> rather than <I> is preferred.

<P>It allows the browser to distinguish between <EM>emphasized text</EM> and other text which can be drawn in <I>italics</I>.

It allows the browser to distinguish between emphasized text and other text which can be drawn in italics.

Strongly Emphasized Text

<STRONG> is used to indicate strongly emphasized text.  While it is often rendered identical to <B>, using <STRONG> rather than <B> is preferred.

<P>It allows the browser to distinguish between <STRONG>strongly emphasized text</STRONG> and other text which must be drawn in <B>boldface</B>.

It allows the browser to distinguish between strongly emphasized text and other text which must be drawn in boldface.

Definition of a Term

<DFN> is used to mark up terms which are used for the first time.  These are often rendered in italics so the user can see this is where the term is used for the first time.

Code Fragments

<CODE> is used for snippets of code which appear inside a paragraph of text.  It is usually rendered in a monospaced font.

The above sentence looks like this in HTML:
<P><CODE>&lt;CODE&gt;</CODE> is used for snippets of code which appear inside a paragraph of text.

Sample Text

<SAMP> is used to indicate a sample of text which should be used literally.

<P>The text <SAMP>General Protection Fault</SAMP> is well known to Windows users.

The text General Protection Fault is well known to Windows users.

KBD

<KBD>  is used for text to be typed by the user.  It is usually rendered in a monospaced font.

Variable

<VAR> is used to mark up variables, for example in discussions of computer programs.  Using this tag allows programs to automatically generate lists of the used variables.

<P>The variable <VAR>c</VAR> is used as a counter in this program.

The variable c is used as a counter in this program.

Short Citations

The <CITE> element indicates that the text enclosed is cited from some reference.  It could be rendered with smart quotes, but usually browsers use italics.

<P><CITE>It could be rendered with smart quotes, but usually browsers use italics.</CITE> is cited from the above paragraph.

It could be rendered with smart quotes, but usually browsers use italics. is cited from the above paragraph.

Learning HTML 3.2: Physical Text Markup

TeleType Font

The <TT> tag specifies that the enclosed text should be rendered in a TeleType (monospaced) font.  You should use <CODE>, <SAMP> or <KBD> instead as these tags allow the browser to pick a suitable rendering for each specific case, instead of the generic rendering you get with <TT>.

<P><TT>This is a sample of Typewriter Text.</TT>

This is a sample of Typewriter Text.

Bold, Italics, Underline

<B> is used to indicate that the enclosed text must be rendered in a bold typeface.  <I> is used to indicate that the enclosed text must be rendered in an italic (slanted) typeface.  <U> is used to indicate the enclosed text should be underlined.  As most browsers use underlining to indicate hyperlinks, try to avoid this tag.  It can confuse users if they see "hyperlinks" that do not work.

<P><B>This is the bold tag</B>

This is the bold tag.

<P><I>Care for italics?</I>

Care for italics?

<P><U>Underlined, please.</U>

Underlined, please.

Strike-through Text

The <STRIKE> tag specifies that the enclosed text should be rendered with a strike-through appearance.  Usually this is done with a line through the middle of the text though support for this is not universal.

<P><STRIKE>This is a sample of Strike-through Text.</STRIKE>

This is a sample of Strike-through Text.

Bigger, Smaller Text

The browser should draw the text in a larger font for <BIG> and a smaller font for <SMALL>.  Support for this tag is not universal.  Note: Use <FONT SIZE="+1"> for <BIG> and <FONT SIZE="-1"> for <SMALL> for future compatibility.

<P><BIG>This text</BIG> is bigger than <SMALL>this text.</SMALL>

This text is bigger than this text.

SubScript and SuperScript

<SUB> specifies that the text should be rendered in subscript, with the enclosed text slightly lower than the surrounding text.  <SUP> specifies that the text should be rendered in superscript, with the enclosed text slightly higher than the surrounding text.

<P>This is Super<SUP>Script</SUP> and this is Sub<SUB>Script</SUB>.

This is Super^Script and this is Sub_Script.

Learning HTML 3.2: Other Text Markup

Font Appearance

The <FONT> tag can be used to change the appearance of the text, in terms of size and color.  The SIZE attribute can either take an absolute value, ranging from 1 (smallest) to 7 (largest), or a value relative to the current font size ("-1", "+2").

<P><FONT SIZE="+1">This text</FONT> is bigger than <FONT SIZE="-1">this text.</FONT>

This text is bigger than this text.

The COLOR attribute takes a hex value, which is the RGB-notation of the desired color.  See the BODY tag for a more complete explanation on how to specify colors.

The first sentence above looks like this in HTML:

<P>The <CODE><FONT COLOR=red>COLOR</FONT></CODE> attribute takes a hex value, which is the RGB-notation of the desired color.

Forced Line Break

The <BR> tag is used to force line breaks within text.  There is no closing tag.  Normally, line breaks are treated as a space by browsers (except inside the <PRE> tag).

<P>The text will break<BR>right here.

The text will break
right here.

The optional CLEAR attribute is used when an image tag is present in the text.  If that image uses ALIGN=LEFT or ALIGN=RIGHT, the text will flow around it.  If text should be displayed below the image, this can be accomplished with <BR CLEAR=LEFT> or <BR CLEAR=RIGHT> to force scrolling down to a clear left or right margin, respectively.  Using <BR CLEAR=ALL> will scroll down until both margins are clear.  <BR CLEAR=NONE> is the default, and does nothing.

Comments

An HTML comment begins with "<!-- " , ends with " -->" (notice the spaces) and does not contain "--" or ">" anywhere in the comment.

<P>This <!-- comment --> will not be displayed.

This will not be displayed.