HTML Quick Reference

The HyperText Markup Language (HTML) is composed of a set of elements that define a document and guide its display. This document presents a concise reference guide to HTML, listing the most commonly used elements from Versions 1 and 2 of HTML, and giving a brief description of those elements.

Users should be aware that HTML is an evolving language, and different World-Wide Web browsers may recognize slightly different sets of HTML elements. For general information about HTML including plans for new versions, see http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html. For a comprehensive list of HTML elements see http://www.sandia.gov/sci_compute/html_ref.html

This document is a condensed version of the orginal document HTML Quick Reference (2|14|95) that is owned by Academic Computing Services, University of Kansas

An HTML element may include a name, some attributes and some text or hypertext, and will appear in an HTML document as

<tag_name> text </tag_name>
<tag_name attribute_name=argument> text </tag_name>, or just
<tag_name>
For example:
<title> My Useful Document </title>
and
<a href="argument"> text </a>
An HTML document is composed of a single element:
<html> . . . </html>
that is, in turn, composed of head and body elements:
<head> . . . </head>
and
<body> . . . </body>
To allow older HTML documents to remain readable, <html>, <head>, and <body> are actually optional within HTML documents.

The Minimal HTML Document

Required elements are shown in this sample bare-bones document: 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
    <html>
    <head>
    <TITLE>A Simple HTML Example</TITLE>
    </head>
    <body>
    <H1>HTML is Easy To Learn</H1>
    <P>Welcome to the world of HTML. 
    This is the first paragraph. While short it is 
    still a paragraph!</P>
    <P>And this is the second paragraph.</P>
    </body>
    </html>

Elements usually placed in the head element

<title> . . . </title>
Specify a document title. Note that the title will not appear on the document as is customary on printed documents. It will usually appear in a window bar identifying the contents of the window. HTML header tags perform the functions usually reserved for titles.

Elements usually placed in the body element

The following sections describe elements that can be used in the body of the document.

Text Elements

<p>
The end of a paragraph that will be formatted before it is displayed on the screen.
<pre> . . . </pre>
Identifies text that has already been formatted (preformatted) by some other system and must be displayed as is. Preformatted text may include embedded tags, but not all tag types are permitted.
<blockquote> . . . </blockquote>
Include a section of text quoted from some other source.

Headers

<h1> . . . </h1> Most prominent header

H1
<h2> . . . </h2>

H2
<h3> . . . </h3>

H3
<h4> . . . </h4>

H4
<h5> . . . </h5>
H5
<h6> . . . </h6> Least prominent header
H6
Normal

Logical Styles

<em> . . . </em> Emphasis
<strong> . . . </strong> Stronger emphasis
<cite> . . . </cite> Display a citation
<center> . . . </center> Centers on screen

Physical Styles

<b> . . . </b> Boldface
<i> . . . </i> Italics
<u> . . . </u> Underline
<tt> . . . </tt> Typewriter font
<font size="+1"> . . . </font> Increase font size by 1
<font size="-1"> . . . </font> Decrease font size by 1

Definition list/glossary: <dl>

<dl>
<dt> First term to be defined
<dd> Definition of first term
<dt> Next term to be defined
<dd> Next definition
</dl>
The <dl> attribute compact can be used to generate a definition list requiring less space.

This HTML
    <DL>
    <DT> NCSA
    <DD> NCSA, the National Center for Supercomputing Applications,
         is located on the campus of the University of Illinois 
         at Urbana-Champaign. 
    <DT> Cornell Theory Center
    <DD> CTC is located on the campus of Cornell University in Ithaca,
         New York. 
    </DL>
Produces this
NCSA
NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign.
Cornell Theory Center
CTC is located on the campus of Cornell University in Ithaca, New York.

Present an unnumbered (unordered) list: <ul>

<ul>
<li> First item in the list
<li> Next item in the list
</ul>

