how to set off your content with headings

(This is the first in a series of client tutorials, which I hope others may find useful as well.)

When I hand off a completed website to a client, we sit down together and go over how to use their shiny new site. One thing we always go over, but which I think makes more sense once they’ve had a chance to settle in, is the styling that’s been built into the website. Many clients who have had sites for a while are used to making things stand out, or creating faux headings, by making text bigger, bolder, or different colors by hand. This is problematic, however, if they ever want to change the overall fonts or colors on their site, because then they have to go back and change all of those, again by hand.

The better way to do this is to use headings and other style elements that are already built into their website. These are all handled by code and aren’t unique to WordPress; they’re very common. Here is one of the big ones I share with my clients:

Use Heading Tags to Break Up a Page

A lot of times, we need to break a page into sections, and we want to do that visually. We’re all familiar with the concept, if we have done many papers in a word processing program. Online, though, they’re not called things like “title” and “subtitle”, but “Heading x”. On our website, we have six kinds of headings available to us, numbered 1-6. If you work primarily in the visual editor, which is where my clients are usually most comfortable, you will need to click the “kitchen sink” button to see all of the styling options available to you:

I’ve highlighted the new dropdown menu–the default is your paragraph styling, but if you click it, all of the heading and some other options are available to you.

The <h1></h1> heading tag is one that I tell my clients never to use. It should only be used once on a page, and it’s set aside for the title of the page or post. However, use the others as needed, like I did in my section header just above. This is what it looks like in the text editor, which shows you the code behind all of your text:

<h2>Use Heading Tags to Break Up a Page</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

(If you are brave and work in the text editor, always make sure that you close your headings! The final “/” in the heading closes it out: </h2>.) They do live in a hierarchy, so all of the code looks quite similar, even if the end result looks different. You can make each heading class look very different–a different font, font size, color, make one bold and one italic, etc. Usually, I keep it pretty simple, but depending on the client and their needs, we may play with them and have a little fun. The beauty of it is that if you want to change how these headings look, you only have to change it one time in your main stylesheet and they’ll be automatically changed everywhere they’re used on your site!

If you look around online at websites of professional bloggers and content creators, you’ll see they use headings frequently and often. Headings help readers know that something important is coming, and they also tell search engines the same thing. So make sure that you use the heading code, but also that you make sure that the words you put into the headings are relevant, too.