html5 Site Icon CSS3 Site Icon CSS Site Icon

HTML4 Basics

Lesson 3 - 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 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="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.

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.

notepad

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 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.



Basic HTML Structure  << Prev     Next >>  Paragraphs/Line Breaks

HTML4 Reference

The <h1> - <h6> heading tags

go to home page Homepage go to top of page Top

HTML4 Elements

The complete set of HTML elements also known as HTML tags from the latest HTML 4.01 Specification.

Click the links for more information on individual tags and their attributes.

<!--...-->

<!DOCTYPE>

<a>

<abbr>

<acronym>

<address>

<applet>

<area />

<b>

<base />

<basefont />

<bdo>

<big>

<blockquote>

<body>

<br />

<button>

<caption>

<center>

<cite>

<code>

<col />

<colgroup>

<dd>

<del>

<dfn>

<dir>

<div>

<dl>

<dt>

<em>

<fieldset>

<font>

<form>

<frame />

<frameset>

<h1> - <h6>

<head>

<hr />

<html>

<i>

<iframe>

<img />

<input />

<ins>

<isindex />

<kbd>

<label>

<legend>

<li>

<link />

<map>

<menu>

<meta />

<noframes>

<noscript>

<object>

<ol>

<optgroup>

<option>

<p>

<param />

<pre>

<q>

<s>

<samp>

<script>

<select>

<small>

<span>

<strike>

<strong>

<style>

<sub>

<sup>

<table>

<tbody>

<td>

<textarea>

<tfoot>

<th>

<thead>

<title>

<tr>

<tt>

<u>

<ul>

<var>