Lessons | previous | next |

3. Headings: Six Levels Deep

As you see in this web page, the section headings ("Headings -- Six Levels Deep", "Objectives", "Lesson", "HTML Headings" ...) appear as different sizes and, perhaps, different colors and fonts. HTML provides tags for designating headings in six levels of significance. Your browser determines the exact font and size for display.

Objectives

After this lesson, you will be able to:

Identify the different levels of headings in HTML and the tags associated with them.
Place different level headings within your HTML document and view the changes within your web browser.

Lesson

HTML Headings

You created headings in HTML by "tagging" certain chunks of text with heading tags. The format for an HTML heading tag is:


     <hN>Text to Appear in Heading</hN>

where N is a number from 1 to 6 identifying the heading size. Here are some examples of different heading sizes:

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Heading levels range from level 1 (Most Important) to level 6 (Least Important). Like an outline, your heading levels should have logical, consistent order and be parallel.

Placing HTML Headings in Your Document

Re-open your workspace (if not already opened).
Go to the text editor window.
Open the HTML text file you created in lesson 2, "volc.html".
First, we will use the tag to display the title as the biggest header, <H1>. Enter the following above the existing body text and after the </head><body> tags:
```
          <h1>Volcano Web</h1>
```

Below the text already entered, create other headings for future sections of your Volcano Web page.

Enter the following headings inside the body of your web page (Note that some are H3 and others are H2 tags):


          <h2>Introduction</h2>

          <h2>Volcano Terminology</h2>

          <h2>Volcanic Places in the USA</h2>

          <h3>Mount St Helens</h3>

          <h3>Long Valley</h3>

          <h2>Volcanic Places on Mars</h2>

          <h2>Research Project</h2>

          <h3>References</h3>

Save changes in your text editor.
Return to your web browser, Open and Reload the HTML file.

Note that on the computer you are using now, you can use the settings in your web browser to define the fonts and/or size of the headings. For example, on one computer you could have a browser display h1 tags as Times font and 36 point; h2 tags as Helvetica font and 24 point, etc. HTML codes designate only that the headers are of a certain type (h1 to h6); how it is displayed is controlled by the user of the web browser.

Lesson Index | previous: "Modifying HTML" | next: "Paragraphs" |