WordPress School: Headings

Many people will tell you that the images you use in a published post are the most important visual elements on a web page. Don’t believe them. It is an HTML content tag that is often overlooked that is the most powerful visual element on a web page: the heading.

At this point in Lorelle’s WordPress School free online course you should have written and published your first post and working on the second post, the tutorial, in an article series featuring a minimum of five posts. On that unpublished post, which we will work on this week and into next, you will have added lists and today we are working on headings. As we progress forward with the second post, you will be learning how to add images, bold, italic, links, and other content elements in WordPress.

Headings are section titles in an article. They are usually bold and slightly smaller than the post title font. They may feature some graphic design element depending upon your WordPress Theme’s design.

Headings break the content into digestible chunks, keeping related content together. They also serve to pull the reader’s eye through the content as they search for the information they need. Headings also add whitespace, blank space that adds space and room for your content to breath and rest in.

Think of headings as part of your article outline, a visible section title that helps the reader know where they are in the reading order of the article.

Headings are the second bit of HTML you need to learn in web writing. We’ve learned about the HTML in making an ordered and unordered list, today we learn about the basics of heading HTML tags.

The Heading HTML Tag

HTML tags wrap around content on the web to hold the content within the architecture and design of a web page. HTML tags open and close to indicate when the style starts and stops.

You may not see it on your word processing program, but under the hood, it does the same thing. When you make a word bold, it inserts a bold opening code, and when the bold stops, it closes the code with instructions to stop making the text bold.

Web pages were developed to follow traditional writing and publishing media. Every article, document, report, essay, thesis, all start with a title and sections within the document are separated with subtitles. Headings are subtitles.

In the beginning of web development, heading tags were to be sized from large to small font sizes represented by the number in the HTML heading tag. The number 1 was the largest, 2 second largest, 3 was smaller, 4 even smaller, and so on. The numbers range from h1 to h6, though few WordPress Themes design past h4 today.

Today, headings may be styled in many ways all dependent upon the WordPress Theme styles and designs. This causes some challenges, which we will discuss later in this assignment.

The HTML heading looks like this in HTML:

<h2>This is a Heading Tag</h2>

How to Add a Heading in WordPress

On a post or Page, headings are set with the formatting button on the second row of the toolbar in the Visual Editor. They are hand-coded in the HTML/Text Editor.

To create heading:

1. Type the section title and select the text for the heading.
2. Use the formatting toolbar to click the formatting button on the toolbar that says Paragraph by default, and choose h2 or whichever is appropriate.

How Many Paragraphs Before or After a Heading?

Headings are subtitles or section titles in an article, so how many paragraphs should be in a post between headings?

In general, one or more. There are no rules that say every section must have a minimum of X number of paragraphs. It may have one. It may have 20. It is about outlining the content, breaking your post into sections for the ease of the reader, allowing their eye to jump to the section of most importance.

Choose from h1 through h6. The HTML heading tag goes from largest at h1 to smallest at h6, though your WordPress Theme designer may have made other design decisions.

Few WordPress Themes feature styles for all the heading tags. For instance, your Theme might not use the h1 heading as that is reserved for the post title, generated automatically in WordPress. Or the h1 and h2 might be exactly the same. Or they will have designed the first three headings and nothing after h3, assuming no one would use anything after that.

WordPress Themes are not always designed in a way that makes an author comfortable with the font sizes and styles on their articles, so use your best judgment. Generally, don’t attempt to jump around too much with the order of the heading tags.

What You Need to Know About Using Headings

While everyone has their own writing and presentation style, the following are general guidelines on how to use headings in your site’s content.

Choose the appropriate heading. As stated, an article should flow from the heading number one down and back up again if necessary, but it doesn’t have to. Think about your reader. Their expectation is that the larger heading is the main section, and smaller sizes are the subsections in an outline form. They will move through the article and back and forth in the seconds accordingly. Guide them with wise heading size and style choices.

Do not use bold to create a heading. And do not add bold to a heading, simply have the heading tag wrapped around the words. If you have, go back and fix it. Use the heading tags to be in compliance with web standards. Content within heading HTML tags score slightly better than content outside of them for search engine page ranking (SEO or SERP).

Do not bold within headings. Many people will use the headings like they use bold, adding emphasis in the middle of a paragraph. Headings are designed to be on their own line and not within a paragraph. Depending upon the WordPress Theme styles, the heading will look really odd in the middle of a paragraph. Experiment to see what it looks like and you won’t do it again.

Use title caps in headings. In general, all headings are title capped, the first letter capitalized. If the WordPress Theme uses all caps or forces lowercase, don’t force the styles in the headings. If you change Themes, you will have to change all the headings. Just write them properly and let the Theme do what it will.

Do not include links in headings. While some popular magazine style sites put links in headings, don’t do it. Links are not meant to be in headings and often confuse people. They won’t click it because it doesn’t look like a link, but a section heading.

Headings may feature numbers for order. If you are using headings to structure a tutorial article, the headings may feature numbers such as Step One: How to Select a Needle and Step Two: How to Prepare the Thread for the Needle, etc. Or you may use numbers such as 1. Choose Your Needle and 2. Choose Your Thread. Use this judiciously.

Headings don’t need to end in a period. Punctuation such as exclamation points and question marks are fine, but headings are not sentences but titles. They do not need ending punctuation. Save the exclamation points for really exciting news and shouts. Adding to the emphasis already found in most WordPress Theme headings is usually overkill.

Headings are not paragraphs. Headings are subtitles, a few words giving the reader a hint as to what is to come. Headings are not for large bodies of text as it makes it hard to read.

There are so many ways people use headings that are so wrong, really wrong, not even close to right. Headings are design and contextual elements that guide a reader through the content. Used wrong and it can break the content design. Used wrong and you’ve made work for yourself when you switch Themes. Used wrong, it makes the reading of your content by screen readers and other devices for accessibility horrible.

Done right, headings are a win for everyone, helping them read, consume, process, and share your content with others with joy.

Assignment

Your assignment today is to add headings to your second post, the tutorial. If you would like to do so in your first post, edit that post and add them.

Begin by testing your WordPress Theme’s heading designs. Your test site should be set as the Twenty-Eleven WordPress Theme.

Write several paragraphs and add a heading between each one, starting with one and going to five or six sizes. Save as draft and preview the post to inspect the heading styles.

You may not like them, but don’t change them. We are using this WordPress Theme for the first part of the course for consistency and learning its powerful features. You will be changing Themes later in the course so don’t force any styles upon the content to save you from changing it later. Just examine what the Theme does with the heading tags and make decisions on which to use or not use as you create your headings.

Add headings to the second post, and first if you wish. Find good breaking points to place section titles to guide the reader through the lesson.

Choose the heading size based upon the importance of the points you are making, main headings, subheadings underneath the main section, etc.

Remember to not use bold, links, or style the headings. Just let them be simple.

Your second article should now feature headings and at least one list. It’s starting to take shape and you’ve learned some important content elements in WordPress.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism

---