Home Misc Index
  HTML Summary
 P van Diemen

This is an excerpt for HTML 4, not particularly suited as a beginners guide.

Contents

Notation

[ phrase ]an optional phrase
{ text }comment
«term»non-terminal term, to be substituted
Blanks or spaces are in general not relevant for HTML.
HTML accepts tags in uppercase and lowercase, but in this document all tags are indicated in uppercase.

References

General structure

<HTML [ lang="en" ] >
<HEAD>{ Header section }
[ <META ... > ]See immediately below
<TITLE>HTML Overview</TITLE>{ Page title }
[ <STYLE ... > ]{ See section Style below }
</HEAD>
<BODY>{ Body section }
«elements forming the page contents»{ see section Elements below }
</BODY>
</HTML>

The meta element provides information about the page (not about its subject).  Attributes are: name (or http-equiv), content and optionally scheme (lang, one of the general attributes, is also applicable).  There is no prescribed set of name and content values, but HTTP-servers, search engines and browsers may respond to particular values.
Examples of Meta-statements:

 

Elements

The page (body) is commonly filled with text.  To accomplish a layout, the text is structured in 'elements' like Paragraphs, Headers, Lists, Tables, etc.  These elements are indicated by HTML-tags.

Nearly all elements may have the attributes:
  • id=unique_identifier_of_element
{ See section Links (and Styles) below }
  • class=classname
  • lang= EN | NL | ...
{ Language }
  • dir= LTR | RTL
{ text direction }
  • style="in-line style definition"
{ See section Style below }
  • title="Pop-up example"
{ Pop-up text }
  • align= left | center | right | justify
{deprecated; use style }
  • on«event»=script
For rendering details (margins, padding, …) of elements see the section on Styles.
 

<P>Paragraph [</P>] with leading whitespace (about one line).
<BR>with line break.

Example of <B>bold</B>, <I>italic</I>, <U>underlined</U> and <S>strike-out</S> text (Underline and Strike-out are deprecated; use text styles).

Example of <SUB>subscript</SUB> and <SUP>superscript</SUP> text.

Example of <DEL>deleted<DEL> and <INS>inserted</INS> text.

<ACRONYM title="World Wide Web">(hover mouse over): WWW</ACRONYM>
<ABBR> is similar, but doesn't seem to work in Iexplorer.
The same effect can be achieved through <SPAN title="Pop-up through Span/title">(hover mouse over)</span>.

For special symbols ('glyphs') in HTML see the HTML Characters page.
 

<H3>Headers</H3>
Headers are a special form of paragraphs, rendering the text larger and usually in bold.  The header element contains a level-number, where 1 is the most important header (e.g. corresponding to chapter title) and 6 is the least important (e.g. corresponding to a subsubsection).  The headers are not presented with a section number.
 

Lists
<UL {type="list-style-type: disc | circle | square"}>Unordered (bulleted) lists

</UL>

