I’ve mentioned using headings in your post articles throughout these Blog Exercises. Let’s look closer at these HTML tags that help you structure and increase the readability of your blog posts.
Headings are HTML tags used to set the section or subsection titles within your blog posts. They divide your content into sections, but they also help to keep related content and concepts together.
Headings are not for every article on your site. They are used for longer articles, especially with those covering several points or concepts that should be broken up into sections.
Search engines look for headings within your web page code, matching the same or related words within the content, links, and post title. Matching terms helps with your SEO ranking and content Trustrank.
Screen readers for web accessibility changes the tone of voice slightly when encountering headings.
Most importantly, headings are often glanced at by readers before they dive into the content. The headings summarize the topics covered in the post, giving the visitor information quickly about the concepts within this post, helping them decide if this page has the answers they are seeking.
Headings also visually pull the reader’s eye through the content to the very end, guiding them through the article.
On WordPress, you can find the headings HTML tag feature on the second row of the toolbar of the Visual Editor. Click the Kitchen Sink button to reveal the second row of the toolbar. The first box on the left is the format dropdown menu. Select the text you wish to be the heading and click the menu to choose the appropriate heading size.
In the WordPress Text Editor, you will have to write your own heading HTML tags as they are not featured on the toolbar, though they should be.
The largest heading size is used for the section titles. The next size down is for subsections, creating an outline effect with the content, just as you would in a word processor for a report or newsletter.
Traditionally, the HTML heading tags in your post content area should begin with h1 and go down. I say “should” rather that “must” because some WordPress Theme developers and website designers do not style the h1 and h2 tags within the content area, leaving those for the blog title in the header and post titles. Check your Theme to see which ones work best in the content area. Each WordPress Theme and site design has their own styles for their headings. Some are just plain bold text and others, like on this site, may have graphics next to their headings. HTML heading tags can be a good place for a web designer to have a little fun by adding some color and design elements.
The heading HTML tag begins with “h” and is followed by a number. The larger the number, typically the smaller and less emphatic the emphasis on the heading font and styles. They are h1, h2, h3, h4, and rarely h5 and h6. In a web page that meets web standards, the order of the heading HTML tags is used in sequential order such as h1, h2, h3, h3, h1, h2, h3, h3, h4, h3, h3, h1, h2 rather than h4, h2, h1, h3, h1, etc.
Here are few more things you need to know about headings.
- A heading goes on its own line between paragraphs.
- Do not add bold, italic, or underline to headings, just let the Theme’s heading HTML tag do the job.
- Do not add images inside of heading tags. Put images within the content area as image styles and formatting may distort the heading styles.
- Avoid putting links inside of headings. They are not meant to be used for links, simply headings.
- Do not use headings to make text bold within a paragraph. It will usually mess up your content and make it harder to read.
- Let the text within the heading pull the reader through the content with hints and teases of what is to follow.
UPDATE: As usual, my dear friend timethief has put together a fantastic example of how to use headings with step-by-step instructions in “WordPress.com: Heading Tags from h1 – h6.” It’s a must read to help you understand more about how headings work on your site and with your particular WordPress Theme.
Your blog exercise today is to experiment with headings.
Begin by writing some content or using some Lorem Ipsum Dummy Content on a test post. Every two paragraphs or so, add a heading and choose from the various sizes. Preview the post to see how the headings look.
If you have not been using headings, go through some of your previously published posts and add them, breaking up the content into digestible chunks.
If you have been using them, keep going. You’re on the right track. Look for ways to improve their placement and wording to help readers.
Remember to include a hat tip link back to this post to create a trackback, or leave a properly formed link in the comments so participants can check out your blog exercise task.
You can find more Blog Exercises on Lorelle on WordPress. This is a year-long challenge to help you flex your blogging muscles.
Via Feedburner
Subscribe by Email
Lorelle on WordPress 
20 Comments
In technical terms, the reason for this is that headings are block elements, not inline elements like the emphasize (em) or bold (strong) tags, meaning they will usually take the full width of their parent container.
And this practice is crucial, SEO-wise1, since h1 and h2 are the first and most important “titles” the Google crawlers will be looking for while indexing your site. Using h1 and h2 within the content isn’t advised.
I just realized a few days ago that my theme uses h4 tags for post titles, an uncommon and possibly hazardous practice, since it will imply (to Google’s eyes only) that the h4 tags — the post’s title — is less important than an h3 tag that I might use within the content of posts as sub-headings. And as we know, headngs are more important than subheadings.
1. Not that I think that SEO matters too much anymore in today’s web, but headings and subheadings also hold a semantic significance in my eyes.
Using heading tags within a paragraph is definitely not cool. Good point. And you are right about WordPress Theme designers not styling the first one or two headings tags in their Themes, though this changed for many professional web designers and developers several years ago when it was found to be better.
Traditionally, h1 was the site name, h2 the tagline, h3 the post title, then h4 and sometimes h3 or h5 was for headings within the content. Today, to stick to a more semantic structure, h1 may be the site name, h2 may be the site tagline, but h1 (with a new ID) may be the post title and h2, h3, and so on may be used with the content area.
The key to this exercise is to know your headings tags, what they look like within your site’s design, and learn how to use them properly instead of forcing fonts to be a specific size in bold. Too many people treat their web pages like word processing documents, bolding and changing font sizes, not realizing that this is the purpose of headings. In WordPress, few people even know what the Kitchen Sink Button does, hiding the formatting options. 😀
Thanks! Good points.
I completely agree with you, couldn’t add more.
Hi Lorelle,
I accepted the challenge.
And exceeded the challenge as usual! LOL! Brilliant. Adding it to the post as a perfect tutorial. Thanks!
I’m so happy to hear you think my post was a useful one. 🙂
I don’t think you’ve ever done anything I’ve seen that hasn’t been useful! LOL!
Headings have a great roll in websites article which attracts the attention of readers quickly if the headings are so cute or headings are built by using traffic keywords. Headings should be summarize the topic covered in the post which helps the readers to get the concept of the article quickly.
Very interesting post! I will surely take care while adding headings to my posts.
Reblogged this on Blog of an e-marketer by Main Uddin.
Cheers for that Lorelle! “Do not add bold, italic, or underline to headings, just let the Theme’s heading HTML tag do the job.” good advice.
I’m trying to figure out whether I should start my heading levels in my posts with h2 because the post title itself is h1, (I used Chrome’s “Inspect Element” feature to view the source of one of my blog post pages, and I saw that the post title was h1.) What do you think? Should I skip to h2 or start with h1?
Depends upon your Theme. Some WordPress Themes feature only the post title styles for h1 or h2, or style h1 and h2 the same. Check out this post on how to build a sandbox post, download the text file and copy and paste it into a post, and preview it on your site. It will test all the CSS styles to help you see what the various headings look like in the post. Each WordPress Theme is different. Choose what visually works.
Your SEO will not be hurt if you start with h2 or h3 rather than h1 in the post area. Seriously. 😀
Thanks for the testing tool. I don’t worry too much about SEO; I also worry about screen readers, validity, compliance, etc. But I don’t worry about them often. I’m just obsessing on my blog right now, even though it’s been on WordPress for eight years, and I coded it by hand before that.
P.S. I checked out your article. Perhaps your work predates WordPress.com themes live demos. Perhaps it is necessary for WordPress.org blogs. I have a WordPress.com blog, not a self hosted one, so I’m covered. Thank you again, though!
Oy, I wish I could edit my comments instead of writing new ones! The last one I accidentally sent before I was ready. Anyway, a better example is Ryu Demo which, for some reason, is not easy to find from the link I sent you. I think most WordPress (.com anyway) themes work the same; using the link I posted in this comment, just replace the theme name ryu before demo with the name of another theme, and you should get the HTML Elements page for that theme.
Sorry for the multiple comments.
Because this conversation has crossed a couple of posts, I’m a little lost, but hopefully I can bring this together here to help you.
Headings are headings no matter which WordPress hosting service or Theme you are using. You use the heading tag appropriate for the point you are making and the design choices of the Theme you are using. The one I’m using currently starts content headings at h3. Another Theme I use regularly features the same styles for h1 and h2, so visually it makes no difference.
SEO doesn’t grade your site down for using an h3 over an h1. It does if you create headings in bold as they are not recognized as a heading but words in bold.
Web standards for structuring the order of headings is h1, h2, h3, h4, h5, etc., and it is within long held web standardization that the order “should” go h1, h2, h1, h2, h3, h1, h2, h3, or a similar pattern as opposed to h4, h1, h3, h6, h4, h2, h1, etc. But none of that matters to SEO. SEO says “Are the words in a heading? Do the same words in the heading match or are similar to other words in post tiles, post content, other pages on the site, on web pages linked to and from the site…” It doesn’t ask which one. That’s a design decision for the user. How big or how much visual emphasis should be on the header to help the reader read through the content easily, pulling them through the story or article.
The post sandbox article I recommended features ALL of the most common HTML elements, beyond what the demos offer, to help you see the visual distinction between the headings and all the other elements. Make your decisions accordingly. There are some articles I write and publish here that use only an h4 heading within the content area, others with h3 and h4, as they are my only options on this Theme. That decision is up to you. You won’t mess anything up no matter which heading you use, as long as you use headings to make it easier for the reader.
Glad you are so passionate about this, and I hope this helps.
Thank you, Lorelle.
What is the “pre” (between paragraph and heading 1) used for?
The <pre> is an HTML tag used for wrapping around preformatted code, HTML, PHP, web code typically. It is still used today, but rarely. Most code should be published using a WordPress Plugin or feature that adds “syntax highlighting,” presenting the code as code in a way that makes it easy to read.
As for “between paragraph and heading 1,” I don’t know where you are describing. A <pre> tag maybe used in its own paragraph, so to speak, and never in a heading.
6 Trackbacks/Pingbacks
[…] Blog Exercises: How to Add Headings to Your Post Articles […]
[…] Headings Blog Exercises: How to Add Headings to Your Post Articles The heading structure for your blog Emphasis in Web Design: How to Make Things Stand […]
[…] FAQ page is typically created as a single page with headings featuring the questions and the text below it answer each […]
[…] Blog Exercises: How to Add Headings to Your Post Articles […]
[…] HTML headings look different in size and style depending upon your WordPress Theme’s styles. Experiment to find the right heading styles for your lists. […]
[…] Headings visually divide up topics on a post, subtitles within a post to segment sections in an article. […]