A Basic Outline of Using HTML Heading Tags

Understanding HTML heading tags is not difficult. It's basically like the outline of a book:

h1 - Book Title
h2 - Chapter Titles
h3 - Sub-items within a Chapter
h4 - Sub-items within the h3 items
h5 - Sub-items within the h4 items
h6 - Sub-items within the h5 items

Making the hierarchy of your content on a web page understandable is not just about designing some things to be larger than other things. Visually, this might be fine - the larger the thing, the more important it is, and two things of the same size mean they are of equal importance.

However, this will fall apart very quickly if you want the outline of your document to make sense. To whom? To someone who wants to view the hierarchy of it in a textual manner, to someone who uses keyboard navigation, to someone who thinks structure is important, etc.

Within HTML we have heading tags - h1, h2, h3, h4, h5, h6 - and we have paragraph tags - p - and lots of other ones (lists, blockquote, etc), which we won't worry about for now - let's just focus on headings and paragraphs.

h1 - Heading 1

There should only be one h1 tag on your page. This is your page's title. On an 'About Us' page, it would be the words About Us. On this current page it's the words "A Basic Outline of Using HTML Heading Tags". Since there should only be one h1 tag.

h2 - Heading 2

This is the 2nd level of headings. It is assumed that it's a subset of the h1 tag. You can have as many subsets of the h1 as you want, giving you a document outline like so:

h1
-- h2
---- Paragraph(s) of text
-- h2
---- Paragraph(s) of text

h3 - Heading 3

This is the 3rd level of headings. It is assumed that it's a subset of the preceding h2 tag. You can have as many subsets of the preceding h2 as you want, giving you a document outline like so:

h1
-- h2
---- Paragraph(s) of text
------ h3
------ Paragraph(s) of text
------ h3
------ Paragraph(s) of text
-- h2
---- Paragraph(s) of text

h4 - Heading 4

This is the 4th level of headings. It is assumed that it's a subset of the preceding h3 tag. You can have as many subsets of the preceding h3 as you want, giving you a document outline like so:

h1
-- h2
---- Paragraph(s) of text
------ h3
-------- Paragraph(s) of text
-------- h4
---------- Paragraph(s) of text
------ h3
-------- Paragraph(s) of text
-- h2
---- Paragraph(s) of text

h5 - Heading 5

This is the 5th level of headings. It is assumed that it's a subset of the preceding h4 tag. You can have as many subsets of the preceding h4 as you want, giving you a document outline like so:

h1
-- h2
---- Paragraph(s) of text
------ h3
-------- Paragraph(s) of text
-------- h4
---------- Paragraph(s) of text
------------ h5
-------------- Paragraph(s) of text
------ h3
-------- Paragraph(s) of text
-- h2
---- Paragraph(s) of text

h6 - Heading 6

This is the 6th level of headings. It is assumed that it's a subset of the preceding h5 tag. You can have as many subsets of the preceding h5 as you want, giving you a document outline like so:

h1
-- h2
---- Paragraph(s) of text
------ h3
-------- Paragraph(s) of text
-------- h4
---------- Paragraph(s) of text
------------ h5
-------------- Paragraph(s) of text
-------------- h6
---------------- Paragraph(s) of text
------ h3
-------- Paragraph(s) of text
-- h2
---- Paragraph(s) of text

Filed Under:

1. Semantics
2. HTML
3. Headings