HTML Quick Reference

HTML is composed of a set of elements that define a document and guide its display. 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.

Elements usually placed in the head element

<isindex>
Specify index file
<title> . . . </title>
Specify document title
<nextid>
Set a variable value. Attribute: variable name
<link>
Specify relationships to other documents. Attributes: same as Anchor below
<base>
Specify the name of the file in which the current document is stored. This is useful when link references within the document do not include full pathnames (i.e., are partially qualified).

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.
<listing> . . . </listing>
Example computer listing; embedded tags will be ignored, but embedded tabs will work
<plaintext>
<blockquote> . . . </blockquote>
Include a section of text quoted from some other source.

Hyperlinks or Anchors

<a name="target_anchor_name"> . . . </a>
Define a target location in a document
<a href="#anchor_name"> . . . </a>
Link to a location in the same file
<a href="URL"> . . . </a>
Link to another file
<a href="URL#target_string"> . . . </a>
Link to a target location in another file
<a href="URL?search_word+search_word"> . . . </a>
Send a search string to a server. Different servers might interpret the search string differently. In the case of word oriented search engines, multiple search words might be specified by separating individual words with a plus sign (+).
Required attributes for anchors: one of name or href.

Optional attributes: rel, rev, urn, title, methods. Note that not all methods are valid attributes to an anchor.

The structure of a Universal Resource Locator (URL) is similar to:

resource_type://host.domain:port/pathname
where the possible resource types include: file, http, news, gopher, telnet, and wais, and the colon followed by the TCP port number is optional. A more complete description is presented in http://info.cern.ch/hypertext/WWW/Addressing/Addressing.html

Headers

<h1> . . . </h1> Most prominent header
<h2> . . . </h2>
<h3> . . . </h2>
<h4> . . . </h4>
<h5> . . . </h5>
<h6> . . . </h6> Least prominent header

Logical Styles

<em> . . . </em>
Emphasis
<strong> . . . </strong>
Stronger emphasis
<code> . . . </code>
Display an HTML directive
<samp> . . . </samp>
Include sample output
<kbd> . . . </kbd>
Display a keyboard key
<var> . . . </var>
Define a variable
<dfn> . . . </dfn>
Display a definition
<cite> . . . </cite>
Display a citation

Physical Styles

<b> . . . </b>
Bold font
<i> . . . </i>
Italics
<u> . . . </u>
Underline
<tt> . . . </tt>
Typewriter font

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.

Present an unordered list: <ul>

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

Present an ordered list: <ol>

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

Present an interactive menu: <menu>

<menu>
<li> First item in the menu
<li> Next item
</menu>

Present a directory list of items: <dir>

<dir>
<li> First item in the list
<li> Second item in the list
<li> Next item in the list
</dir>
Items should be less than 20 characters long.

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 list presented in:
http://info.cern.ch/hypertext/WWW/MarkUp/Entities.html
-or-
The ISO LATIN I character set
&#ascii_equivalent;
Use a character literally. Again note that the semicolon following the ASCII numeric value is required.

HTML Forms

<form> . . . </form>

This element defines an online form. The information on the form is sent to a query server to search for or collect information for a database.

ATTRIBUTES: action, method
ARGUMENTS for:
action: The URL of the query server similar to:

<form action="URL"> . . . </form>

method: One of get or post similar to:

<form action="URL" method=post> . . . </form>

Form Interface Implimentation

The following tags impliment the interface for the form. They are valid only when used inside the <form> . . . </form> element.
<input> (there is no ending tag)
Defines an input field where the user may enter information on the form.

ATTRIBUTES: type, name, value, checked, size, maxlength
ARGUMENTS for:
type:
One of: "text", "password", "checkbox", "radio", "submit", or "reset"

type="text" and type="password" accept character data; type="checkbox" is either selected or not; type="radio" allows selection of one of several options; type="submit" is an action button that sends the completed form to the query server; type="reset" is a button that resets the applicable default values in the form.

name:
"textstring" where textstring is a symbolic name (not displayed) identifying the input field as in:

<input type="checkbox" name="box1">

value:
"textstring" where the function of textstring depends on the argument for type.

  • For type="text" or type="password", textstring is the default value for the input field.
  • If type="checkbox" or type="radio", textstring is the value of input when it is selected.
  • For type="reset" or type="submit", textstring is a label for the input field.
checked:
No arguments. For type="checkbox" or type="radio", if checked is present the input field is selected by default.
size:
width or width, height where width and height are integer values representing the number of characters by number of lines for the type="text" or type="password" input fields.
maxlength:
length where length is the number of characters accepted for type="text" or type="password". This attribute is only valid for single line "text" or "password" fields.

<select> . . . </select>
defines a list of options the user can select for the field. This element employs the <option> element for each item in the list.

ATTRIBUTES: name, size, multiple
ARGUMENTS for:
name:
"textstring" where textstring is the symbolic identifier for the select field.
size:
The argument for size is an integer value representing the number of <option> items that will be displayed at one time.
multiple:
No arguments. If present, the multiple attribute allows selection of more than one <option>.

<option>
Within the <select> element the <option> tags are used to define the possible values for the select field as in:

<select>

<option>textstring 1

<option>textstring 2

<option>textstring 3

</select>

textstring 1, textstring 2, and textstring 3 represent possible values of the select field.

ATTRIBUTES: selected
ARGUMENTS for:
selected:
No arguments. If selected is present then the option is selected by default.

<textarea></textarea>

or

<textarea> . . . default text . . . </textarea>

Defines a rectangular field where the user may enter text data.

ATTRIBUTES: name, rows, cols
ARGUMENTS for:
name
"textstring" where textstring is a symbolic name that identifies the <textarea> field.
rows and cols:
Both attributes take an integer value which represents the lines and number of characters per line in the <textarea>.

Miscellaneous

<!-- text -->
Place a comment in the HTML source
<address> . . . </address>
Present address information
<img src="URL" alt="Alternate Text">
Include a graphic image. "URL" is the location and filename of the image file. The alt attribute allows a text string to be put in place of the image in clients that cannot display images.

Other possible attributes are: ismap, and align.

The argument for align can be one of top, middle, or bottom.

<br>
Forces a line break immediately and retains the same style.
<hr>
Places a horizontal rule or separator between sections of text.
<link rev="RELATIONSHIP" rel="RELATIONSHIP" href="URL">
The link tag allows you to define a relation ship between the "URL" specified and the HTML file. The rel attribute specifies the relationship between the HTML file and the "URL". The rev attribute specifies the relationship between the "URL" and the HTML file. The only currently implemented link relation ship is rev="made".

<link rev="made" href="URL">

allows the file maker or owner to be specified in the link "URL". The most common use of this is as follows:

<link rev="made" href="mailto:EMAIL_ADDRESS@HOST">

Additional Information

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

For reference information on HTML see: http://info.cern.ch/hypertext/WWW/MarkUp/MarkUp.html

Michael Grobe
Academic Computing Services
The University of Kansas
grobe@kuhub.cc.ukans.edu