Kathy Smith
Sr. Website Designer

Behind the Scenes, Part III: How the Search Engines Figure Out Your Website

All about h1, h2, h3, h4, h5, and h6 tags

Note – It is good for you, the layperson, to understand what is going on in your web pages and see if your needs are being met. Even if you don’t have the budget to hire a professional design firm and you are relying on website building tools, it’s valuable to know a little bit of HTML.

. . .

When you go to a website and see the title of the website on the home page or a title on one of the sub-pages, this is typically created with an h1 tag. An h1 tag helps both readers and search engines understand what the page is all about.

You can see where the h1 tags are by viewing your website’s source code. Just go to the page on your website that you want to analyze, click on the page with the right-hand mouse button and then select “View Source.”

The content can be further broken down into understandable chunks by using h2 tags. When coded correctly, H1 and h2 tags are used almost in a way that outlines your site’s information.

As an example, let’s think about a “products” page. Many businesses offer several categories of products and several products in each category. If I’m selling clothing online, I might have a skirts page with several different fashions.

So my page outline might be something like this:

  1. Women’s Skirts
    1. Long foldover skirt
    2. Tiered peasant skirt
    3. Ponte pleated skirt

In coding the site, it behooves me then to make the h1 tag say “Women’s Skirts” and then have three h2 tags for items A through C.

If I were working with a web page that had even finer granularity of an outline, that’s when I’d use the h3 tag. But in actuality, most web page content is OK with just the h1 and h2 tags. And if the page is really just about a single topic with no sub category breakdowns, it’s fine to just have an h1 tag on the page without any h2 tags.

So the code for this web page’s body section might look like this:

And this is what the page might look like.

Notice that in this code, we’ve used the img and anchor (<a>) tags to specify product images and links. I will cover images and links in the next blog. (To subscribe to our blog, click here.)

This example assumes that you have some means of editing your web pages in their entirety. Some templates and shopping carts do not allow the layperson to easily enter the desired code because these programs “build” the code for you making certain assumptions. And sometimes these programs are flawed. In these cases, a web developer with advanced programming skills may be able to help.

. . .

This is the third in a series of blogs about HTML for the layperson. Our most recent blog told how to make sure your website is search-engine friendly. Kathy Smith has developed more than 200 websites – everything from n-tier enabled applications to ecommerce to your friendly brochure-style website. She is senior developer at Lakenetwork.net, a website development company in Eastlake, Ohio.


about lakenetwork

Lakenetwork is a family-owned business providing website design and development for companies, professionals and organizations in the Cleveland, Ohio area and beyond. We specialize in providing the most cost-effective and appropriate solutions for clients’ online needs. We are located in Eastlake, Ohio.

Get in touch...