Chapter 6: Headings

In an HTML document, you have six, ready-made levels of heading. When you want to make a section of text into heading, you wrap it in heading tags. The six types of heading tag are as follows: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Heading tags contain text and thus must be closed appropriately (for example </h1>, </h2> etc). In most common browsers, <h1> will produce large, bold text, and <h2> through <h6> will do the same but will be slightly smaller as you move down from <h1> to <h6>.

HTML Code:

<h1>a h1 heading</h1>

<h2>a h2 heading</h2>

<h3>a h3 heading</h3>

<h4>a h4 heading</h4>

<h5>a h5 heading</h5>

<h6>a h6 heading</h6>

Outputs

Styling headings

Using CSS you can give headings whatever colour, size, background image etc you want. I will show you how to do this later on!

Good Practices for Headings

There are certain recommendations to consider with the heading tags. There should only be a single <h1> in a web-page, and headings should appear in a logical order. The following is an example of good use of heading tags.

Input HTML

<h1>Taking Care of Cats</h1>

<h2>Daily Feeds</h2>
<h3>How Regular you Should Do it</h3>
...content here...

<h3>Recommended Brands of Food<h3>

...content here....

<h2>Cat Health</h2>

<h3>Signs of Illness</h3>

...content here...

<h3>General Tips</h3>

...content here...

Outputs

As you can see <h2>'s are used as sub-headings of the <h1> tag. <h3>'s are used as subheadings of <h2> tags. This really is only a recommendation, and in reality you can arrange headings how you wish, and have as many <h1> tags as you like. Doing it this way however is recommended as it allows not only your visitors, but search engines and browsers to make logical sense of your document quickly. Humans and computers like structure.

It's completely up to you how you utilize the heading tags. The best advice I can give is simply to use common sense... and if your common sense isn't too good, then try using your logic instead ;).

Anyway, why not see the heading tags in action? And once you're done, screw your head on and start heading for the quiz on headings!