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.
After this lesson, you will be able to:
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 1Heading Level 2Heading Level 3Heading Level 4Heading Level 5Heading 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.
Note: If you do not have the working document from the previous lesson download a copy now.
<h1>Volcano Web</h1>
<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>
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.
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, after the header Volcano Web:
<h1>Volcano Web<h1> [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.
Add at least three headers of different levels to your own HTML document.
Breaking up text into paragraphs.
Writing HTML: Lesson 3: Headings: Six Levels Deep
©1994-2002
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
Questions? Comments? Visit our feedback center
URL: http://www.mcli.dist.maricopa.edu/tut/tut3.html
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.