Writing HTML | About | Index | previous | next |

Headings- Six Levels Deep

As you see in this WWW page, the section headings ("Headings- Six Levels Deep", "Objectives", "Lesson","HTML Headings"...) appear as different sizes and, perhaps, different colors and fonts. HTML has codes 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:

Lesson

HTML Headings

Headings are achieved in HTML by "tagging" certain chunks of text with heading tags. The format for a HTML heading tag is:
     <hN>Text to Appear in Heading</hN>
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

Note: If you do not have the working document from the previous lesson download a copy now.

  1. Re-open your workspace (if not already opened).
  2. Go to the text editor window.
  3. Open the HTML text file you created in lesson 2, "Volc.html".
  4. First, we will use the <h1> tag to display the title as the biggest header, level 1. Above the first portion of text and below the line with the title tag, enter the following:
              <h1>Volcanoes!</h1>
    
  5. Below the text already entered, create other headings for future sections of your Volcanoes of the World page. Enter the following (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>
    
  6. Save changes in your text editor.
  7. Return to your WWW browser, Open and Reload the HTML file.

    Note that on the computer you are using now, you can use the settings of the WWW 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 the headers are of a certain type (h1 to h6); how it is displayed is controlled by the user of the WWW browser.

Check Your Work

Compare your work to this sample. If some of your headings do not appear correct, be sure to check that the starting tag and ending tags have the same heading level.

As an optional exercise, take a look at what happens when you make a typographical error. Open your HTML document in the text editor and delete the slash (/) in the h1 tag, </h1> after the header "Volcanoes of the World":

     <h1>Volcanoes of the World<h1>
       [missing "/" -----------^^^]
Save the changes and reload into your WWW browser. Without the correct ending of the h1 tag, your WWW browser interprets all of the succeeding text as part of that header! After trying this you should go back to your document and re-insert the slash in the correct spot.

Review Topics

  1. What are the different levels of headings in HTML?
  2. What are the tags associated with these different levels?
  3. What steps did you use in placing headings in your HTML document?
  4. What happens if you forget a slash at the end of a header tag?

Independent Practice

Add at least three headers of different levels to your own WWW document.

Coming Next....

Breaking up text into paragraphs.

GO TO.... | Lesson Index | previous lesson "Modifying HTML" | next lesson "Paragraphs" |

Writing HTML Lesson 3: Headings- Six Levels Deep
©1995 Maricopa Center for Learning & Instruction (MCLI)
Maricopa County Community College District, Arizona

The Internet Connection at MCLI is Alan Levine--}
Comments to levine@maricopa.edu