Skip navigation

Blog Exercises: How to Add Headings to Your Post Articles

Blog Exercises on Lorelle on WordPress.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.

Example of a post with headings. This example starts with the post title and features heading within the content.

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.

Example of headings within the post content.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.

Blog Exercise Task from Lorelle on WordPress.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 . This is a year-long challenge to help you flex your blogging muscles.


Feed on Lorelle on WordPress Subscribe Feedburner iconVia Feedburner Subscribe by Email

Copyright Lorelle VanFossen.

11 Comments

  1. Posted April 10, 2013 at 12:52 pm | Permalink

    Do not use headings to make text bold within a paragraph. It will usually mess up your content and make it harder to read.

    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.

    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.

    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.

    • Posted April 10, 2013 at 3:50 pm | Permalink

      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. :D

      Thanks! Good points.

    • Posted April 12, 2013 at 2:22 am | Permalink

      I completely agree with you, couldn’t add more.

  2. Posted May 8, 2013 at 8:27 pm | Permalink

    Hi Lorelle,
    I accepted the challenge.

    • Posted May 9, 2013 at 10:25 am | Permalink

      And exceeded the challenge as usual! LOL! Brilliant. Adding it to the post as a perfect tutorial. Thanks!

    • Posted May 9, 2013 at 12:17 pm | Permalink

      I’m so happy to hear you think my post was a useful one. :)

    • Posted May 9, 2013 at 1:20 pm | Permalink

      I don’t think you’ve ever done anything I’ve seen that hasn’t been useful! LOL!

  3. Mike Joe
    Posted August 21, 2013 at 7:23 am | Permalink

    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.

  4. BirdBrain
    Posted November 7, 2013 at 10:34 am | Permalink

    Very interesting post! I will surely take care while adding headings to my posts.

  5. Perfect BloggersTech
    Posted November 9, 2013 at 1:59 pm | Permalink

    Reblogged this on Blog of an e-marketer by Main Uddin.

  6. stakerdna
    Posted November 22, 2013 at 12:44 am | Permalink

    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.


6 Trackbacks/Pingbacks

  1. [...] Blog Exercises: How to Add Headings to Your Post Articles [...]

  2. [...] 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 [...]

  3. […] FAQ page is typically created as a single page with headings featuring the questions and the text below it answer each […]

  4. […] Blog Exercises: How to Add Headings to Your Post Articles […]

  5. […] 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. […]

  6. […] Headings visually divide up topics on a post, subtitles within a post to segment sections in an article. […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 19,709 other followers

%d bloggers like this: