Path // www.yourhtmlsource.com ā†’ Text ā†’ TEXT FORMATTING LIST

Text Formatting List

by Ross Shannon

Yep, there sure are a fair few tags you can use to format your text. Many of these tags create similar results, and a few are new in HTML 4, and so you won't see their effect until your browser begins supporting them. You should learn the differences between logical and presentational formatting tags too.

Clock This page was last updated on 2012-08-21


Valid Tags

<abbr>From this</abbr>
You get this
Denotes an abbreviation, use the title attribute to give the full meaning.
[html4] — not yet fully supported
<acronym>From this</acronym>
You get this
Much the same as the one above, really. The difference is between abbreviations and acronyms. And you can look that up yourself.
[html4] — not yet fully supported
<address>From this</address>
You get this
You're supposed to put this around your name, address or email address on your pages. Pff.
<b>From this</b>
You get this
The simple bold tag.
<bdo dir="rtl">From this</bdo>
You get this
If your text is meant to be read right-to-left (like Hebrew, or something), using this tag and the attribute dir="rtl" tells the browser this.
[html4] — not yet fully supported
<big>From this</big>
You get this
A quick way to increase the font size by one.
<blockquote>From this</blockquote>
You get this
Indents the whole block of text in from both sides and adds line-breaks top and bottom. Use for long quotations.
<cite>From this</cite>
You get this
Shows a citation (the title of a work that you're quoting or referencing).
<code>From this</code>
You get this
Sets text off as code, used for examples of source code. Usually rendered as mono-spaced text.
<del>From this</del>
You get this
Stands for deleted text, and visually appears with a strike-through.
[html4]
<dfn>From this</dfn>
You get this
Denotes a definition.
[html4] — not yet fully supported
<div>From this</div>
You get this
Sets a block of your page off on its own. Mainly used with stylesheet commands and to create layers.
[html4]
<em>From this</em>
You get this
Creates emphasis on the selected text.
<h4>From this</h4>

You get this

Creates headings. There are 6 levels of heading, from h1 to h6.
<i>From this</i>
You get this
The basic italic tag.
<ins>From this</ins>
You get this
Stands for inserted text. You are meant to use this in conjunction with the del tag.
[html4]
<kbd>From this</kbd>
You get this
Surrounds text that is supposed to be entered by the reader on their keyboard.
<pre>From this</pre>
You get this
Stands for Preformatted text. If you wrap this around some text, it will follow the form of the text in your code — i.e. no extra formatting needs to be put in. If you have spaced it out in your code, it will appear spaced out on your page.
[html4]
<q>From this</q>
You get this
Used for smaller, inline quotations (as opposed to a blockquote). Adds quotation marks around the text. Cool.
[html4] — not yet fully supported
<samp>From this</samp>
You get this
Stands for sample, and is used when you're using an example, usually of an output from a program.
<small>From this</small>
You get this
Simple tag to drop the font size by one.
<span>From this</span>
You get this
New tag to be used in conjunction with stylesheets. Similar to the div tag, but span only affects the text it is wrapped around, div affects the entire horizontal section.
[html4]
<strong>From this</strong>
You get this
Makes the text bold.
From <sub>this</sub>
You get this
Renders the text in sub-script, below the normal line.
From <sup>this</sup>
You get this
Renders the text in super-script, above the normal line.
<tt>From this</tt>
You get this
Makes the text 'typewriter text', and sets it in a mono-spaced font.
<var>From this</var>
You get this
Used to denote variables in equations.

Deprecated and Dead Tags

Here for completeness, since you may have heard of them, are the troupe of tags that have been deprecated or been rendered defunct by more modern specifications. Don't use any of these tags, there are better ways.

<basefont>
Putting one of these in the <head> of your documents would change the base colour and size that all further font tags are based on. It's been superseded by stylesheets, with their greater text formatting abilities, so don't use it.
[html4] — deprecated
<blink>
Makes the text blink on and off, but only to the delight of Netscape users. Possibly the most maligned tag to ever hit the web.
[Netscape] — extension tag, not in any official specification
<font>
The basic tag for changing text colour, font face and size. Shouldn't be used any more, in favour of CSS text formatting.
[html4] — strongly deprecated
<listing>
An old Netscape-only command that has been thrown out with the arrival of HTML 4.
[DEAD] — use <pre> instead
<multicol>
Sets the text out in multiple columns. Never used much, possibly because it was poorly supported.
[Netscape] — extension tag, not in any official specification
<nobr>
If you wrap these tags around a block of text it will not wrap at the edge of the screen, but will continue on, and you will have to use a horizontal scroll bar.
Note: if you want to allow a line break somewhere in a block of nobr text, add the tag <wbr>. This will not force a break but will tell the browser that one may be added if needed.
[html4] — deprecated, just put your text into a table
<plaintext>
Another tag that has been thrown out in favour of the new pre tag.
[DEAD] — use pre instead
<s>
Creates a strike-through effect. There was also <strike>
[html4] — deprecated, use stylesheets instead
<u>
Simple tag for underlining. Not entirely sure why it was deprecated when <b> and <i> were retained, but underlining is possible with CSS anyway.
[html4] — deprecated
<xmp>
Another dead tag. I assume it stood for example.
[DEAD] — use pre instead