Some HTML tags often draw confusion because of their similarities with other tags as well as the way in which they display and style content. Examples of these are blockquote, cite, strong, em or i. Each element has features and, though they might accomplish the same goal, they might be altogether really different. Knowing those differences will help improve the markup of some pages. We’ll concentrate on those important tags that are strong, b,em and i.
Conveying structure.
These tags, though small ARE important. They are actually more used than we would like to admit and their first use is to give better sense to the content. Putting a word in bold or in italics cannot mean anything else but that the word is important and that we want to draw the reader’s attention to that word. Well, the W3C has created the strong and em tags so that the markup can convey the same importance given to that word. This is the basic idea of it all. So the first thing you need to know about these tags is that b and i are presentational elements while strong and em are structural. This explains why so many web designers would be telling you to swap the use of b for strong and i for em.
How and why?
Big question now. How and why (and probably when) to use these. The question might sprout especially when considering the fact that the b and i elements are not deprecated. Let’s look at how the W3C defines these tags: em indicates emphasis and strong indicates stronger emphasis. Bingo, the answer has been here all the time. Both of them are a way to convey importance to a word or a text but there are 2 levels of emphasis here. This tells you when and why you should use them in your code though b and i would have the same presentational effects but will only be giving information on the fact that the text is in bold or italics or not.
But wait, there’s more to this. The use of those tags have an impact on the way screen readers and search engine robots see the content.
Accessibility.
In terms of accessibility, a screen reader uses the strong and em tags are emphasis levels. Screen readers will, as the W3C puts it, “change the synthesis parameters, such as volume, pitch and rate accordingly”. This surely nails it. If we were using b and i to have visual representation we can get to a higher level by using strong and em as they will be doing the same visual job while conveying the structure and working towards more acessibility.
Search engine optimisation.
This information should be used regardless of whether you’re using strong, em, b or i tags. These participate in search engine optimisation. How?
Simply by taking advantage of the human element in the search engine robot’s algorithm. Here is the general concept: if a word is set under emphasis, it means that the author wants this particular word to stand out of the rest to catch the reader’s attention. This might therefore be considered as a KEYWORD! This is how the strong and em elements are treated as conveying emphasis, therefore helping SEO.
However, don’t run over and start stuffing keywords in your content and emphasising them with half a dozen strong and em tags around them. You’d be telling the robots you’re spamming them.
One step further
Some extra points here. If you need to have presentational enhancements to your strong or em tags the common practice is to wrap a strong tag around an em tag like this:
<strong><em>This is the emphasised text</em></strong>
The problem here is that you are giving a level 2 emphasis to an already level 1 emphasised text. This would not mean anything in terms of structure though it will in terms of presentation. Let alone in terms of accessibility.
There is a solution to this: Cascading Style Sheets. Let’s imagine you need all texts in bold and in italics but still want to keep your levels of emphasis, you would style your tags like this:
strong {
font-style: italic;
}
em {
font-weight: bold;
}
Digging even more into this, you can add classes to those tags which will give you 4 visual presentations of emphasised texts while keeping the 2 levels of emphasis.
strong {
}
em {
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
You would be using them in your code as such.
<em class="bold">This is the emphasised text</em>
<strong class="italic">This is the emphasised text</strong>
A final word.
There you have it then. A full overview of the secret of the strong and the em tags compared to the b and the i tags. Any questions? Drop them in the comments!
