Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 9 – Part 3 – Styling Content for Readability Using Headings and Lists

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

Optimizing Your Content with Formatting

Once you’ve got text in the editor, you want to start styling it so that it’s easily read. And not only so that it’s easily read but so that it also reinforces your search engine optimization. A couple of weeks ago, we looked at this Google Search Engine Optimization Starter Guide and we started off with improving your site structure.

What we’re going to do now is talk about optimizing your content because optimizing your content has something to do with the formatting.

Keeping Your Content Organized

But before we start with that, we should begin by talking about how to keep your content organized. Google prefers a page that is about a single topic. So if you want to talk about a bunch of different things and if they can’t be logically considered to be subtopics of a common topic then you probably ought to consider creating them as separate pages.

Focus On One Topic Per Page

In our case, we have case studies and those case studies you could put all your case studies together on a single page. But hopefully, each of your case studies is focusing on some specific aspect of your service. So it makes more sense to break those up into single topics where that case study displays certain aspects of your service.

Same thing is true with your service. You could have a services page and just have a long page describing each of your services. Or you could have a page like we have which is an index page for your services and then full pages about each single topic. Because a page organized around a single topic is a page that’s best organized for Google.

Creating Content for your Users

Having said that, the most important thing for you to take away from this is that you should be creating content primarily for users. There’s all kinds of conversation about Search Engine Optimization and how to drive traffic to your site and how to figure out what people are looking for and how to write content for that. And all of that is well and good.

It makes some sense to have a good understanding of what people are looking for when they are looking for your services. But if you’re writing content primarily to garner search engine results, the chances are, when it ultimately comes down to it, it’s not going to be an effective strategy.

What you should do is think about what your users want and need and make sure your content meets those needs. You shouldn’t be overly focused on whether or not the content works for Google. However, it still makes sense to keep it organized and to keep your pages about a single topic. So creating content for your users and for getting traffic through SEO aren’t mutually exclusive.

Using Heading Tags (H Tags)

Another thing to do is to use heading tags appropriately. When we say heading tags, what we’re talking about are HTML tags. And HTML has headings H1 through H6. And the way you use heading tags is to imagine that you are writing an outline of something.

Heading Tags and Outline Format

The title of that whole thing for your outline is your H1. The main points of that would be H2. The subpoints under that would be H3 and sub subpoints would be H4. And you’d use this H1 through H6 headings as a way of structuring your information.

Now that structure helps, again, Google understand what the content is about and Google places particular emphasis on these kinds of headings in terms of trying to decipher the actual content of the page. So the headings are significant in Google determining what the page is about.

An H1 tag is automatically added by Thesis to your Page title. So your page title is your H1 tag. And you’re never going to use another H1 tag on the page anywhere. You would never use an H1 tag in your sidebars and you’d never use an H1 tag in your footer. From a practical standpoint, never going to use an H1 tag. Everything is going to be H2 and below.

Assigning Heading Tags Example

Let’s look at the outline here that I’m teaching from as an example. In this context then, How to Build a Website with Thesis 2 Lesson 9 – Add Content To Your Site, that’s the H1 tag. Then the H2 tags would be using the WordPress Text Editor, adding text from other software, styling content for readability using headings and lists. Those are your H2 tags. Your H3 tags would be different views of the text editor, dashboard mode interface, full screen mode and you know, so on and so forth.

So you use that organizational system for determining what your headings are. And each of your headings then become descriptive of the content that follows. And that’s a compelling aspect of the headings, the heading tags represent the structure of that outline. So obviously, H1, you only use once and that’s the title of your page so you won’t use it again. Primary structure of your content is H2. Subheadings are H3. Sub subheadings are H4.

How to Add Heading Tags inside the Text Editor

Now the way you do that inside the text editor. Let’s edit this page. The way you add heading tags inside your text editor is to place your cursor on a line that you want to be heading tag although sometimes you need to select the words. And instead of paragraph, you would choose the heading. We’re going to pick heading 2 for this one. And then these are supposed to be heading 3 so these are subpoints of this point. So again, take heading 3. You know, Chrome is making me say this twice each time. I’m not quite sure why that’s the case. But you can always triple click the content with your mouse so it’s all selected and then choose the heading type.

Now you’ve got a heading 2 and a heading 3 tag. You can see that these actually are headings by coming over to the visual view. And you can see it’s got an H2. Actually, I want to get rid of the bold in this case. There’s no reason for my headings to be referred to as bold inside the page here because if I want my headings to be bold, I can say so in the Thesis styles.

We’re going to turn the bold off and now if we come back over and look at this, you’ve just got H2 around that. And then H3 and so on. And that’s how you set up the H2 to H6. It’s just simply by placing your cursor in this section and then applying that.

Applying Styling Just to Targeted Area

Notice that it takes the whole section. It can be the case that you don’t have a proper separation between these things. And when you make this change here, it assumes you want to make the change everywhere. So you’d make that heading 3 and it’s going to change that down to heading 3 and or make it paragraph tag. Okay, come on. Well, crazy. There we go, make it a paragraph tag.

The way to circumvent that problem is to make sure you’ve got a good paragraph break here. If you have a shift enter kind of break, that’s not a real paragraph break so if you come over to this \and change it to a heading… Chrome is misbehaving in that regard. I don’t know why that’s the case. But anyway, if that happens to you, when you’re trying to style one thing and it styles the thing below it as well, that just means you don’t have a break in between. Go ahead and give yourself another line break by placing a cursor in there and hitting enter and then you can style them separately.

