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 has
codes for designating headings in six levels of significance.
Your browser determines the exact font and size for display.
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.
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.
- Re-open your workspace (if not already opened).
- Go to the text editor window.
- Open the HTML text file you created in lesson 2,
- First, we will use the <h1> tag to display the title as the
biggest header, <H1>. Enter the following above the
existing body text and after the </head><body> tags:
- Below the text already entered, create other headings for future
sections of your Volcano Web page.
following headings inside the body of your web page
(Note that some are H3 and others are H2 tags):
<h2>Volcanic Places in the USA</h2>
<h3>Mount St Helens</h3>
<h2>Volcanic Places on Mars?</h2>
- 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 of the 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 the headers are of a
certain type (h1 to h6); how it is displayed is controlled by the
user of the web 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.
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, after
the header Volcano Web:
[missing "/" -----------^^^]
Save the changes and reload into
your web browser. Without the correct ending of the h1 tag, your web 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.
- What are the different levels of headings in HTML?
- What are the tags associated with these different levels?
- What steps did you use in placing headings in your HTML document?
- What happens if you forget a slash at the end of a header tag?
Add at least three headers of different levels to your own WWW
Breaking up text into paragraphs.
Writing HTML Lesson 3: Headings- Six Levels Deep
Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona
The Internet Connection at MCLI is
Alan Levine --}
Comments to email@example.com