HeadingsS2C Home « Headings

With the basic structure of a HTML document behind us and an understanding of HTML syntax it's time to add some meat to our documents with the HTML heading tags. In this lessons practical we introduce each of the 6 heading tags and explain what they mean.

Understanding the Six Heading HTML Tags

There are six HTML heading tags all of varying degrees of importance. The easiest way to explain what each means is to take a look at them in our default browser.

Open up the file with Notepad we created and tested in Lesson 2: Basic HTML Structure

You saved the file to your computer in the C:\_HTMLBasics folder as lesson_2_webpage.html

Copy and paste the following code into the reopened file, overwriting the contents:


<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
  HTML Doctor - HTML and CSS Tutorials - Basic HTML Lesson 3 - Headings
</title>
</head>
<body>
<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4>
<h5>Heading 5</h5><h6>Heading 6</h6>
</body>
</html>

When your file matches the HTML code above, save in the C:\_HTMLBasics folder as lesson_3_webpage.html and close the Notepad.

save html4 headings

Viewing Our Changed File

From the C:\_HTMLBasics folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

html4 headings

The first thing to note is that each heading is on a separate line, whenever the browser sees a heading tag it uses a new line to display it on.

As you can see the headings range in size with <h1> as the biggest and <h6> as the smallest. So what do they mean for our webpages?

Well <h1> tag is meant to emphasise the most important heading on a page and should be used once. For instance the page you are viewing has one <h1> at the very start of the page.

<h2> tags can be used for sections of a page, <h3> tags for subsections and so on.

As a rule of thumb the text size of the <h4> tag is usually the same size as regular text and the <h5> and <h6> tags are smaller than regular text.

Feel free to experiment with the HTML file from this lesson. Try putting all the heading tags on the same line and then put them all on separate lines and recheck the page in your browser. The results should still be the same as above.

Lesson 3 Complete

In this lesson we learnt about the various heading tags and the differences between them and their uses within our web pages.

Related Tutorials

HTML4 Basic Tutorials - Lesson 4 - Paragraphs and Line Breaks

What's Next?

In the next lesson we add text to our headings and learn to separate content using the paragraph tag and introduce the forced line break tag.

HTML4 Reference

The <h1> - <h6> heading tags

go to home page Homepage go to top of page Top