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.
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.
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.
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.
The <h1> - <h6> heading tags