University of Botswana History Department

Common HTML tags

HTML Index Page   |   Site Index

On this page you will find an alphabetical list of a number of the most common HTML tags, a note on the <PRE> element, a note on the <Q> element a note on special characters, a note on structural versus formatting elements, and a note on the meaning of "deprecated".

Tag Description
<A> </A> Anchor. See introduction to HTML
<B> </B> Content is shown as bold type
<BIG> </BIG> Content is shown in large type. BIG and SMALL can be nested (thus: <BIG><BIG>nested</BIG></BIG>) to further increase or decrease font size.
<BLOCKQUOTE> </BLOCKQUOTE> Content is shown as an indented block; should be used only for long quotations. See note on <Q> tag.
<BODY> </BODY> The body part of the HTML document. See introductio to HTML
<BR> Force line break within paragraph. Note that "floating elements" such as images are separate from the paragraph. To start next line below any images etc., use <BR CLEAR="all">. The CLEAR attribute can take values "none", "right", "left", or "all" and is deprecated, but in fact still very useful. The best way to understand it is to try a few tests.
<CENTER> </CENTER> Content is centred on page (can include paragraphs etc). Note American spelling.
<DEL> </DEL> Used to indicate a deletion from a previous version of a document. Normally combined with INS (insert) which marks the new version. Rendered in strike-through font like <S>. See note on structural versus formatting elements. Example: insert this delete this.
<DIV> </DIV> A dummy element which contains block-level elements. It is used with style sheets.
<EM> </EM> Emphasis: text usually displayed in italics
<FONT> </FONT> Used to define characteristics of font, according to attributes e.g. SIZE, COLOR, FACE. SIZE sets size, 1-7 e.g. SIZE="5". COLOR sets colour of text e.g. <FONT COLOR="#FF0000"> makes text red. FACE e.g. FACE="Times".
NB: <FONT> is deprecated in favour of style sheets, but remains useful because it is safer with old browsers.
<HEAD> </HEAD> The head part of the HTML document. See introductio to HTML
<H1> </H1>
<H2> </H2>
...
<H6> </H6>
Headings (levels 1-6, i.e. H3 is a subheading within a H2 subheading). See note on structural versus formatting elements.
<HR> Draw horizontal line across page; used to indicate break between sections. Attributes: WIDTH, e.g. WIDTH="50%" makes line half size of page; SIZE, e.g. SIZE="3" makes line 3 pixels thick
<I> </I> Italics.
<IMG> Image. Attributes: must have SRC and ALT. SRC gives source file for image, e.g. SRC="picture.jpg". ALT gives brief description e.g. ALT="Picture of UB"
<INS> </INS> See DEL
<LI> </LI> List item. Used within an ordered (<OL>) or unordered (<UL>) list
<OL> </OL> Ordered list. Includes <LI> List Items, which will be numbered automatically
<P> </P> Paragraph
<PRE> </PRE> Pre-formatted text. See note on <PRE>
<S> </S> Strike-through text: i.e. like this phrase. See DEL
<SMALL> </SMALL> Content appears as smaller-size text
<SPAN> </SPAN> A dummy element which contains in-line content. It is used with style sheets.
<STRONG> </STRONG> Text is emphasised strongly - usually appears in bold.
<SUB> </SUB> Subscript
<SUP> </SUP> Superscript
<TABLE> </TABLE> Table. See page on tables.
<TD> </TD> Table data cell. See page on tables.
<TH> </TH> Table header cell. See page on tables.
<TITLE> </TITLE> Title of document. This must appear in the <HEAD> part.
<TR> </TR> Table row. See ppage on tables.
<TT> </TT> Monospaced type (useful for tables of figures)
<U> </U> Underline text. Use sparingly as it may be confused with hyperlinks
<UL> </UL> Unordered List. Includes <LI> List Items, which will be displayed in a list with bullets.

Back to top

Note on <PRE> </PRE> :

The PRE element is used for pre-formatted text. What this means is that the text between the opening and closing tags is displayed exactly as shown in the HTML file. Normally, any line breaks etc. in the HTML file are ignored when the page is displayed: instead the browser breaks where it finds a <BR>, starts a new paragraph at a <P>, etc. One main use for <PRE> is when you have a large chunk of text in a plain text file which you want to display without having to convert all the paragraphs and tables to HTML formatting. The electronic text pages on this web-site use <PRE> to display entire chapters from the Project Gutenberg plain text etexts.

Example:

Consider the following code:

<P>There was an old man of Peru
Who dreamt he was eating his shoe
    He woke up in the night
    With a terrible fright
And found it was perfectly true</P>

This will appear as follows:

There was an old man of Peru Who dreamt he was eating his shoe He woke up in the night With a terrible fright And found it was perfectly true

The spacing and line breaks in the HTML code are ignored. To get the right result we would normally use formatting tags:

<P>There was an old man of Peru<BR> Who dreamt he was eating his shoe<BR> He woke up in the night<BR> With a terrible fright<BR> And found it was perfectly true</P>

which produces

There was an old man of Peru
Who dreamt he was eating his shoe
He woke up in the night
With a terrible fright
And found it was perfectly true

However, we can use the <PRE> element:
<PRE>There was an old man of Peru
Who dreamt he was eating his shoe
    He woke up in the night
    With a terrible fright
And found it was perfectly true</PRE>

which will produce the following:

There was an old man of Peru
Who dreamt he was eating his shoe
    He woke up in the night
    With a terrible fright
And found it was perfectly true

This can be useful where you already have, for example, tabulated data in a plain text file:

<PRE>
                                             line
There was an old man of Peru                    1
Who dreamt he was eating his shoe               2
    He woke up in the night                     3
    With a terrible fright                      4
