Sundell Solutions

Website Design ▪︎ Maintenance ▪︎ SEO

Remember writing research papers in school?  You would choose a subject to write about, come up with a title, and write an outline.  The outline might have looked like this:

  1. Introduction
  2. Topic 1
    1. Supporting Detail
    2. Supporting Detail
    3. Supporting Detail
  3. Topic 2
    1. Supporting Detail
    2. Supporting Detail
  4. Conclusion

Well, website pages work the same way! 

But in this case, the outline is structured by heading tags which are part of the coding structure of website pages.

What are Heading Tags?

Think of Heading Tags as the hierarchy of your website page.  There are six heading tags in HTML:  h1, h2, h3, h4, h5, h6. You should use these tags in order, starting with h1, then h2, and so on, corresponding to the importance of the information.  

Website pages are written in HTML (Hypertext Markup Language), which uses Heading Tags to indicate the importance of the data on the page for both your website visitor and search engines.

Heading 1s are used for the page title, heading 2s for major sections of your website, and heading 3s for minor sections of your website. Heading 1s should be used before heading 2s, which should be used before heading 3s, and so on. Keeping this structure on your web page makes it easier for both website visitors and search engines to navigate your page.

Using our previous example of the school paper, but converting to header tags, it would look like:

  • h1: Title
    • h2: Introduction
    • h2: Topic 1
      • h3: Supporting Detail
      • h3: Supporting Detail
      • h3: Supporting Detail
    • h2: Topic 2
      • h3: Supporting Detail
      • h3: Supporting Detail
    • h2: Conclusion

Search engines (aka Google) then uses these tags to understand what your page is about and in the end, they help to determine what search terms match your website page.  If you look at the html code of the website page you will see that the would look similar to:

  • <h1>Title</h1>
    • <h2>Introduction</h2>
    • <h2>Topic 1</h2>
      • <h3>Supporting Detail A</h3>
      • <h3>Supporting Detail B</h3>
      • <h3>Supporting Detail C</h3>
    • <h2>Topic 2</h2>
      • <h3>Supporting Detail A</h3>
      • <h3>Supporting Detail B</h3>
    • <h2>Conclusion</h2>

Some things Heading Tags are NOT

They are NOT for Text Formatting

Many people wrongly think of heading tags as a way to control the appearance of their document.  While the text in h1 tags should be a larger font size than in h2 tags, which should be larger than the text in h3 tags, … you should NOT rely on the heading tags to format font size or color on your page.  

You do want to make sure the size of the font decreases, using the largest size for h1, and decreasing from there.  This helps your reader understand the order and importance of your page’s information.  But do NOT use a heading tag just because it is the size and color happen to be what you want that sentence or phrase on your website to have.   

They are NOT for Repetitive Headings

Heading tags should be used for phrases or sentences unique to the specific website page.  For example, if you have an eCommerce website and sell shirts, pants, and hats, you do not want to use the h1 tag to be “shirts” for all pages showing a shirt you have for sale.  In this case, “shirt” doesn’t give the reader any specific information, and search engines will have nothing to differentiate each page.

They should NOT be Used in Headers or Footers

Heading tags are for the text body of your website pages only – they should not be used in sections common to multiple pages on your website, such as your headers and footers.  Similar to the shirt example above, the information in your header and footer is not unique to one page and thus should not be highlighted with header tags.

They should NOT be overused

Another thing to keep in mind when using heading tags is to use them sparingly. Heading tags are meant to be used to create structure and hierarchy, and helps readers and search engines navigate your page. Overusing heading tags can actually make your document more difficult to read by website visitors and will confuse search engines as to what your page is about.  

How to Use Heading Tags Correctly

Now that we’ve covered the basics of heading tags let’s take a deeper look at how to use them correctly.

Use Heading Tags for Headings and Subheadings Only

Heading tags are used to indicate headings and subheadings. As we mentioned above, the h1 tag should be used for the main heading of a page, usually the title.  The h2 tag should then be used for major headings, and the h3 tag used for subheadings.

If you have additional subsections, you can use the h4 – h6 tags. Just make sure that you’re using the heading tags in a logical order and don’t skip over a tag.

Use Heading Tags to Help Readers Navigate Your Content

Remember that heading tags are for BOTH search engines and your website viewer. When you’re writing your headings, think about what someone who is skimming your content might be looking for.

Your headings should give readers a clear idea of what each section is about, so that they can quickly find the information they’re looking for.

Keep It Simple

When it comes to heading tags, less is more. Don’t stuff your headings with keywords in an attempt to game the search engines – this will make your content difficult to read, and it’s likely to do more harm than good.

Focus on writing clear, informative headings that will help people read and navigate your content, and will be clear to search engines as to what your content is about.

Use Heading Tags Consistently

Finally, remember to be consistent in the way you use heading tags. If you start using <h3> tags for your subheadings, don’t switch to <h2> tags halfway through. This will make it more difficult for people to navigate your content, and it will give the impression that you’re not very detail-oriented.

If you’re not sure which heading tags to use, a good rule of thumb is to work from the top down. Start with <h1> tags for your main headings, and then use <h2> tags for subheadings. Only use lower-level heading tags if you need them – don’t skip ahead.

Example of Heading Tags – Using this post

As I wrap up this blog post I wanted to give you an example of what the heading tag structure of a document would look like – so what better example to use but this very blog post!  So here is the heading tag structure for for this blog post that you are currently reading:

  • h1: Heading Tags … What are they and how do you use them correctly?
    • h2: What are Heading Tags?
    • h2: Some things Heading Tags are NOT
      • h3: They are NOT for Text Formatting
      • h3: They are NOT for repetitive headings
      • h3: They should NOT be used in headers or footers
      • h3: They should NOT be overused
    • h2: How to Use Heading Tags Correctly
      • h3: Use Heading Tags for Headings and Subheadings Only
      • h3: Use Heading Tags to Help Readers Navigate Your Content
      • h3: Keep It Simple
      • h3: Use Heading Tags Consistently
    • h2: Example – Using this Blog Post
    • h2: Conclusion

Conclusion

Headings are essential for navigating a document – they tell the reader what they’re going to read next and help search engines understand what your content is about.   

Knowing when to use a heading tag is vital 

  • h1 heading tags – used once on a page, typically for the page title
  • h2 tags – use for major headings or subjects that your website page is about
  • h3 tags – use for sub-topics with less importance than those marked as h2s; 
  • h4 thru h5 heading tags are used with decreasing levels of importance.  Use them as needed for your content, keeping in mind that the larger the number the less important the content is considered.

Following these simple guidelines will help you make sure that you’re using heading tags correctly. By taking the time to structure your content clearly, you’ll make it easier for both people and search engines.

That’s it! Now you know how to use heading tags correctly. Use them to give your readers a better experience, and your content will be much easier for search engines to understand and index.  

Like this article?
Check Out these Blog posts!

Picture of inside of a disk drive

3-2-1 Backup!

Websites have one HUGE advantage over all social media options – you own your website, while your account on social media you are reliant on a huge company that can all of a sudden change the rules on you.

Read More »
Colorful Geometric Question Mark

Why Having a Website is Essential

Websites have one HUGE advantage over all social media options – you own your website, while your account on social media you are reliant on a huge company that can all of a sudden change the rules on you.

Read More »