Did you find this useful?
Socialize it today.


HTML Headings

Friday, February 10, 2012

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

  1. Item 1
  2. Item 2

H2 Heading - Section 3

Some content

  1. Item 1
  2. 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.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Creating Web Pages Simplified HTML CSS: The Complete Reference HTML CSS and JavaScript Editor