Headings and Lists

June 22, 2000
Introduction to Web Page Design

Headings and Lists

Some tags, such as headings, give the browser control of the exact formatting, including choice of font size and weight. This has the advantage of requiring minimal coding, but diminishes your control of the final product.

By Raouf Allim

This lesson shows you how to add headings, <H1> being the highest level, and <H6> being the lowest level. Don't forget to close off the tag (e.g. </H1>) otherwise all of rest of the web page may display as a heading.

Also note that although you specify the level of the heading, it is the browser that makes the decision about how large/bold the text should appear - in other words the formatting of the text is browser-controlled. Included below are other tags where the browser makes the decision about the exact formatting of the display.

Paragraph	<P></P> Signifies a new paragraph. Although technically the closing tag is not required it is good form to use it.
Align Paragraph	<P ALIGN="LEFT\|CENTER\|RIGHT"></P>
Heading	<H1> <H2> <H3> <H4> <H5> <H6>
Align Heading	<H? ALIGN="LEFT\|CENTER\|RIGHT"></H?>
Division	<DIV></DIV>
Align Division	<DIV ALIGN="LEFT\|RIGHT\|CENTER\|JUSTIFY"></DIV>
Block quote	<BLOCKQUOTE></BLOCKQUOTE> usually displays as indented text)

Example: Add a top heading to your web page

<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
<H1>This is a level 1 Heading</H1>
<P>Creating a web page is as simple as this!!!!</P>
</BODY>
</HTML>

Paragraphs

When browsers process HTML files they ignore any whitespace (spaces, linefeeds, and carriage returns) so that word wrapping can occur at any point in your source file without affecting how the page will be displayed.

Thus the code: -

<HTML><HEAD><TITLE>My First Page</TITLE></HEAD><BODY><H1>This is a level 1 Heading</H1><P>Creating a web page is as simple as this!!!!</P></BODY></HTML>

and the code: -

<HTML>

<HEAD>
<TITLE>My First Page</TITLE>
</HEAD>

<BODY>
<H1>This is a level 1 Heading</H1>
<P>Creating a web page is as simple as this!!!!</P>
</BODY>

</HTML>

would display in exactly the same way. However the latter is easier to read and debug - make use of this feature when writing HTML by putting headings on new lines, and adding extra blank lines to divide up sections in the source code.

Alignment

Both the <H?> and <P> tags use an alignment attribute to specify text justification (note American spelling) e.g.

    <H3 ALIGN="CENTER">This is a centred heading level 3</H3>

displays as: -

This is a centred heading level 3


Lists

Lists are easier to demonstrate by example than to explain.

Unordered List	<UL><LI></LI>...<LI></LI></UL>
Bullet Type	<UL TYPE=DISC\|CIRCLE\|SQUARE>
Ordered List	<OL><LI></OL>
Numbering Type	<OL TYPE="A\|a\|I\|i\|1">
Definition List	<DL><DT><DD></DL>

Below is an unordered three-item list (note the use of indentation in the source code to make it easier to read):

<UL TYPE="SQUARE">
    <LI>item 1</LI>
    <LI>item 2</LI>
    <LI>item 3</LI>
</UL>

The output is:

item 1
item 2
item 3

The ordered list equivalent is:

<OL type="A">
<LI>item 1</LI>
<LI>item 2</LI>
<LI>item 3</LI>
</OL

which displays as:

item 1
item 2
item 3

Definition lists are intended to make it easy for you to display a list of definitions - a variation on the ordered list concept.

<DL>
    <DT>Definition 1
        <DD>This is the first definition
    <DT>Definition 2
        <DD>This is the second definition
</DL>

displays as:

Definition 1: This is the first definition
Definition 2: This is the second definition.