This Daily Golden Nugget is 4th in a series about HTML 5 issues that the jewelry store owner should know. This topic, and the previous Nuggets this week, are not too technical so please read through them all so you and your website are prepared.
Today we are going to explain the difference between the 2 different ways you can italicize words on your page, and give you solid examples that you, the jewelry store owner, will understand.
As an introduction, let's begin with the tags themselves. We have the "Italic Tag" and the "Emphasize Tag," and in their default functionality both will make words italicized on your web page.
Here's what they look like:
<i>Art Nouveau</i>
<em>Art Nouveau</em>
So why are there two ways create italic text?
The original <i> tag was created by the web browser companies a long time ago. It was technically not officially part of HTML, but was widely adopted and eventually accepted as part of the HTML standards.
The official method to create italicized words was by using the <em> tag, and even though typing the letter "i" is about the same as typing "em" the usage didn't really catch on amongst web programming neophytes, perhaps because the usage was mired in misunderstood usage.
Within the HTML 5 specification, we've been given directions how to use these tags, and we're taking those directions and giving you specific <i> and <em> examples below. Let's first start with the basic directions.
<i>words</i>
Use the <i> tag whenever you need to identify technical terms in your writing. You could also use it to indicate words in another language.
As an example, let's examine this description of bezel settings:
A bezel setting is a type of diamond setting
that wraps the diamond completely in a ring
of metal around its girth instead of using
thin prongs to hold the ring.
Let's consider the words "bezel" and "prongs" to be the technical terms in that above description, and we want to tell the search engines that they are important technical terms. Here's how we would do it:
A <i>bezel</i> setting is a type of diamond setting
that wraps the diamond completely in a ring
of metal around its girth instead of using
thin <i>prongs</i> to hold the ring.
Your readers will see the words "bezel" and "prongs" in italics, and as the search engines start to recognize HTML 5 techniques, they will understand the SEO intent shown here.
<em>words</em>
Use the <em> to stress the importance of this word over all other in the sentence. The <strong> tag also represents importance of a word in a sentence, but <strong> indicates paramount importance whereas <em> just indicates more importance than the word next to it.
Here's our example of correct usage.
The vintage jewelry shown in this
photograph is from our Art Nouveau collection.
The Art Nouveau style is also known as
"Victorian" or "Edwardian" and has flowing
style commonly showing floral and natural
themes presented in natural colors.
In this example the important phrases for a jeweler are "vintage jewelry" and "Art Nouveau. Let's use the <em> tag to identify those important words like this:
The <em>vintage jewelry</em> shown in this
photograph is from our Art Nouveau collection.
The <em>Art Nouveau</em> style is also known as
"Victorian" or "Edwardian" and has flowing
style commonly showing floral and natural
themes presented in natural colors.
For the reader, they will see the word "vintage jewelry" and the second occurrence of "Art Nouveau" in italics. Even though the phrase "Art Nouveau" is important to your SEO, you do not want to <em> tag both occurrences. This presentation is probably consistent with how you would say this aloud to a customer in your store.
In all your SEO techniques, you never want to over saturate a single page with the same keywords or SEO techniques. Overdoing your SEO on a single page is known as "Over Optimization" and it has a negative effect on your ranking results. Tagging both "Art Nouveau" phrases would be over optimization.
We have to reiterate what we said yesterday about new content management systems available you. All new CMS will make assumptions and could work against your SEO efforts by inserting <em> everywhere when you actually just need to use the <i> tag.
Don't let your CMS decide when to <em> and when to <i>; instead, figure out how to control it on your own. Ask for help from your website company if needed.
Make sure you start using these correctly now. We expect your SEO ranking will thank you for it.
