[Please note: This is a very old,
classic reference from 1994, originally created at the University of
Kansas
I have made a few minor changes to reflect current practice.
The section on FORMS is particularly useful
- Lin Jensen]
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>
Elements usually placed in the head element
<title>
. . . </title>
- Specify document title
<link>
- Specify relationships to other documents. Attributes: same as
Anchor below
<meta>
- Specify information about the document, such as author and
character set
<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>...</p>
- The text between the start and end tags will be formatted as a
paragraph.
<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.
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>
<li>
Next item in the list </li>
</ul>
Present an ordered list: <ol>
<ol>
<li>
First item in the list </li>
<li>
Next item in the list </li>
</ol>
Present an interactive menu: <menu>
<menu>
<li>
First item in the menu </li>
<li>
Next item </li>
</menu>
Present a directory list of items: <dir>
<dir>
<li>
First item in the list </li>
<li>
Second item in the list </li>
<li>
Next item in the list </li>
</dir>
Items should be less than 20 characters long.
Entities
- &keyword;
- Display a particular character identified by a special keyword.
For example the entity
&
specifies the ampersand
( & ), and the entity <
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 Interface
The
HTML
forms interface allows document creators to define
HTML
documents containing forms to be filled out by users. When a user fills
out the form and presses a button indicating the form should be
"submitted," the information on the form is sent to a server for
processing. The server will usually prepare an
HTML
document using the information supplied by the user and return it to
the client for display.
The following tags implement the forms interface:
- <form> . . . </form>
- <input>
- <select> . . . </select>
- <option> . . . </option>
- <textarea> . . . </textarea>
The last four tags can only be used within a
<form> . . .
</form> element.
<form> . . . </form>
- 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>
- <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>
<option>textstring 2</option>
<option>textstring 3</option>
</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> . . . default text . . . </textarea>
Defines a rectangular field where the user may enter text data. If
"default text" is present it will be displayed when the field appears.
Otherwise the field will be blank.
- 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>
to be displayed.
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.
The image is displayed "inline", between words of text.
Other possible attributes are: ismap and align.
The argument for align can be one of top, middle,
or bottom. These refer to how the image is aligned vertically
with the surrounding text.
The argument for align can also be left
or right
.
In this case the image is "floated" to one side, and the text flows
around it. [This use is now deprecated]
<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">
Michael Grobe
Academic Computing Services
The University of Kansas
grobe@kuhub.cc.ukans.edu