Styled Text: Bold, Italics, Links

That is how to do the headings. Now another thing to keep in mind here is that Google also pays attention to things like bolded text, italicized text and text links.’ And so if you’ve got something that is important that should be emphasized then you should consider bolding it or bolding and italicizing it or italicizing it.

The text you are emphasizing should represent the meaning of the paragraph, right? You could emphasize a Word like free or something like that. But you’re probably better off if we’re talking about a specific topic in this paragraph. You’re probably better off taking that specific phrase that is significant for the content of that paragraph and bolding it or italicizing it or whatever.

And the way you bold and italicize of course, is just to select the text and you either hit bold or italic, that kind of thing. Google does in fact, pay attention to things like that in terms of determining whether or not something is of use.

Internal Text Links and On-Page SEO

The next thing to talk about is links because links are also very important in search engine optimization. We’re talking about internal links at this moment and the search engine optimization starter guide has a very good section on writing better link text.

You can see that kind of thing in play here on our site. So we’ve got some links here, right? And these are links to other versions of this class. There’s a link to the Genesis theme version, a link to Thesis 1.85 version. We use these links as ways of reinforcing what the page they link to is about.

When you have a link on a given page, it doesn’t actually provide value to that specific page. It provides value to the page it’s linking to. So in this case, this Thesis 1.85 link is telling Google that the page it links to is about Thesis 1.85. And that helps reinforce what the page that it links to is about.

Having a linking strategy is very important for your on-page SEO. You want to link from one page in your site to another page on your site with text that is descriptive about the content of the other page. And obviously, it needs to fit naturally into it. You shouldn’t just force it in and it doesn’t really help just to have a little list of links to other pages.

What you want to do is if there’s opportunity for you within the content is to be able to say something about something else on another page. If you can generate decent link text there and link off to it, you will be improving your search engine optimization for the site as a whole. Make sure to read that section in the Search Engine Optimization Starter Guide about what constitutes a good link because that’s going to be a very useful tool for you.

How to Add Links inside the Text Editor

The way you make a link in this case is you select the text and then come over here and click on the link. And then if you open up link to existing content you can come down and find one of your pages or one of your posts or whatever that you can link to. Select add the link and the link is made. It’s as simple as that. You just select text, click the link and choose an appropriate page for that link.

You can add a title, here for example, it could be “go to our testimonials page” or “read our testimonials”. And you can decide that the link should open up in a new window rather than taking them away from the current page. You hit add a link, update. When you view that page, these links are going to be active links.

What makes a good link text? Good link text tells users something about the page it’s being linked to. It should be short and descriptive and this is especially important for your for internal linking.

Styling for Readability

But we also want to style for readability. People don’t read web pages, they scan web pages. And so in order to make your page readable, what you should have is big headings that present the content structure like we discussed above. And then rather than having a paragraph about something, you should look for ways to maybe break that paragraph up into a list. And then you should use bold and italics to emphasize important text.

Then somebody who is scanning your page can get a good sense of what aspects of that page they feel like they want to spend their time reading. So good web pages have this kind of thing, appropriate use of headings, lists as well as paragraphs and emphasis on important text.

Never Use Headings for Styling

The first rule is never use headings for styling. If you get to this place where you say, “Oh, I want to emphasize this big piece of text. I think I’ll use an H1.” That is the wrong thing to do. Headings are not supposed to indicate style. Headings are supposed to indicate content. So never use headings for styling. If you want big text, use something else to style that but don’t use a heading for that.

Minimize Use of Inline Styles

Secondly, minimize inline styles. There are plugins that give you all kinds of inline styles that you could add to a page. An inline style would be taking something like this and change the color of it, say change it to red. That’s an inline style. And the reason we call it an inline style is because when you get to that place where there’s going to be this style, it enters an HTML tag here with a span and the color is specified directly inside of this.

The reason why you don’t want to use inline styles is because first, it can be very difficult to get out of. Let’s just say we take this and we turn it back to normal. If we come back over here, now it didn’t just stay normal, right? Now it says the color is 0000 instead of the red color that it was before. So it can be a real pain to get rid of once you’ve created it.

Secondly, it may seem like a good idea at the time to make this text purple. But as soon as you go change your color scheme, if you’ve made your emphasized text purple and you’ve changed this color scheme and purple no longer looks good, now you’re going to have go through every single page and find those places where you used that purple color.

And that, on a decent sized website, can be very time consuming and a total pain in the butt. So it’s much better practice to use a CSS style for that sort of thing rather than inline style. But let’s go ahead and update that so you can see it in operation anyway.

Don’t Over Emphasize Text (AKA Shout)

Next, don’t shout. I’ve got a client and every time she does something on her page, it’s all uppercase, all bold, all big colors, all exclamation points. In her entire page she might have 500 words but she’s shouting the entire 500 words. This is something I’ve entirely failed to convince her to change and she’s not here so she’s not going to be offended.

If you think about it from the end user’s standpoint. Nobody wants to listen to somebody hollering all the time. And if you emphasize everything then the end result is that nothing is emphasized. So don’t shout. Use your emphasis judiciously.

Keep Paragraphs Short

And don’t have long blocks of uninterrupted paragraph text. It may not be difficult to read but it’s very easy for a reader to skip over because for whatever reason, we are trained to skim. And if you’re really trying to convey a point, you’re not going to be particularly successful with it in long blocks of uninterrupted text. And so those are Rick’s rules to live by for styling content for readability on your website.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment