Headings are very useful in your HTML documents. Headings are important because
search engines such as Google or Bing, use your headings to index the structure and content of your web pages. These headings tell the web crawlers, what is important on your page and how
the data is structured and related. There are six types of headings that you can use. H1 headings should be used as the main heading, followed by H2 headings, then H3 headings, and so on. You
are not required to use every type of heading on each of your pages. For instance, on some pages, you may only need
to use H1 and H2 types, but other pages may require using up to H5 or H6 because you have a greater detail of information and page structure. The H1 element should be used only one time
within an HTML document, while H2 - H6, can be used as often as needed. However, keep in mind they should always be used in order, as they were intended. For example, an H3 should be a
sub-heading of an H2, which should be a sub-heading of an H1. If you need to change the formatting of your headings, you can do so using style sheets. Here is an example of what your page structure
may look like if you used these headings:
H1 Heading - Main topic
H2 Heading - Introduction
Some content
H2 Heading - Section 2
Some content
- Item 1
- Item 2
H2 Heading - Section 3
Some content
- Item 1
- Item 2
H2 Heading - Section 4
Some content
H2 Heading - Closing
Some content
Here is the corresponding HTML code:
<h1>H1 Heading - Main topic</h1>
<h2>H2 Heading - Introduction</h2>
<p>Some content</p>
<h2>H2 Heading - Section 2</h2>
<p>Some content</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
<h2>H2 Heading - Section 3</h2>
<p>Some content</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
<h2>H2 Heading - Section 4</h2>
<p>Some content</p>
<h2>H2 Heading - Closing</h2>
<p>Some content</p>
When not to use headings...
If you are familiar with HTML and CSS, you should already be aware that CSS is very powerful with regard to formatting your tags. One of the things that I see and hear from others is the
practice of using these heading tags to apply styles to text. Some people may use an h3 tag instead of h2 on a certain spot just because they need a different look and style to the heading.
This is not a good practice. If you need to have a certain heading look bigger or smaller different than the default style, you should apply a custom style to your h tags in every instance using CSS. In addition, not all of your content belongs
between heading tags. Take the time to structure your page correctly. Your users will appreciate, but you will even more. As mentioned in the introduction of this article, web crawlers will
have a better change of indexing your pages properly and you will directly benefit from this by having a higher page rank.
Did you find the page informational and useful? Share it using one of your favorite social sites.
Recommended Books & Training Resources