Basic HTML For SEO – Part 4, Format That Text
TweetThere are a multitude of tags which go in between the <body> </body> tags. Of those, there are some which will affect your optimization more than others. The ones which govern text formatting are critical to understand, so let’s go over those now.
In the process of determining relevancy, search engines look very closely at the text of a web page. Words which are highlighted in bold or a larger font are considered more important. So, it’s important to make sure your section headers are in bold face or in text that’s a little larger than the other text immediately before and after.
With all of these tags, the text between the opening and closing tags are affected by them. So if you want to make some text bold you’d set it up like this:
<strong>Bold text here.</strong>.
And the text would look like this: Bold text here.
Let’s get into some tags, shall we?
<b></b> and <strong></strong>
Both of these tags cause the text in between them to appear as boldface. If you look at the source of this web page, you can see “strong” is used, but “b” would make the page look the same.
The World Wide Web Consortium (W3C), which governs the standards of web page tags, tells us to use “strong” instead of ”b” because “b” is being phased out. To me, that’s a compelling enough reason to use “strong.”
<i></i> and <em></em>
I’m totally against using italics in web page text. I find it hard to read and somewhat distracting. That being said, if you really want to italicize some of your text then “i” or “em” are the tags you should use.
What’s the difference between them? This is another case of the W3C making a change. In this case “em” is the recommended tag to use.
<p></p>
This tag is used to denote paragraphs. This is a very commonly used tag.
<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>
These are “header” tags are are recommended to be used for headers only. “h1″ is the largest header and “h6″ is the smallest. These tags will not only increase or decrease the size of the text, they will also make the text bold. I don’t recommend using these tags just for bold because these are meant for headers. If you want bold, use the <strong> tag described above. Here are examples of how these tags look:
This is h1
This is h2
This is h3
This is h4
This is h5
This is h6
<font></font>
The “font” tag is an all-inclusive tag which allows you to manipulate text in many different ways. By adding modifiers like “size,” “face” or “color” you could change text very quickly and easily. Here’s how it might be used:
<font size=”2″ color=”red” face=”Ariel”></font>
The W3C recommends not using the <font> tag because it is also being phased out.
<u></u>
This tag causes the text to be underlined. This is another tag I highly recommend not using. This is because most people are going to understand underlined text as being a link. If you create underlined text which is not a link then your visitors might get a bit frustrated clicking on stuff that doesn’t work.
This is another tag which is being phased out by the W3C – just another reason not to get into the habit of using it.
What About This Old Stuff?
Now, you may be asking yourself, “Why are we reading about all these tags which are being phased out?” and “What’s replacing all this phased out stuff?”
I’m glad you asked that, because there is a new way to control everything on a web page, including the text, and this is the Cascading Style Sheet (CSS). CSS is a whole subject unto itself, so I won’t go into too muchdetail here.
Cascading Style Sheets – The Very Short Version
Even though CSS is the new way to control web page elements, tags are still used, and even the ones being phased out are still understood by browsers and rendered properly for the most part.
You can see an interesting example of how CSS can be used to modify how a page looks. In your CSS you can specify certain attributes or “classes.” In addition, you can modify standard tags as well. You may notice, depending on whether your on the site or via an RSS reader, the example for the <h5> tag above appears in red text. The text is also larger than the <h4> text even though it should be smaller, but larger than the <h6> text. This is because the CSS for my WordPress theme modifies the <h5> tag to appear red to the web page viewer. The CSS overrides what the tag would normally do.
Again, CSS is whole subject unto itself, but suffice to say CSS is a great tool for maintaining the look of the pages within a web site.