This HTMLProduces this
  <UL>  
  <LI> apples  
  <LI> bananas  
  <LI> grapefruit  
  </UL>
  • apples
  • bananas
  • grapefruit

Present a numbered (ordered) list: <ol>

<ol>
<li> First item in the list
<li> Next item in the list
</ol>

This HTMLProduces this
  <OL>  
  <LI> oranges  
  <LI> peaches  
  <LI> grapes  
  </OL>
  1. oranges
  2. peaches
  3. grapes

Hyperlinks or Anchors

<a name="anchor_name"> . . . </a>
Define a target location in a document
<a href="#anchor_name"> . . . </a>
Link to a location in the base document, which is the document containing the anchor tag itself, unless a base tag has been specified.
<a href="URL"> . . . </a>
Link to another file or resource
<a href="URL#anchor_name"> . . . </a>
Link to a target location in another document
An anchor must include a name or href attribute, and may include both. There are several optional attributes, but they are rarely encountered.

The structure of a Uniform Resource Locator (URL) may be expressed as:

resource_type:additional_information
where the possible resource types include: file, http, news, gopher, telnet, ftp, and wais, among others, and each resource type relates to a specific server type. Since each server performs a unique function, each resource type requires different additional_information. For example http and gopher URLs will have a structure like:
resource_type://host.domain:port/pathname
The colon followed by an integer TCP port number is optional, and is used when a server is listening on a non-standard port.

A more complete description of URLs is presented in http://www.w3.org/hypertext/WWW/Addressing/Addressing.html

Inline Images

Most Web browsers can display inline images (that is, images next to text) that are in X Bitmap (XBM), GIF, or JPEG format. Other image formats are being incorporated into Web browsers [e.g., the Portable Network Graphic (PNG) format]. Each image takes time to process and slows down the initial display of a document. Carefully select your images and the number of images in a document.

To include an inline image, enter: 

    <IMG SRC=ImageName>

where ImageName is the URL of the image file.

The syntax for <IMG SRC> URLs is identical to that used in an anchor HREF. If the image file is a GIF file, then the filename part of ImageName must end with .gif. Filenames of X Bitmap images must end with .xbm; JPEG image files must end with .jpg or .jpeg; and Portable Network Graphic files must end with .png.

Aligning Images

You have some flexibility when displaying images. You can have images separated from text and aligned to the left or right or centered. Or you can have an image aligned with text. Try several possibilities to see how your information looks best.

Aligning Text with an Image
By default the bottom of an image is aligned with the following text, as shown in this paragraph. You can align images to the top or center of a paragraph using the ALIGN= attributes TOP and CENTER.

This text is aligned with the top of the image (<IMG SRC = "BarHot.GIF" ALIGN=TOP>). Notice how the browser aligns only one line and then jumps to the bottom of the image for the rest of the text.

And this text is centered on the image (<IMG SRC = "BarHot.GIF" ALIGN=CENTER>). Again, only one line of text is centered; the rest is below the image.

Images without Text
To display an image without any associated text (e.g., your organization's logo), make it a separate paragraph. Use the paragraph ALIGN= attribute to center the image or adjust it to the right side of the window as shown below: 

<p ALIGN=CENTER>
<IMG SRC = "BarHot.GIF">
</p>
which results in:

The image is centered; this paragraph starts below it and left justified.

Entities

&keyword;
Display a particular character identified by a special keyword. For example the entity &amp; specifies the ampersand ( & ), and the entity &lt; specifies the less than ( < ) character. Note that the semicolon following the keyword is required, and the keyword must be one from the lists presented in:
http://www.w3.org/pub/WWW/MarkUp/html-spec/html-spec_9.html#SEC9.7
&#ascii_equivalent;
Use a character literally. Again note that the semicolon following the ASCII numeric value is required.

Additional Information

For a tutorial introduction to HTML see: http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html.

For an introduction to forms within HTML see: An Instantaneous Introduction to CGI Scripts and HTML Forms.

For general information about HTML, see http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html

[ Return to Schedule ]