H Tags and Font Sizes Demystified

H Tags and font sizes demistified
ShareThis:
Facebooktwittergoogle_pluspinterest
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

 

 

ShareThis:
Facebooktwittergoogle_pluspinterest
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

  • Great post Ladies.
    A little tip I would add to this would be that if you have the wordpress plugin Jetpack (available with wordpress.com but also can be found in the plugins library for wordpress.org[self-hosted]) it features (amoungst other things) a Custom CSS (Cascade Style Sheet) editor. You can hover over the Appearance sub-menu in the backend of WordPress and select Custom CSS. This enables you to customise any tag which will override, (in general) the themes CSS file.
    Please note: if the themes designer has been a bit overzealous with the !important part of the style then you may not be able to override.

    This way if the theme ever gets update and you have not added a child theme your settings for the custom part will be preserved and it makes it safer to edit / reset back to normal.

    • Hi Neil – many thanks for the tip. I’ve always found Jet-pack a bit of a ‘Sledgehammer to crack a Nut’ and we do like to keep the plugins to a minimum. BUT this does sound very interesting so will check it out.

      • Jetpack is a little larger than most but I am an advocate of only using things when you need them. It also features traffic logging, contact form, visibility selection (ability to only show widgets on certain conditions, and more. If yoiu dont really use them then a smaller plugin is available to use for a custom CSS Editor I’m sure.

        People don’t seem to realise that WordPress core has thousands of plugins integrated and adds to them every update. So you may think you are not adding essentially to the “plugins” (integrated) every month or so when in fact you are! What you do need is to test the extra plugins as you add them to ensure there are no clashes and they are used / kept up todate.

        • Neil – when you say WP has thousands of integrated plugins, what exactly do you mean?

        • WordPress is build with plugins integrated into it, over 11,000 plugins have been integrated. Albeit they get more rigorous testing than some plugins before being allowed into the WP core itself.

        • Great article, especially like the table with the pixel sizes. Just what a blogger needs. I also like Jetpack as Neil says. Currently it contains the only WordPress Widget for a Twitter feed that I have found works on all of my blog sites to date…and I love being able to see all my page viewing data in one place.

  • Hi Caroline, Great article! Believe it or not I actually come across professionally designed websites that have used H1 and H2 tags for styling. I’ve seen entire paragraphs in H2 before now on sites that have been designed by so called professional web designers! Technically there should only be 1 H1 tag on a web page or post and as your article states, WordPress will usually take care of that by way of the article or page title. You can use as many H2 and H3 tags as needed throughout the post as subtitles. Personally I’d advise reserving H4, H5 and H6 for those things that you don’t really want Google to pay much attention to. Things such as Widget headers etc.

    • Hi Steve – I’m quite sure you do come across that. I’m not a web designer and don’t profess to be an expert in WordPress.

      BUT I know the things that irritate me (and obviously others) and that includes not having a measure that I understood to compare these ‘technical’ terms to – H1, H2 etc – LOL

  • Yep, agree with the others – simple & to-the-point.

    I’d add that when people select a theme for their site, it’s one of the most important things to check – the font sizes have to be either large enough or be adjustable. Too many tiny-font sites around 🙂

    • Henneke – you are so right. Our site here is due for a revamp later in the year..

  • Oh, thank you Caroline. Very nice explanation and something. I have a much better understanding now.

    • Hey Sheila! Glad to hear it my fried! 🙂

  • Super introduction, explained very well. Thanks

  • Love the simply and to the point explanation, Caroline!

    • Hi Ana – thank you. It’s tricky to keep things simple sometimes so I appreciate your comment.