And found it was perfectly true                 5
</PRE>

which will produce the following:


                                             line
There was an old man of Peru                    1
Who dreamt he was eating his shoe               2
    He woke up in the night                     3
    With a terrible fright                      4
And found it was perfectly true                 5

whereas without the <PRE> it would have produced

line There was an old man of Peru 1 Who dreamt he was eating his shoe 2 He woke up in the night 3 With a terrible fright 4 And found it was perfectly true 5

<PRE> is thus very useful. However you should not use it as a substitute for HTML formatting when composing pages. Use it for converting existing text documents, or where the exact layout of characters is important (e.g. diagrams) but for ordinary text use the ordinary formatting elements such as <P>, <LI>, etc.


Back to top

Note on the <Q> tag

The <Q> tag is the equivalent of BLOCKQUOTE for short quotations. However, there are problems. Older browsers do not recognize it. In HTML 4 the browser is supposed to add quotation marks: This bit is within <Q/> tags. But in HTML 5 this will change and quotation marks will have to be added by the author. In view of all this you are probably safer avoiding it at present.


Back to top

Note on special characters

Some characters are not available on a standard keyboard. In HTML they can be indicated by special character entities. For example, the e-acute character  é  can be represented by  &eacute;  As you will see from this example, the special character entities start with an ampersand &, and end with a semicolon ;. Between these is a string of letters which usually indicates the character to be shown.

There is also an alternative system of referring to special characters by number but these are less easy to remember. On the other hand it can be more reliable if you are using the less common special characters. An example: the "spades" symbol ♠ can be produced either by &spades; (♠) or by &#9824; (♠).

Note that ampersand itself therefore cannot be written in an HTMl document as just & as that would indicate the start of a special character! Instead you have to use  &amp; . Also, < and > cannot be written as such in an HTMl document, because they indicate HTMl tags. Instead you must use  &lt;  for < and  &gt;  for >. The letters stand for "less than" and "greater than".

NB: these names are case sensitive, i.e.  &eacute;  and  &Eacute;  are different characters.

Some common special characters:

The following is a list of some of the more common special character entities. Not all of them will display in all browsers. If you see, in the right-hand box, not a special character but just a repeat of the code in the left-hand box, your browser has failed to recognize the code.

Character entity Special character
&nbsp; Non-breaking space
&amp; & (ampersand)
&lt; <
&gt; >
&copy; © (copyright symbol)
&reg; ® (Reg. trademark symbol)
&ne; ≠ (not-equals sign; a range of mathematical symbols are available)
&plusmn; ± (plus-minus)
&deg; ° (degree)
&quot; " (Quotation mark)
&ndash; – (n-dash)
&mdash; — (m-dash)
&para; ¶ (paragraph symbol as used in word-processors)
&pound; £ (pound sterling symbol)
&euro; € (Euro currency symbol)
&frac14; ¼ (fraction 1/4)
&frac12; ½ (fraction 1/2)
&frac34; ¾ (fraction 3/4)
&eacute; é
&Eacute; É
&egrave; è
&agrave; à
&ccedil; ç
&ecirc; ê
&acirc; â
&ucirc;; û
&auml; ä
&ouml; ö
&uuml; ü
&scaron; š
&ntilde; ñ
&szlig; ß (the German character, not to be confused with beta (see below)
&beta; β (lower-case Beta; the whole Greek alphabet is accessible like this)

Back to top

Note on structural versus formatting elements

It is important to remember that HTML is basically a way of defining the logical structure of a document, with elements such as paragraphs, lists, etc. There are some formatting elements such as <I> (italics) and until all browsers can read style sheets we will continue to need them.

Confusion sometimes arises as to the use of formatting elements and structural elements which produce the same effect. For example, the <I> formatting element produces italics. But so do the <EM> (emphasis) element and the <CITE> (citation) element. The difference is that the structuring elements define information, which could be rendered in a variety of ways - e.g. non-visual user agents. <I> defines the exact formatting rather than the information. <EM> defines emphasis. <CITE> defines a citation: the official specification defines it specifically as a URI in fact.

There are advantages to using structural elements wherever they are understood by most browsers, but there are still practical limits to this. (Structural elements are most useful for technical things like computer code, which has the <CODE> tag.)
However you must not use a structural element to produce an effect unless the information is of the type described. This problem arises commonly with the heading tags (<H1>, <H2> etc.). Sometimes an author will use an H1 heading, and then find that for the next level of heading, H2 looks too big - so he or she uses H3. The point of the H1 to H6 headings is that they are used and nested in order. If you want to change the apparent size on screen you should use style sheets. (In any case, the appearance in someone else's browser may not be the same as in yours anyway.)

To summarize, therefore:

Choice Assessment Comments
Using a structural element for the appropriate content Meritorious This is a good thing unless the the appropriate element is too new for most browsers and the formatting is essential
Using HTML formatting Normal This is normal in the common case that (i) there is no easy structural element, or (ii) a structural element is too new for most browsers and the formatting is essential
Using a structural element for content of another type, just to get the formatting Bad Hardly ever appropriate

I.e. -


Back to top

The meaning of "deprecated".

The official HTML standards are issued by the W3 Consortium. In the HTML 4.01 Specification, the following definition appears:

A deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements are defined in the reference manual in appropriate locations, but are clearly marked as deprecated. Deprecated elements may become obsolete in future versions of HTML.

User agents should continue to support deprecated elements for reasons of backward compatibility.

The general English sense of the word is that disapproval of something is being expressed.


Back to top

Copyright © 2000 University of Botswana History Department
Last updated 8 June 2008