Reduced Instruction Set HTML
(a guide to the essential HTML tags)
Copyright 1997-2006, Jim Anderson - Updated: August 5, 2006

The up symbol will bring you back to the top of the page.
The Big Containers Paragraph and Line Formatting
Font size Character Formatting/Fonts
Preserving existing formatting Comments
The <HR> tag Lists
Some Rules for Web page design Tables
Graphical Anchors Internal Reference Links
HTML 4.0 Reference

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.
 

up 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:
 

up 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


 

up 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. 

 

up 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

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.

 

up 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):

 

up 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 -->

 

up 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> 


 

up Unordered, Ordered, and Definition Lists

The Unordered List: 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.
  1. 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:
  2. So this is line 2. 
  3. 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.
    1. TYPE=1 (the default)- means 1, 2, 3, etc. 
    2. TYPE=A - means A, B, C, etc. 
    3. TYPE=a - means a, b, c, etc. 
    4. TYPE=I - means I, II, III, etc. 
    5. TYPE=i - means i, ii, iii, etc. 
  4. 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:
 

upSome Rules of Thumb for Web Page Design:

  1. 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.
  2. Optimize the size of your page (including the graphics) for a max download time of 20 seconds or so when using a 28K modem.
  3. The appearance of the page should reflect the page's purpose.
  4. 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. 
  5. In general, graphics that don't serve a purpose, especially animated gifs and graphics larger than about 30K, are undesirable.
  6. 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.)

 

up 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>

Popular Web Sites 
Pic of Bill G. 
Bill Gates Himself 
Site  Web Address 
Microsoft  http://www.microsoft.com 
CNN  http://www.cnn.com 
This is a sample table 
 

up 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>
 

up 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 up 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.
The Big Containers  Paragraph and Line Formatting 
Character Formatting/Fonts  Font size 
Preserving existing formatting  Comments 
The <HR> tag  Tables 
Lists  Graphical Anchors 
Internal Reference Links  Rules for Web page design