Welcome Guest!

Search

My Sites

Navigation Links

Copyright

All music on benbarden.com is free to share for non-commercial use only. Please see the music pages for more information.
All other content: Copyright © 2009 Ben Barden.
All Rights Reserved.

Blogging Guide > Unsorted Posts > Quick Tips: Use heading styles

Quick Tips: Use heading styles

< Benefits of organic growth | Unsorted Posts | What motivates you to change your site design? >

It's a wise move to break your posts into paragraphs, and include headers in logical places.  I've used a header below to show you what I mean.

Headers are good.

Your headers probably look completely different to mine, but that's not the point here.  This is a tip relating to the structure of your posts rather than how they look.

Sometimes, a header simply looks like bigger text, and you may be tempted to change the font size and make the text bold.  This may look the same, but there are a couple of differences.
  1. Search engines look for headers (amongst other things).  If you only change how the text looks without turning it into a "real" header, search engines will just see the text as part of your post.
  2. Visually-impaired users may be using a screen reader to view your site, and some people use text-only browsers.  A screen reader actually speaks the content of a page to a user, and if it's not organised with headers, the reading may not be split up as you'd expect with natural breaks.
So, how do you use a real header?  You have to set a heading style on the text you wish to turn into a header.

How to use heading styles in WordPress

I'm not a WordPress user, but I know there are plenty of people who use it - so perhaps this will benefit you.  When you're working on a post in the visual editor, there's a button at the end of the toolbar - "Show/Hide Kitchen Sink".

Heading 1

Click on that button and you'll see an additional toolbar appear.  Next, highlight the text you wish to turn into a header.  On the additional toolbar, there is a drop down list that should say "Paragraph".  With the text still selected in the editor, click on the arrow button to open the menu, then select Heading 2.

Heading 2

Lo and behold, you now have a piece of text that uses a heading style.

Heading 3

The strange thing is that I can't find a way to change the size of the text without making the text into a header.  Still, with any luck this tip might help with other blogging systems, too.

Comments on Quick Tips: Use heading styles

Posted by Marcus Hochstadt | May 30, 2008 07:11 | http://www.hochstadt.com/ | Marcus Hochstadt's profile | Permalink

Hi Ben,

Principally, you change the size of the text (and many other things) by modifying the external style sheet associated with your blog's theme.

Take care! :-)

~Marcus

Posted by sailor | May 30, 2008 19:46 | http://nice2all.com/ | sailor's profile | Permalink

The accessibility standards actually say 'use header elements to convey document structure and use them according to specification', but not many seem to worry about these standards anymore.

Apart from the accessibility issues, articles just look a lot nicer when they are broken up by appropriate headings etc.

As always, a nice article.

Posted by ettarose | May 31, 2008 00:47 | http://sanityonedge.blogspot.com/ | ettarose's profile | Permalink

As usual good tips. I can't help but read even if, like Wordpress, they don't pertain to me. You never know.

Ben's avatar
Posted by Ben | May 31, 2008 14:08 | benbarden.com | Ben's profile | Permalink

Thanks everyone for the comments. Sailor, welcome to my site. :)

To be honest, I had hoped there was an easier way of changing text size for those not familiar with CSS. Sometimes you do want to change the text size without using a header.

It's a bit like saying everyone must use valid HTML. I agree with the theory, but as long as browsers accept invalid code, there's not a lot that can be done to stop it appearing on the web.

Still, I can do my bit by writing articles like this! :)

* Required Fields. Email will not be shown.
Verification code
Type the verification message shown above. The letters are case sensitive.
Help

Rate this article:
(5 = Highest, 1 = Lowest)
Note: if you have already posted a rating on this page,
a new vote will not be added.