HTML level 2.0 markup

Headings

Headings are delimited by tag pairs of the form <h*></h*>, where * is replaced by the heading level, from 1 to 6. They should appear in a document in a strict hierarchy, with <h1> headings at the top level - usually the title of the document. Samples appear below:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

'Paragraph-type' block elements

The most familiar of these is the <p></p> paragraph tag pair. The closing tag on a paragraph may safely be omitted, and often is. The paragraph's end is then deduced by the browser from the start of the next block element, such as another paragraph or heading.

The <address></address> tag pair delimits addresses, as in:

IDG Media, Media House, Adlington Park, Macclesfield

The <blockquote></blockquote> element delimits an extended quotation from another source, as in:

The quality of mercy is not strained,
It dropeth as the gentle rain from heaven
Upon the place beneath.

The <pre></pre> tag delimits a block of text which is to be rendered in a fixed-width font with spacing and line breaks intact. This is very useful for creating tables for browsers that don't understand the <table> tag (as most Acorn browsers don't).

Computer    RAM    RISC OS
    A310    1MB       2.01
    A440    4MB       2.01
   A5000    4MB       3.10
 Risc PC    9MB       3.50
   A7000    4MB       3.60

Lists

Lists have two parts: a delimiting tag pair indicating the type of list, and a set of single tags indicating each list element. There are three main types of lists, ordered, unordered and definitions.

Ordered lists

Ordered lists are delimited by the <ol></ol> tag pair. The individual elements of an unordered list are marked by <li> tags. An example of an unordered list appears below, first with the HTML source:

<ol>
<li> Insert the disc on the floppy drive.
<li> Click on the floppy drive icon on the Desktop.
<li> Double-click on the installer icon.
</ol>

Then how it looks in your browser:

  1. Insert the disc on the floppy drive.
  2. Click on the floppy drive icon on the Desktop.
  3. Double-click on the installer icon.

Unordered lists

Unordered lists are delimited using the <ul></ul> tags. The individual elements are (as in the case of ordered lists) marked by <li> tags. An example of an unordered list appears below, first with the HTML source:

<ul>
<li> Faster response to your problems.
<li> A 24-hour support hotline.
<li> Full money-back guarantee.
<li> Interest-free credit until May.
</ul>

This is how it looks in your browser:

Definitions

Lists of definitions are marked by the <dl></dl> tag pair. Each element in the list has two parts: a term and the term's definition. Terms are marked with the <dt> tag and definitions with the <dd> tag. An example of a definition list appears below, first with the HTML source:

<dl>
<dt> ARM
<dd> Originally, this stood for 'Acorn RISC Machine', but it now stands for 'Advanced RISC Machine'. There is an ARM chip at the heart of every Acorn RISC OS computer.
<dt> RISC
<dd> Reduced Instruction Set Chip. Well, you did ask.
</dl>

This is how it looks in your browser:

ARM
Originally, this stood for 'Acorn RISC Machine', but it now stands for 'Advanced RISC Machine'. There is an ARM chip at the heart of every Acorn RISC OS computer.
RISC
Reduced Instruction Set Chip. Well, you did ask.

Other lists

There are two other list types, which both use <li> for their elements. They are the menu (a compact, unordered list), delimited by <menu></menu>, and the directory (a list whose elements have at most 20 characters), delimited by <dir></dir>. They are uncommon in current HTML usage.

List attributes

All list elements can take the compact attribute, which indicates that the browser should, if possible, keep the elements of the list close together. Here is the same list, first without the compact attribute:

and secondly with it:

Many browsers ignore the compact attribute, so the above lists may look identical.


Separators

The <br> element inserts a line break in a block of text. This is particularly useful in addresses. Usually, browsers don't leave as as much space for a <br> element as they do between paragraphs, but you shouldn't rely on this.

The <hr> element inserts a horizontal rule. It's used in this document to break up the separate sections.

Character formatting

These are a set of HTML tag pairs which may be used to format text. They are usually applied to words or phrases, as opposed to larger blocks of text.

The following tags are known as 'semantic' tags, because they tell the browser the semantic intent of the words - what 'extra meaning' they carry.

The citation tag (<cite></cite>)
Delimits the citation of a book or other work - as in Acorn User or One Flew Over the Cuckoo's Nest.
The code tag (<code></code>)
Delimits computer language source code - for instance 10 PRINT "Hello World!"
The emphasis tag (<em></em>)
Delimits emphasised text - for instance, this point is very important.
The keyboard tag (<kbd></kbd>)
Delimits text to be entered from the keyboard - for instance 'The user then types yes or no'.
The text sample tag (<samp></samp>)
Delimits text to be rendered 'as is' - for example ;-) or &amp;.
The strong emphasis tag (<strong></strong>)
Delimits strongly emphasised text - for instance, this point is very, very important.
The variable name (<var></var>)
Delimits a variable name - for instance, it's used throughout this document for the HTML tags.

The following tags are known as 'physical' tags, becuase they define how the text will actually look (assuming that the browser can display it):

The bold tag (<b></b>)
Delimits bold text - like this.
The italic tag (<i></i>)
Delimits italic text - like this.
The typewriter font tag (<tt></tt>)
Delimits text displayed in a monospaced font - like this.