<OL {style=list-style-type: decimal | lower-alpha | upper-alpha | lower-roman | upper-roman | none"}>Ordered (numbered) lists

  1. <LI value=3>List Item (starting at 3) [</LI>]
  2. <LI>Next List Item (next number) [</LI>]

</OL>

Note that there are more options via Styles.

<DL>Definition Lists

<DT>Definition Term [<DT>]
<DD>Definition Data [<DD>]

</DL>

Lists can -of course- be nested.
 

Tables
<TABLE
align = left | center | rightdeprecated (position of table)
width = «size»
[ frame = void | above | below | hsides | vsides| lhs | rhs | box | border ]{ table outside border }
[ rules = none | groups | rows | cols | all ]{ cell border }
[ border = «pixels» ]{ thickness in pixels }
[ cellspacing = «pixels» ]{ between cell borders }
[ cellpadding = «pixels» ]{ between cell border and text }
>
[ <CAPTION [align= top | bottom | left | right ] > text </CAPTION> ]{ table caption }
[ «COLGROUP_definition» ]
…«table rows»…
</TABLE>
where columns can be formatted specifically through
<COLGROUP [span=n] [width=«size»] [«halign»] [«valign»] >  [«COL_definition»]* [</COLGROUP>]
«COL_definition»<COL [span=n] [width=«size»] [«halign»] [«valign»] >{ attributes for corresponding column }
«halign»align= left | center | right | justify | char
char="char"{ alignment character, e.g. "." }
charoff=«size» { character offset }
«valign»valign= top | middle | bottom | baseline
   {COLGROUP is not implemented by FireFox !}

Table row:  <TR> …cells… [</TR>]

Cell:  <TD> «cell content» [</TD>]
or <TH> «cell content» [</TH>] for 'header cells' causing text to be bolded and centered.

There are also tags for header and footer rows (THEAD, TFOOT, TBODY) to allow scrolling of the tabel body independent of the header and footer, but these do not work (at least not in Iexplorer v6).

Forms are basically used to enter data to submit them to the server, but can also be used for input to a script (e.g. JavaScript).
<FORM>
action = URI{ the URL of the processing agent; required attribute, but URL can be empty "" }
method = get | post
enctype = content-type (default "application/x-www-form-urlencoded")
accept-charset = charset_list (default "UNKNOWN")
accept ={ content-type-list e.g. "text/html", "image/png", "text/css", … }
name = «name»{ forms name for reference; preferably use Id }
«input_elements» and/or «select-elements» and/or «button-elements» and/or other HTML elements and text
</FORM>
 
<INPUT
type = text | password{ normal text or '*' echo }
= | checkbox | radio{ on/of-switches or choice }
= | button |{ general button, use 'value' to assign label }
= | submit | reset{ submit date or clear }
= | image{ grahical submit button }
= | file{ allows files to be selected for submission }
= | hidden{ non-displayed value, e.g. for identification }
name = field name{ for reference, also used to group radio & checkbox buttons }
value = initial value{ optional except for "radio" or "checkbox", then it can be "checked" }
checked{ when the type is "radio" or "checkbox", it specifies that the button is on }
size = «width»{ pixels, or when type is "text" or "password", number of characters }
maxlength = #chars{ when type is "text", the maximum number of characters the user may enter. It may exceed the specified 'size', so the user agent should offer a scrolling mechanism. Default is unlimited }
readonly{ user may not modify text }
accept = Mime{ list of MIME types for file upload }
src = uri{ when the type is "image", the URL to decorate the button }
alt = text{ alternate description for image }
usemap{ use client-side image map }
ismap{ use server-side image map }
tabindex = «number»{ position in tabbing order }
accesskey = «char»{ focus to the element by Alt/«char» }
>{ No closing tag }
 
<BUTTON{ General pushbutton element }
name = «name»{ control name }
value = { initial value, sent to server when submitted }
type= button | submit | reset{ for use as form button; default 'submit' }
tabindex = «number»{ position in tabbing order }
accesskey = «char»{ focus to the element by Alt/«char» }
button text
</BUTTON>
 
<SELECT
name = «name»{ field name }
size = #lines{ rows visible }
multiple{ allow multiple selections (shift/click); default is single selection }
tabindex = «number»{ position in tabbing order }
>
<OPTION{ multiple Option-elements, each defining a single choice }
selected{ if Select has the Multiple-option set, multiple Options can be preselected }
value = text{ default: option description text }
label = text{ internal alternative for 'value' }
>
option description text{ what the user sees }
</OPTION>{ optional }
</SELECT>
 
<TEXTAREA{ Multi-line text (input) area }
name = «name»{ name for reference; preferably use Id }
rows = «number»{ height in lines }
cols = «number»{ width in characters }
readonly{ user may not modify text }
tabindex = «number»{ position in tabbing order }
accesskey = «char»{ focus to the element by Alt/«char» }
>
First line of initial text …
</TEXTAREA>

Links (hypertext references, source anchor):
<A href="URI"{ for URI see below }
    [ type='«target_content_type»' ]{ Mime type of target (not required when .html) }
[ title="Simple link to top" ]{ Pop-up text }
[ target=frame_name ]{ Required when target text is to appear in another frame (see below) }
>top</A>{ Hypertext }

URI (= URL) comes in 2 forms: absolute and relative references.
    Absolute:"http://www.site.type/dir…dir/file.html [ #«location_name» ] "
Relative:a relative path starting from the current page
e.g.: ". . /dir2/file2.html"{ first 1 directory up, down dir2, get file2 }
e.g.: "#section2"{ go to the section2 anchor in current page }

Anchor:
Destination anchor: <A name=«location_name»></A>
{use of the id-attribute in the element (e.g. <P id=«location_name»>) is not always supported}
The anchor "top" is usually predefined at top of page.

Predefined frame names:
  _blankload the designated document in a new, unnamed window (force new window)
_selfload the document in the same frame as the element that refers to this target
_parentload the document into the immediate FRAMESET parent of the current frame. This value is equivalent to _self if the current frame has no parent.
_topload the document into the full, original window (thus canceling all other frames). This value is equivalent to _self if the current frame has no parent.

Styles

'Styles' allow a more sophisticated rendering of text.  Styles can be defined at 3 locations:

  1. in separate files ('style sheets') containing «style_definitions», referred to in the header-section by
    <HEAD> … <LINK HREF="style_file" TYPE="text/css" REL="stylesheet" TITLE="Preferred_style" [MEDIA=«media_type»]> … </HEAD><BODY> …
    Style sheets can be Persistent, Preferred or Alternate; this is accomplished through the REL and TITLE attributes:
    REL attributeTITLE attribute
    Persistent:"stylesheet"- (not set)
    Preferred:"stylesheet"some name
    Alternate:"alternate stylesheet"alternate name
    «media_type = screen (intended for non-paged computer screens, default), tty (for fixed-pitch character grid media with limited display capabilities), tv (low resolution, color, limited scrollability), projection (projectors), handheld (small screen, monochrome, bitmapped graphics, limited bandwidth), print (for paged, opaque material), braille (tactile feedback devices), aural (speech synthesizers), all (suitable for all devices).
  2. in the page header section of the page
    <HEAD> … <STYLE TYPE="text/css"> «style_definitions» </STYLE> … </HEAD><BODY> …
    External files can also be included through @import url(«uri»);
  3. in the element itself ('in-line')
    e.g. <P style="«style_statements»">
where
«style_definition» is either
«style_statement» is
attribute :  value [; attribute : value; …]

Examples:
<HEAD> … <STYLE TYPE="text/css">
BODY{ background-color: silver }/* page background light grey*/
H1{ text-align: center; font-variant: small-caps }/* for all H1-tags */
P.note{ text-align: center; border-style: solid }/* P subclass for notes */
.smlcps{ font-variant: small-caps }/* general class for small-caps */
TD#z9{ font-weight: bold }/* id for bold cells */
#blue{ font-color: blue }/* general id for (dark) blue text*/
</STYLE> … </HEAD><BODY> …
<H1>Chapter 1</H1>always centered
<P class=note>Please note<BR>…will be centered, with border
<TD id=z9>cell with bolded text
<H3 class=smlcps>header 3 with small-caps text
<LI id=blue>list item in blue

HTML has 2 tags specifically suited to apply styles:

Example: <SPAN STYLE="font-variant:small-caps">Small-Caps text</SPAN>.

The style attributes are:

Some style attributes for special objects (e.g. Body, Frame):
  • scrollbar-face-color
: dark grey;/* scroll bar and arrow boxes */
  • scrollbar-track-color
: light grey;   /* gutter of a scroll bar */
  • scrollbar-arrow-color
: dark grey;/* arrows */

There are also pseudo classes.  The following is an example of the Anchor pseudo-class
  • A:link
{ color: red }/* unvisited link */
  • A:visited 
{ color: blue } /* visited links */
  • A:active
{ color: lime }/* active links */

It is also possible to change atributes of an entity at some even, e.g. when the pointer is hovering above it (at least in IExplorer >v4).  Example:
  • TAG:hover
{ text-decoration:underline; }
which requires that the attributes are reset when out of focus:
  • TAG
{ text-decoration:none }

=O=