Annotated List of HTML Elements

This document lists all the HTML elements you have to learn. I divide them into basic elements, structural elements, highlighting elements, and miscellanea.

Basic HTML elements

Text and Whitespace

The most important part of HTML is the parts that aren't HTML-- the normal text of the document. The words in your text will be displayed as they are, but the spacing will change; multiple line-breaks, tabs, and duplicate spacing (collectively called "whitespace") will be seen as simply as separation of words.

That is, no matter if two words are separated by a single space, five spaces and a tab, or three linefeeds, eight tabs, and two space; these are all seen as merely a word-break.

However, note that whitespace should be avoied after tags. E.g., this is bad form:

<P> Avant le XVIe siècle, le document écrit

It should be:

<P>Avant le XVIe siècle, le document écrit

This is because the first one, with whitespace after the P element, is often rendered by some browsers as being indented by one tiny single space. In the same way all of the following should be avoided:

<H2> L'orthographe jusqu'au XVIe siècle</H2>

Lorsque je parle du <i>graphème </i> et de <A HREF="#algr"> l'allographe </a>, je...

Entities in Text

Inside normal text, to get <, >, and &, we write &lt;, &gt;, and &amp; These are called entities, and they are also used to insert non-ASCII characters.

To control formatting, we use these HTML elements, below. Use these elements for what they are for, and nothing else.

<P>

Mnemonic: Paragraph separation
<P> is for paragraph breaks where they would not otherwise occur.

It is not for blank lines. Trying to use it for blank lines will work very differently across different browsers; don't do it.

<H1> thru <H6>

Mnemonic: Heading
<H1>text</H1> is for highest-level section heading. This will be rendered very differently on all browsers.

<H2>text</H2> is for second-highest-level section heading, and so on to <H6>text</H6>

These elements are there to reflect that an intelligently written document has an organization like an outline, at least at the level of a given page.

Use an <H2> element only after you've used an <H1> element, as is logical for an outline form.

You can use an ALIGN=center parameter in a heading element, like:
<H2 align=center>Hey, Cookiepuss!</H2>
And on some browsers this will center that heading. On ones that it doesn't center it, it won't hurt anything.

Note: 

     <H1>Part 1</H1>
     The discussion begins with...
In this piece of HTML code, the paragraph starting with "The" won't be rendered on the same line with the heading "Part 1". So no <P> is used, since a paragraph break is already implied in the <H1>

<P> therefore means "a break between pieces of text that would otherwise run together". Don't use it where it's already implied (e.g., right after a section heading or after any structural element)

For more information, see the Strict Guide's section on Paragraph Break Errors.

<A>

Mnemonic: Anchor
The <A> element is what makes hypermedia what it is; it gives us links and anchors. 
     <A HREF="url">text</A>
is how you link make "text" be a link to another resource. E.g.: 
     A <A HREF="me.gif">high-resolution picture</A> of myself is
          available.

I've written a page outlining the format of URLs. I think it's safe to say that most URLs end in .html

Now, to link to a point inside a document (as oppose to the whole document itself), an anchor has to be made at that point. This is done with the NAME parameter: 

     <A NAME="larch">Number 47, the larch</a>
It is usually used with section headings: 
     <H3><A NAME="larch">Number 47: The Larch</a></H3>
You would link to this section by using code like <A HREF="page.html#larch">all about the larch</A> or <A HREF="#larch">all about the larch</A> which you already know becuase you read the docs on the format of URLs.

Structural Elements

The element <UL>

a
Mnemonic: Unnumbered List for UL, List Item for LI
<UL>
     <LI>...
     <LI>...
     <LI>...
     <LI>...
</UL>
For unnumbered lists (with bullets where the numbers would be).

Having a UL inside a UL, i.e.,

E.g., 

     <UL>
     <LI>Part 1
          <UL>
          <LI>Section I.
          <LI>section II.
          </UL>
     <LI>Part 2
     </UL>
makes the bullets turn out differently for each level of LI. Exactly how they come out varies from browser to browser. The second-level list will be indented over farther, as in an outline format.

Note: <LI> can only exist inside of an ordered or unnumbered list.

The element <OL>

Mnemonic: Ordered List for OL, List Item for LI
<OL>
     <LI>...
     <LI>...
     <LI>...
     <LI>...
</OL>
Just like <UL> except that there's numbers instead of bullets.

Note: <LI> can only exist inside of an ordered or unnumbered list.

