Reduced Instruction Set HTML
(a guide to the essential HTML tags)
Copyright 1997-2006, Jim Anderson - Updated: August 5, 2006
The symbol will bring you back to the top of the page.
The 80-20 rule states that 80% of anything is accomplished
using 20% of something else. This may or may not be true anywhere else, but it is certainly true of HTML. A complete list of HTML tags contains many obscure or obsolete tags, and some tags that were never supported in popular browsers. However, most of the work of putting the majority of the information on a web page is accomplished using an astonishingly small number of tags. This document is a brief compendium of what I consider to be the essential (or as I put it, the Reduced Instruction Set) HTML.
The Big Containers
<HTML></HTML>
This tag is the super container. Your entire document goes inside these
tags.
<HEAD></HEAD>
This tag normally contains only the <TITLE></TITLE> tag
<TITLE></TITLE>
This tag contains the title of the document (not its filename) and should accurately reflect its content.
<BODY></BODY>
All the displayed text and graphics content go inside this tag. The
<BODY> tag can take several attributes (or arguments), among
them:
-
The TEXT=#NNNNNN attribute, where NNNNNN is a six digit hexadecimal
number, specifying the Red (2 digits), Green (2 digits), Blue (2 digits)
components of the default color of the page text.
-
The BGCOLOR=#FFFFFF attribute defines a background color for
the page, in this case, the color white. The background color needs to stand in high contrast to the foreground text. If the background is light, the text should be a dark color and perhaps bold as well.
-
If you do not specify a BGCOLOR the default color Internet Explorer
uses (if the user does not change it in the browser options) is white, whereas older versions of Netscape use gray.
If you do not specify a TEXT color, the default color is black. Click the link below
to reload the page with no BODY attributes specified.
This page uses <BODY> tag with no attributes.
-
The BACKGROUND="somefile.gif" attribute automatically
tiles a graphic (either a gif or jpg file) to fill in the background. One must be careful in the use of this attribute, because it can too easily make a page unreadable. The background should not obscure the text. A background graphic needs to stand in high contrast to the foreground text. If the background is light, the text should be a dark color and perhaps bold as well. Dark backgrounds should only be used rarely as they are more troublesome to implement. If a dark background is used, of course the text must be light - white, yellow or perhaps a bright cyan. The BGCOLOR setting should match the background graphic in color and tone, approximately. In general the background should not overwhelm or distract from the information on the page. To see what a low-key textured background image might look like with this page click the link below.
This page using a <BODY TEXT=#003366
BACKGROUND="/gifs/chalk.jpg"> tag.
- To see what this page would look like with the BGCOLOR set to FFFBEC (beige) and TEXT color set to dark blue (003366) click the link below.
<BODY TEXT=#003366 BGCOLOR=#FFFBEC >
Paragraph and Line Formatting
The <P> tag
You can break up paragraphs using the <P> tag. It inserts a blank
after itself like the one following this short paragraph. Multiple contiguous
<P> tags condense to a single <P>.
The <BR> tag
You can end a line using the <BR> tag
as you see breaking the paragraph into two lines.
The <CENTER></CENTER> tag
This text is centered using the <CENTER></CENTER> tag, it automatically wraps long lines and still centers the text. And, incidentally, issues a line break both and after the text it surrounds.
The <BLOCKQUOTE></BLOCKQUOTE> tag
You can indent text from both margins in the way quoted is often done in printed material using the <BLOCKQUOTE></BLOCKQUOTE> tag. Even if you are not quoting anyone, this tag is handy for making text more readable by reducing the length of the line the eye has to scan.
Compare the previous paragraph with the next, now surrounded with <BLOCKQUOTE></BLOCKQUOTE>.
You can indent text from both margins in the way quoted is often done in printed material using the <BLOCKQUOTE></BLOCKQUOTE> tag. Even if you are not quoting anyone, this tag is handy for making text more readable by reducing the length of the line the eye has to scan.
Note that <BLOCKQUOTE> also has the effect of issuing a paragraph break both before and after the BLOCKQUOTEd text.
The <UL></UL> tag
The <UL> tag can be used to indent text and graphics from the left margin. This tag normally is used to create an unordered (bulleted) list. However, it can be used to just indent if the bullet tag (<LI>) is omitted, as this paragraph illustrates. Also, it automatically inserts paragraph breaks before and after the text indented.
Font size
Two common methods of changing font size are the heading tags and the SIZE
attribute of the FONT tag.
The tags <H1></H1> through <H6></H6> format
text in progressively smaller sizes. (All the section titles in this document
are formatted with the <H2></H2> tag)
This text is <H1>
This text is <H2>
This text is <H3>
This text is <H4>
This text is <H5>
This text is <H6>
Note: these tags automatically issue a paragraph break.
The SIZE attribute of the FONT tag can be used to control the size
of text.
Not all browsers currently support this tag, but the most popular ones,
Netscape & MS Internet Explorer do. The syntax is <FONT SIZE=+N>
or <FONT SIZE=-N> or <FONT SIZE=N> where N is a small integer
- generally 1, 2 or 3. The + and - indicated a relative sizing based on
the size of the base font. Of course this tag is a container requiring
a </FONT>, and SIZE and COLOR attributes can be in the same tag.
This text is <FONT SIZE=+1>
This text is <FONT SIZE=+2 COLOR=#9933CC>
This text is <FONT SIZE=+3>
This text is <FONT SIZE=-1>
This text is <FONT SIZE=-2>
This text is <FONT SIZE=-3> (note that -3 is the same
as -2)
This text is <FONT SIZE=1>
This text is <FONT SIZE=2>
This text is <FONT SIZE=3>
Note: these tags DO NOT automatically issue a paragraph break.
Character Formatting/Fonts
This text is made bold with the <B></B> tag.
This text is italicized with the <I></I> tag.
Changing the color of particular text with the <FONT COLOR=#NNNNNN></FONT>
This text is red.
This text is green.
This text is blue.
Bold and italic can be combined with co
lo r.
The FACE attribute of the <FONT> tag
Fonts may be changed with the <FONT FACE="Arial">Some text in Arial font</FONT> tag.
- It may be combined with the other attributes of the <FONT> tag to produce something like this.
-
This text is produced using <FONT FACE="Arial,Helvetica" SIZE=-1 COLOR=#006699>. Note that size -1 Arial still looks only slightly smaller than Times New Roman does at normal size.
- This text is produced using <FONT FACE="Arial,Helvetica" COLOR=#990000>. Note how much bigger normal Arial looks compared to normal Times.
The use of different fonts can be refreshing change from boring old Times. However, we must realize why we see Times (and its variants) so much of the time. Fonts with serifs, the little devices on the end of the character strokes, make the text more readable, especially when a lot of text is involved. The serifs give the eye hints as to character identification - hints we picked up since our earliest years in school. Sans serif fonts (sans is French for 'without', hence, without serifs) like Arial are best reserved for headings and small amounts of text that the eye does not have to linger over, as it is on all the headings in this document.
This tag is one that should be used with restraint. First of all, the FACE attribute is relatively new, only since version 3 of Microsoft Internet Explorer and Netscape has this attribute been supported! More importantly, if the user doesn't have the font installed in their system it can mean you get some inconsistently sized text as the font sizes are determined by
which font is used as well as by the specified size of the font itself, as the foregoing examples illustrate. For fonts not matched on the user's system the browser picks the default proportional font (normally Times New Roman in Windows) - sometimes an unfortunate substitution. Arial is a safe choice, because almost all Windows users will have it installed. However, note how in the examples above I have given two fonts so that the browser will search the user's system for the second if the first is not found. In this case I have supplied the Macintosh Helvetica font as an alternative to Arial, the Mac version of Arial if you will (even though Helvetica was invented first!). This specification of alternates is necessary if you want Mac users to see what you want them to see.
Preserving existing formatting
The text on these four lines are inside the <PRE></PRE> tags.
On this line multiple spaces and tabs are respected.
Note that the font inside the <PRE></PRE> tags is a fixed width font (normally Courier New)
(defined by the the browser software).
This text has the same embedded spaces and tabs, but is outside the <PRE></PRE>
tags so the multiple spaces and tabs are condensed to a single space. It
uses a proportional font - Times Roman by default in NS.
The <PRE> tag is most often used for documents or parts of documents where the re-formatting in HTML would be tedious or difficult. Here are links to two documents that use the <PRE> tag for these reasons (these links will open in a new browser window):
Comments
You may "comment out" any range of text with the <!-- stuff
to comment out --> tag as in the following:
You do not see anything on the
line above but it contains this code:
<!-- This is text that has commented out -->
The <HR> tag
This tag draws a horizontal line across the screen.
It takes the optional attributes:
NOSHADE (for a solid, rather than a 3D line),
SIZE=NN (where NN is the number of pixels high),
WIDTH=NN (where NN is the number of pixels wide) or,
WIDTH=NN% (where NN% is the percentage of the total screen width),
ALIGN=left|right|center (the default alignment is center).
Here are some examples:
<HR> alone
<HR NOSHADE>
<HR SIZE=10>
<HR WIDTH=50>
<HR WIDTH=50%>
<HR WIDTH=50% ALIGN=LEFT>
Unordered, Ordered, and Definition Lists
The Unordered List:
The Unordered List starts with <UL> and ends with </UL>.
Anything inside the <UL> gets indented, but doesn't take a bullet, unless preceded by a <LI> tag as this line illustrates.
-
Any text preceded by <LI> within the <UL> gets a bullet. Therefore, the Unordered List would perhaps have been better named the Bullet List
-
Technically each <LI> should be terminated by a </LI>,
but it is not necessary as the next <LI> will terminate the previous
one.
-
Netscape supports the TYPE=DISC|CIRCLE|SQUARE attribute (the default
bullet is DISC), either for the whole list, in which case, it is put in
the <UL> tag or
-
for a single line, in case <LI TYPE=SQUARE> as this line illustrates
You can have lists inside lists, this is <UL TYPE=CIRCLE>
with two lines <LI>.
-
The only thing you have to remember is the terminate each <UL>
with a </UL>.
-
Of course, you can nest different types of lists inside one another
also, as we shall see.
The Ordered List
Ordered Lists start with <OL> and end with </OL>.
Anything inside the <OL> gets indented, but is not numbered unless preceded by a <LI> tag as this line illustrates.
-
Any text preceded by <LI> within the <OL> gets a number
in sequence. Therefore, the Ordered List would have perhaps been better named the Numbered List:
-
So this is line 2.
-
Netscape supports the following TYPE attribute options for <OL> either for the whole list, as in the nested list below,
This is a nested <OL TYPE=i> list.
-
TYPE=1 (the default)- means 1, 2, 3, etc.
-
TYPE=A - means A, B, C, etc.
-
TYPE=a - means a, b, c, etc.
-
TYPE=I - means I, II, III, etc.
-
TYPE=i - means i, ii, iii, etc.
-
for a single line, in case <LI TYPE=A> as this line illustrates.
The Definition List
Definition Lists start with <DL> and end with </DL>.
- <DT>
- <DT> normally contains no more than one line - generally a term to be defined.
- <DD>
- <DD> is used for the definition of the item and it indents the text under the item defined as this paragraph illustrates. The Definition List is well named - it reminds one of a list of definitions.
-
Technically each <DT> should be terminated by a </DT>,
and each <DD> should be terminated by a </DD>, but it is not necessary as the next <DT> or <DD> will terminate
the previous tag.
Lines inside the <DL> </DL> pair that are not preceded by either <DT> or <DD> are treated as part of the previous term or definition.
Here are two links with commentary separated using linebreaks (<BR>):
Sizzling HTML
A comprehensive guide to writing web sites, including all the HTML tags including Netscape and Internet Explorer extensions, tutorials on frames, style sheets, forms, tables, imagemaps, use of color, adding counters and automatic revision dates, special characters and back buttons, and more
Introduction to HTML
Also an Intermediate tutorial is located here
Here are the same lines formatted as a definition list:
- Sizzling HTML
- A comprehensive guide to writing web sites, including all the HTML tags including Netscape and Internet Explorer extensions, tutorials on frames, style sheets, forms, tables, imagemaps, use of color, adding counters and automatic revision dates, special characters and back buttons, and more
- Introduction to HTML
- Also an Intermediate tutorial is located here
The following example contains all three major list types:
Some Rules of Thumb for Web Page Design:
-
The first page (home page) window, which I call the "magic window", should be as self-contained as possible, i.e., should express the purpose and content of the site without requiring scrolling, and where feasible, present a clearly organized map of the site, or at least link to such.
-
Optimize the size of your page (including the graphics) for a max download
time of 20 seconds or so when using a 28K modem.
-
The appearance of the page should reflect the page's purpose.
For instance, the Internet
Resource page
-
is basically an organized list of hypertext links. Therefore a lot
of gratuitous text is counter-productive. The graphics aid navigation to
the browser's real destination - sites containing content. (As a matter
of fact every graphic is a link.)
-
Other pages, like this document (Reduced Instruction
Set HTML),
-
will be mostly text with graphics serving to illustrate or perhaps
navigate.
-
In general, graphics that don't serve a purpose, especially animated
gifs and graphics larger than about 30K, are undesirable.
The doctrine of Ockham's razor** applied to web page design might read thus:
"If an element does not serve a function, it has no business in a page."
**Ockham's razor: Frustra fit perplura, quod fieri per pauciora.
(It is vain to do with more what can be done with less.)
Tables
Tables are absolutely essential to the "modern" web page. They
can be used to control the overall page layout, to list items in a pleasing
and readable way and to display text and graphics, and, of course, links.
Tables are built from four basic tags and an optional caption:
-
<TABLE></TABLE>
-
This tag surrounds the entire table. By default tables have no borders.
-
You can control the outside border size with the BORDER=NN attribute.
-
The CELLPADDING=NN attribute (optional) specifies the number of pixels
space between the cell's contents and the cell "wall".
-
<TR></TR>
-
This tag surrounds all the items in a row.
-
<TD></TD>
-
This tag is used to specify a data cell in a particular row of a table.
-
The COLSPAN=N attribute, where N is the number of columns, can be used
to span columns.
-
The ROWSPAN=N attribute, where N is the number of rows, can be used
to span rows.
-
<TH></TH>
-
This tag is used to specify a header cell in the table.
-
It can be used for any cell in the table.
-
It automatically centers and bold faces the text in the cell.
-
<CAPTION></CAPTION>
-
The <CAPTION></CAPTION> can be used inside the <TABLE></TABLE>
tags to specify a caption for the table.
-
The ALIGN=top|bottom attribute of <CAPTION> specifies its location.
The following code produces the table below the line:
<CENTER>
<TABLE BORDER=3 CELLPADDING=5 >
<CAPTION ALIGN=BOTTOM>This is a sample table</CAPTION>
<TR>
<TH COLSPAN=3 BGCOLOR=#COCOCO>Popular Web Sites</TH>
</TR>
<TR>
<TD rowspan=3 align=center><A HREF="http://www.microsoft.com">
<img alt="Pic of Bill G." src="/gifs/bill2.jpg" height=80 width=80 hspace=5>
<BR>Bill Gates Himself</A></TD>
<TD ALIGN=CENTER>Site</TD><TD ALIGN=CENTER>Web Address</TD>
</TR>
<TR>
<TD>Microsoft</TD><TD>
<A HREF="http://www.microsoft.com">http://www.microsoft.com</a></TD>
</TR>
<TR>
<TD>CNN</TD>
<TD><A HREF="http://www.cnn.com">http://www.cnn.com</a></TD>
</TR>
</TABLE>
</CENTER>
Graphical Anchors (Links)
In the table above the image of our Hero is a graphic anchor (or link)
to www.microsoft.com.
If you do not specify a BORDER=0 attribute in the <IMG> tag, the
graphic will have a colored pixel border.
Here is the code that makes it so:
<A HREF="http://www.microsoft.com">
<img alt="Pic of Bill G." src="/gifs/bill2.jpg" height=80 width=80 hspace=5>
<BR>Bill Gates Himself</A>
Internal Reference Links
-
The <A NAME="label"></A> labels a particular
place in a HTML file.
You may jump to that label in current page using
-
<A HREF="#label">Some Text or Graphic</A>.
-
When the label is not in the current page, you simply preface the #label
with the url or file name, as
-
<A HREF="main.html#label">Some Text or Graphic</A>
or
- <A HREF="http://www.xyz.net/~bobo/main.html#label">Some
Text or Graphic</A>
This mechanism has been used in this document to allow for easy navigation. The symbol in front of each topic heading allows you to jump back to the top of the page.
It can be used, as the following table demonstrates, to build a table
of contents for a single document or multiple pages.