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.
Copy and paste the following code into the reopened file, overwriting the opening <body> and closing </body> tags.
<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>
Reviewing Our Changes
Ok with the changes cut and pasted into the file, your HTML code should now look like the code below.
<html xmlns="https://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> tags are meant to emphasise the most important headings on a page and should be used sparingly. 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 10 Complete
In this lesson we learnt about the various heading tags and the differences between them and their uses within our web pages.
Well, our journey from HTML beginner to intermediate is now complete. We have covered a lot of ground on our initial foray into HTML and I hope you have not only learned, but also enjoyed doing these HTML5 Basic Tutorials. Play around with the file and maybe improve on the headings I used to improve the look of the web page.
We continue our expedition through the HTML jungle with the HTML5 Intermediate Tutorials.
The <h1> - <h6> heading tags