Get it All
Together

Search Engine Optimization gurus and tourists alike understand that the semantic markup of webpages is the single most important aspect of long-term, site-wide optimization of web pages. If the bot can’t read it; if the bot doesn’t understand its significance, then the bot won’t properly index it. And making sure that you use <h1, 2, 3, 4> tags to highlight important concepts in an article is a key to calling attention to your content.

So, why not go the extra mile and make sure your headings are as stand-out to your audience as they are to those bots you’re always trying to attract? This article is just a quick tip (or suggestion, if you like) for making your content a little more clear by letting your headings break outside the borders of your articles:

This is an example of breakout headings, standing off the left margin.

This is an example of breakout headings, standing off the left margin.

As you can see from this sample of one of my blogs, there are three levels of headings represented. The H1 tag is in the title, and as you can see, it is about forty pixels farther to the left than the rest of the text. The H2 and 3 tags are about thirty pixels from the left side. To the less experienced designer, this idea may at first seem wasteful: there’s a very large margin to the left of the main body of text that could be used up. To many, it may even seem like it has to be used up.

But often the most important thing about layout is not what you put on the page; rather, it is the space you leave alone. By leaving space to the left margin of the text, we open up the page and prevent it from looking “claustrophobic” and crowded. The same is achieved by keeping a solid distance between the headings and the text. Further, the text is fully justified to keep the left and right margins as consistent as possible. This adds predictability to the space which lessens eye strain and brain processing, making the text much more readable, overall.

And then of course, there is the indentation of the headings! By making our headings stand out from the rest of the text, we create sign posts for our audience. Once again, this is designed to affect to changes on our content: one is to allow readers to more easily find the content they’re looking for and understand the organization of our data; the second is to lessen eye strain associated with doing this sort of scanning process, which is quite common when reading on the web.

Getting Your Breakout Headings in WordPress:

There are lots of ways of going about getting this look in a WordPress template. One would be to make your <p> tags always have a margin of 40px. The problem with this is if you want to use paragraphs anywhere else but in the body of a post, you may not like the effect and be forced to write another CSS class to compensate. You create a .postbody p {} tag, but here again, if you need to make adjustments to your page, you’re going to run into problems. Plus, what do you do about the<blockquote><ul><ol> and <embed> tags? Separate entries for each?

The best way to apply a margin is to apply it universally to the container itself, hypothetically .postbody. If you do this, how do you get the indented headings?

The answer is to apply negative margins to the headings:
[code lang=”css”]
.postbody {
display: block;
margin-left: 40px;
}

.postbody h1 {
margin-left: -40px;
}

.postbody h2, .postbody h3, .postbody h4, .postbody h5 {
margin-left: -30px
}
[/code]
Now you have your universal margin setup to be consistent across all elements of your posts, and only apply the breakout CSS to the things you want to break out!