With Netscape extensions (which won't work well under Lynx), you can create outline formats. (Regrettably, there is no standard way to do this.)

  1. Très important
    1. première chose
    2. deuxième chose
      1. première chinoiserie
      2. et cétera
    3. troisième chose
  2. Et cétera
The above was done with: 
<OL TYPE=I>
<LI>Tr&egrave;s important
	<OL TYPE=a>
	<LI>premi&egrave;re chose
	<LI>deuxi&egrave;re chose
		<OL TYPE=1>
		<LI>premi&egrave;re chinoiserie
		<LI>et c&eacute;tera
		</OL>
	<LI>troisi&egrave;me chose
	</OL>
<LI>Et c&eacute;tera
</OL>

The element <PRE>

Mnemonic: Preformatted
<PRE>... </PRE>
PRE surrounds preformatted text. Spaces, tabs, and linebreaks are rendered by the browser. Preformatting text is the only way in HTML to do columns and ASCII diagrams.

It is also used for "computer listings", e.g., 

huey> w
 10:20am  up  8:13,  168 users,  load average: 10.00, 9.82, 8.64
User     tty           login@  idle   JCPU   PCPU  what
hbact283 ttyrc        10:18am     1                -csh
hfoao039 pty/ttyb0     9:59am     2                email
zxu      pty/ttyb1    10:17am     2                -csh

The element <DL>

Mnemonic: Definition List for DL, Definition Term for DT, and Definition Description for DD 
<DL>
     <DT>term
     <DD>description
     <P>description

     <DT>term [etc]
</DL>

Definition list-- for "glossary" style.

This style is sometimes used just for indenting, although this can have unpredictable results on some browsers, and must be avoided for such a purpose.

However, it is useful for anything (glossaries totally aside) where you are alternating between topic names and topic descriptions and won't want to go as far as using headers. Example:

Name:
Sean M. Burke
Year born:
1972, on a Tuesday.

That's Mayan date 12.17.19.2.1, 1 Imix 4 Mol if you're curious.

Height:
169 cm
Rest Mass:
60 Kg
Favorite quote du jour:
"Foolish people can be taught. We are taught wherever we go, but no one will talk reason. Most frightening of all are the teachers who extract political elements out of the non-political, revolutionizing the very life out of our bodies." --Kong Jieshang, in "The Sleeping Lion", in Chairman Mao Would Not Be Amused
Favorite color:
No.
To paraphrase Leslie Lamport in LaTeX: A Document Preparation System, many problems can be solved by novel but correct applications of existing tags.

Note: <DT> and <DD> can only exist inside of a <DL>

Note: by adding the compact parameter to the <DL> tag, as in <DL compact>, you can produce a more concise listing on some browsers; other browsers will ignore the compact parameter.

The element <BLOCKQUOTE>

<BLOCKQUOTE> ... <P> ... <P> ... </BLOCKQUOTE>
For block-quotes or pull-quotes; usually rendered as indented on both sides; sometimes with a minor font change.

Example:

Chez certains auteurs come Brantome (1540-1614), le redoublement des consonnes atteindra des proportions fligeantes: escrupulle, escandalle. ... (Monnerot-Dumaine, 13)

Highlighting Elements

Highlighting elements, also known as "character styles":
<EM>... </EM>
Emphatic -- usually rendered as italic.
<CITE>... </CITE>
The name of a citation, i.e., book, movie, or journal name. usually rendered with some kind of italics. Namely, Dauzat's Nouveau Dictionnaire étymologique et historique.
<CODE>... </CODE>
use a monospaced "computer" typeface. I use this where it's important to tell the difference beween 0's and O's, l's, 1's, and I's. E.g, sendmail -oi -oem -t -AA081111715
<ADDRESS>... </ADDRESS>
Meant for giving postal and email addresses-- not well implemented under bost browsers so I suggest avoiding it entirely. Instead of this, use lines starting with <BR>s instead for postal addresses, and <CODE>...</CODE> for email addresses.
<B>... </B>
Boldface. Use <EM> instead where possible.
<I>... </I>
Italic. Use <CITE> where you're talking about the title of a book, movie, etc., or use <EM> for emphasis.
<U>... </U>
Underline. Rare, and to be avoided, since some browsers don't implement it. Use <CITE> or <EM> instead, depending on what you mean.

Miscellanea

<BR>

a line break-- this doesn't imply interlinear spacing as <P> will. Use this for line breaks when giving a postal address, or citing lines of poetry, etc. Example:

From the steel rack
I take the jacket; brown, tan and red,
Made from
Navajo
Scraps of Navajo

<IMG SRC="[url]" ALT="text">

Insert an inline image (generally a GIF or JPEG, at least until there is more support for PNG) having the stated URL, or, barring that, rendering it as the text defined in Alt (which must contain only bare ASCII -- i.e., no elements or entities).

And now we have <IMG SRC="yip.gif" ALT="an incomprehensible glyph"> for your viewing enjoyment!

This will come out on a graphical browser with image-loading on as:

And now we have an incomprehensible glyph, for your viewing enjoyment!

and under Lynx or a graphical browser with image-loading off, it'll come out as:

And now we have an incomprehensible glyph, for your viewing enjoyment!

More on <IMG>

This tag has so many options, each warranting special consideration, that that I have written a page on it specifically: The IMG tag. Please read it if you want to make full use of this tag.

<HR>

"Horizontal rule" -- Puts a line across the page!

<!-- a text comment -->

Used for putting comments in the HTML source. The comments are visible only when the source is viewed-- they are never rendered.

The comments must contain no <'s, >'s, or -'s.

Examples of correct usage:

<!-- modification made 04/05/95 by Doug Davis -->
<!-- should we delete the above paragraph? -->
<!-- you'll have to check that URL, OK? -->

For your reference, I've made a sort of "style sheet" which uses all the main HTML codes, and has a sample of what that renders as under Lynx. I suggest hardcopying both (the HTML source, and the rendering of it), as well as hardcopying the document you're looking at now) as "cheat sheets" for future reference.

(BTW, as to the content of the style sheet, it is gibberish (well, a randomly cut & pasted copy of the beginning of the book of Revelations, in Swahili, which is as close to gibberish as anything can come), but then, being a style sheet, this is the one time on the Web where form is more important than content!)

[Back to main page]