Formatting and Phrase Elements
Article ID: KB101455
I, EM
If you want text to be italicized, use the I element. But you
can also emphasize a word using the EM element, and most browsers
will display that text as italicized as well. What's the difference?
This goes back to the previous article about content vs. layout. The I
element is a formatting element, but tells the browser or program
nothing about why that word or phrase is italicized. The EM element, on
the other hand, shows that this word should be emphasized and actually
adds more meaning! (This type of element is called a phrase
element.)
B, STRONG
The same thing goes for making text bold. The B element renders
text as bold, and the STRONG element is also usually rendered as bold
text, but shows that the text should be strongly emphasized.
U
The U element renders underlined text. We strongly discourage
the use of this element, because most people associate underlined text with
hyperlinks.
back to top
TT, CODE, SAMP, KBD, VAR
The TT element renders "teletype" text or monotype text,
usually rendered as something like "Courier" on most systems (like this).
TT is a formatting element. More useful phrase elements are CODE,
which can be used to show a fragment of computer code; SAMP, which
can be used to show sample output from a program or script; KBD,
which should be used to show text that should be entered by the user on the
keyboard; and VAR, which can be used to designate a variable
or program argument.
SUB, SUP
The SUB and SUP elements allow you to mark subscript and
superscript text.
INS, DEL
The INS and DEL elements can help to show what parts of a
document have been newly inserted or deleted with respect to a
different version of the document. Most browsers will show DEL elements
with a strikethrough and INS elements underlined, but you can easily
control this with stylesheets. Both of them have two optional attributes:
| INS, DEL - attributes |
cite
="[url]" |
The "cite" attribute should
point to a page that has information on why the document was modified in
this way. |
datetime
="1990-10-13T03:28:25Z" |
The "datetime" attribute is
meant to show what time the document was modified. The date format is as
follows:
YYYY-MM-DDThh:mm:ssTZD
YYYY = four-digit year
MM = two-digit month (01=January, etc.)
DD = two-digit day of month (01 through 31)
hh = two digits of hour (00 through 23) (am/pm NOT allowed)
mm = two digits of minute (00 through 59)
ss = two digits of second (00 through 59)
TZD = time zone designator ("Z" means Coordinated Universal Time) |
back to top
ABBR, ACRONYM
ABBR can be used to show that the element is an abbreviated form
of a word - for example, "WWW," "HTTP," "Ca." etc. ACRONYM can be used to
show that the element is an acronym - for example, "RADAR," "NASA," etc.
You can use the title and lang attributes to show
what language the abbreviation or acronym is using as well as what the full
expression is. See our examples below.
Q, BLOCKQUOTE
The Q and BLOCKQUOTE elements are meant to be used for marking
quotations - Q for "inline" quotes, and BLOCKQUOTE for a separate,
longer citation. But this is one area where layout has, in a sense, overridden
the content issue. Because many browsers render BLOCKQUOTE elements as
indented text, many people have used BLOCKQUOTE to get indented margins -
whether or not the text is really a quote or not! Furthermore, Q should
theoretically be rendered by browsers as having quotation marks, but you'll find
that Internet Explorer for Windows doesn't do anything differently with Q
elements, although almost every other browser does!
What's a web designer to do? First, start with using the BLOCKQUOTE
element correctly -- ONLY for quotations! Second, use the Q element, and
use style sheets to define quotations as italics until IE for Windows catches
up.
Both the Q and BLOCKQUOTE elements have the cite
attribute.
| Q, BLOCKQUOTE - attributes |
cite
="[url]" |
The "cite" attribute should
point to a page where the quote was taken from. |
CITE, ADDRESS, DFN
The CITE element may be used for showing the source of a quote or
citation. The ADDRESS element can be used to mark a street address.
The DFN element can be used to mark that a particular word is a
definition term. Most browsers italicize these three elements (you can
control this through style sheets to have them display any way you want).
back to top
BDO
For some languages, text is read from right-to-left. The BDO element
allows you to change the text direction. The dir attribute can be
set to "rtl" (right-to-left). The default for the dir attribute is
"ltr."
PRE
Preformatted text can be displayed using the PRE tags. Most
browsers will display the text in some kind of monotype font (like Courier),
preserving all spaces, line breaks, etc. as-is. See below for an example.
FONT
The FONT tag can be used to specify font face, font size, and font
color of text. We are not going to talk at length about this tag because it is
deprecated - almost everything can be done using style sheets, but here's a
table of its attributes:
| FONT* - attributes |
size
="1"
="2"
...
="7"
="+1"
...
="-1" |
The "size" attribute sets the
size of the font. You can set the size to a value between 1 and 7, with
1 being the smallest and 7 being the largest. Different browsers often
display the size differently. |
color
="[colorcode]" |
The "color" attribute can be
set to a hexadecimal color code value or a color name. |
face
="[fontnames]" |
The "face" attribute can be
set to a list of font names, with the first one being the preferred
font. Note that if a system does not have a listed font, the browser
will use the browser's default font. |
Putting it all together...
Here's a sample page using this code below:
<p>
Here is <em>emphasized</em> text, side-by-side with <i>italicized</i> text.<br>
Here is <strong>strong</strong> text, side-by-side with <b>bolded</b> text.<br>
<u>Underlined text</u> looks too much like a hyperlink.</p>
<p>
You can use <tt>teletype</tt> tags (<tt>) to format code-like text, but
better HTML coding would involve using the <code>code</code>,
<kbd>keyboard</kbd>, <samp>sample</samp>, or <var>variable</var> elements.</p>
<p>Write fancy math equations using the <strong>sub</strong> and
<strong>sup</strong> elements, like this:<br>
e=mc<sup>2</sup>
</p>
<p>When working on a new version of page, show what you've <del>deleted</del>
<ins>removed</ins> and what you've inserted.</p>
<p>Use the <strong>ABBR</strong> tag to show abbreviations - for example, <abbr
title="PixelMill" lang="en">PM</abbr>.</p>
<p>Unfortunately, the <q>q</q> element does not typically get displayed with
quotation marks around it in Internet Explorer for Windows, although it is
displayed with quotation marks in IE for Mac, Opera, Netscape, and Mozilla.</p>
<blockquote>However, the <strong>blockquote</strong> element does get displayed
indented to the rest of the text. Don't use this as a way to indent just
anything, however!</blockquote>
<p>Example <cite>citation</cite> and <dfn>definition</dfn>.</p>
<addr>Addresses get put on their own line.</addr>
<p><bdo dir="rtl">Backwards text!</bdo></p>
<pre>Preformatted text:
You can write poetry
and format all your lines
as you want them displayed.
</pre>
<p><font size="5">Font size = 5</font> <font size="3" color="#ff0000">Font size
= 3 and color = #ff0000</font></p>
See live example!
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1065/kb101455.htm
permalink to this article:
http://www.pixelmill.com/support/kb101455.htm
Back to top