H Tags and Font Sizes Demystified

H Tags and font sizes demistified
You asked us:

There seems to be only Heading 1, 2 etc and paragraph on a WordPress Blog.

What about if we want to use say, a size 14 font. How do we do that?

And for SEO (Search Engine Optimisation) purposes, which heading sizes do you use where?

 

What are H Tags (Header tags) anyway

This whole thing of Header Tags and font sizes confuses lots of us. And not just on WordPress either.

Personally I think it’s one of those things that technical people unconsciously make more confusing than needs be. However..

They are simply the easiest way to divide up your WordPress post.

A road map, if you like.

Here’s the technical bit:

H tags are the html web coding that format the headings on a web page.

Uh oh! Right, so that’s now clear 😉

This is what they look like on a WordPress site in the text editor. So now you know what I’m talking about?

 

H Tags example

 

 

And why are they important?

Good headings express the general idea of the content below them so that

  • it’s easier for the reader to read the article, particularly these days when so many people ‘skim’ read.
  • using the proper heading hierarchy (= organisation) on your web pages adds to the legibility of the web page,
  • it improves your search engine optimization (SEO) by getting an idea of what your post is about (more on this in a minute)

If you were to take out all the words and just leave the headings, does
the resulting table of contents type layout make sense?

This is the goal of using heading hierarchy properly.

 

What font size do Header tags correspond to

This will depend on a number of things such as your browser settings but you won’t go far wrong if you use these as a guide.

H Tags and font size equivalents

 

 

How to use the header tags correctly

These H Tags are meant to define headings in the page, not to format just any text on the page.

The H1 header tag should be used as the main title tag of that page. In most cases this  will be it’s heading .

Heading 1

The title of the article would be using the H1 tag

Heading 2

Each main section of the article would use the H2 tag

Heading 3

Now if you had sub sections within the main sections the first one would be heading 3.

Here’s an example of what this looks like:

H Tags in action

 

 

 

 

 

 

 

Heading 4, 5 and 6

If your sub section required further headings, then the first one after heading 3 would be heading 4. The next heading within this subsection would be heading 5. The next would be heading 6.

So the heading hierarchy runs in descending order of importance – H1 tag to H6 tags.

It is OK to mix up heading levels, but what makes it difficult to read is when you go from heading 2 and it’s subsection uses heading 4. The reader will wonder what happened to heading 3.

What is not good practice is to use the Header tags to style certain elements of a web page. For example – Call us on 543 22986 – and then format this number using a H1 tag.

Or when people put an entire paragraph in an H1 or H2 tag to highlight the text.

You may think that this would be good to do on a sales page or a landing page to emphasise some text, but it’s not.

In this case you should either just format the paragraph in Bold, or go into the guts of the site and change the html code. Who wants to really do that?

Can I change the font size on my blog post or page

This will depend on the theme that you’re using on your WordPress site, but in principle, yes. There are a couple of ways to do this.

  1. You would need to go into the CSS file of the theme of your website. Now if you needed to click on this link to find out what CSS is, then I would suggest that you leave the font size as it is or get a web designer to change it for you 🙂
  2. Use a plugin called Ultimate TinyMCE
  3. You could change the font of the body text on your posts or pages. And indeed the headers.

We show you how to do this in the latest issue of our Graphics Magazine – you can take it for a test drive for 30 days by clicking on the link here.

The one thing not to do is to format the entire post,
nor indeed one paragraph using Header tags.

Headings and SEO

You may be asking what value do headings have for SEO?

Well, some people feel that the value is less than it was, but headings still help Google to grasp the main topics of a long post.

As mentioned, Google might scan your post as well and why not make that as easy as possible for it to do?

Here’s a recent post, May 2014, that gives more information on the importance of H Tags.

 

What to do next

Hopefully this has now cleared up any confusion on using the H Tags. If not you must let us know in the Comments.

In the meantime why not:

  • Look at the top 10 most popular posts on your Blog
  • Check through how you’ve used the H Tags on those posts.
  • Change any formatting where you’ve used the H Tags incorrectly.

If you would like to be able to easily change the font of your Headers and body text on pages and posts, we show you how in our latest Masterclass Tutorial in Issue 5 of DIY Marketing Graphics Magazine.

Caroline

 

 

 

 

DIY Marketing Graphics

 

 

About The Author

Caroline Jones

I'm Caroline and I look to help small business owners create their own graphics by writing tutorials and tips on graphics editing software. I live in Wales , love Tartan and Coffee Ice Cream. You can read more about me here

404