If you were to use <strong> and <em> tags in HTML5 the same way that you’re accustomed to, it would be fine. As many have stated, HTML5 is backwards-compatible with old-style trends in SEO, accessibility, and markup, so your pages won’t break or be considered obsolete or deprecated.
But that doesn’t mean that some of these elements aren’t evolving. One good example is the use of tags to make what we normally know as “bold” and “italic” text.
Here I describe some things to take note of when adding HTML elements that are usually associated “bold” or “italic” text.
(“strong” photo credit: Brian Lary)
The <b> and <strong> Elements
When coding sites with HTML4/XHTML markup, we have been encouraged to use <strong> instead of <b>. The <b> element has been kind of left in the lurch since we could style text with CSS, and add importance using <strong>.
Using CSS to give text a visually bold appearance and using <strong> to give text more emphasis (for SEO or overall content strategy) was the correct way. In HTML5 things are similar but slightly different. Now, according to the spec, the <b> element is used to make text “stylistically offset from the normal prose without conveying any extra importance.” So it no longer means “make this bold”. Technically, the letter “b” used in the element has nothing to do with “bold” anymore. You can use <b> for key words, the lead sentence in an article (the spec uses this BBC article as an example), or other text that should stand out from the rest, but that you don’t want to have extra importance.
The <strong> element, according to the spec, gives text “strong importance for its contents”. So the <strong> tag puts content into the context of a hierarchy (which is pretty much the same as what it was in HTML4). So if you have something wrapped in double <strong> tags, it will have more importance than something with only a single <strong> tag.
If this is too confusing, here’s a simple summary:
Use <b> when you want the text to have a different style without contextual importance, but use <strong> when you want the text to have extra importance from a content or SEO perspective.
The <i> and <em> Elements
In a similar way, the <i> element should now be viewed a bit differently. It’s not exclusively for “italicized” text (although it can be italic, that’s up to you). It now represents text that’s “in an alternate voice or mood, or otherwise offset from the normal prose” (which is really what italicized text is). Similar to <b>, it has no contextual importance in comparison to surrounding content. According to the spec, you can use <i> for taxonomic designations, a foreign-language idiom (for example, the phrase argumentum ad verecundiam), or even a dream sequence. And if I’m not mistaken, as is common, publication titles should be offset using (UPDATE: After further research on this matter, I realized that publication titles are now offset in HTML5 using <i> (although the spec doesn’t really give that as an example).<cite> tags, as explained here, so you wouldn’t use <em> or <i> for that purpose.)
The <em> element (similar to <strong>) is used to place emphasis on a portion of text. While <strong> is used for creating a contextual hierarchy, <em> is just a simple way of emphasizing something, the same way words or phrases would be emphasized colloquially. For example, in the phrase “The HTML5 spec really is hard to understand” you might emphasize the word “is”, so it reads “The HTML5 spec really is hard to understand”.
And again, if that’s somewhat unclear, here’s a simple explanation:
Use <i> to offset the mood of text, but use <em> to make text emphatic.
Why the Changes?
I hope I’m not using the argumentum ad verecundiam fallacy here, but in HTML5 for Web Designers, Jeremy Keith explains why we should embrace the evolution of these elements:
These changes … help increase the device-independence of HTML5. If you think about the words “bold” and “italic”, they only make sense for a visual medium such as a screen or a page. By removing the visual bias from the definitions of these elements, the specification remains relevant for non-visual user agents such as screen readers.
What do you think? Will this change the way you markup content? Or is this pretty much how you’ve been using these elements prior to HTML5?
Makes sense to me. Although I’m not sure how to explain all this to clients. They don’t seem to care for semantics.
I don’t really understand why you would even try to explain this or anything else relating to mark-up to your clients?
Most likely he meant in a case where you would want to “upgrade” a currently-existing website’s code.
It’s easy to implement without telling the client for a new website, but if the site already exists, and they like everything about it visually and functionally, you might have a hard time selling a code update to them based on the above information.
I am very confused to why anyone would offer or try and sell a client a code update and do it by explaining code to them. To be honest this sounds a little crazy. If you client is happy with the site visual/functionally then they will never spend money on the code, as they simply don’t care about code. As far as they are concerned the site works.
Me: “Hello Mr Client, Give me a £1,000 and I will recode your website in the latest HTML5”
Client: “What will be the benefit to me and my business?”
Me “Well nothing really but your site will be in HTML5. It will look the same and do the same!”
Also if the code of a website is that out of date/bad it requires updating then surely the design would require updating as well. In that case you could then recode the new design using whatever version of XHTML/HTML you see fit without ever explaining any code to your client.
I am just really puzzled why you would even try and explain code to a client. That likes me going to purchase a new TV and the salesman taking the back of a TV and talking me through the circuit boards inside as a way of selling it to me.
To say that there’s no benefit is not necessarily correct. If Google starts rewarding content in their search engine rankings that uses these new best practices markup, then there will be a definite benefit.
Also, you don’t need to revamp an entire website and charge so much money. If the site has been built properly, it’s just a matter of changing the doctype in one place and updating some tags.
Again, though, this may not yet be necessary because Google doesn’t yet (to my knowledge) reward content for using HTML5 or the new practices associated with old elements, but it could become a reality one day, and we’re certainly headed in that direction.
This assumes that a client relies on you to update their site. Remember, many sites using CMS’s give the client the ability to add, modify, update, and delete their own content. Part of that content IS html text. Just because they use the GUI of a text editor to edit their content does not mean that the GUI does not offer both <b> and <strong>, in which case they may want to know the difference and how it affects how their website is indexed.
It also assumes that none of your clients have their own blogs, for which you’ve created templates for them, and which may need updated to address whatever SEO concerns your clients may have.
For most clients, yes, this may be a little TMI…however, for clients who regularly update their own content, via a CMS, blog platform, etc., this information IS valuable and IS something that they should be concerned with, depending on the goals they’ve set for their site.
I get what you are saying but in my experience there are times when it becomes neccesary to try explain the technical aspects of things to clients particularly when they have read some article related to SEO or as was the case a few years ago with Flash where one had to try convince a client that building an entire site using Flash was not a very good idea.
Maybe I’m a little off-base here… but I thought it was good practice to separate style from markup. I mean, if you want to change the style of something to be bold or italic, shouldn’t you be using a style sheet? HTML is meant to mark up text, to give it meaning. If you’re writing HTML and not giving your data meaning, then why aren’t you using styles?
Yes, you are correct. But in this case, the “b/strong” and “i/em” tags are not being used to “style” elements; they’re being used to add strength, emphasis, or mood. Those aren’t style issues.
With these new descriptions of the elements, it’s not necessary for “b” or “strong” to actually appear in bold formatting. They could, but it’s not necessary. The “strength” or “mood” of the text is part of the content, so it should not be done in the stylesheet, but should be present in the markup for it to be (as Jeremy Keith says) ‘device-independent’.
So now, after years of implicitly dissuading web authors from using them because they were considered presentational, the reigning or likely future html specs are essentially reversing course. The
andtags have been imbued with a new “meaning” (under the rubric of “mood” or “alternate voice”) that goes beyond the “visual”, “presentation” or “style”. It has always been a challenge to distinguish between strength and emphasis, on the one hand, vs. presentation. The distinction between mood and presentation, if it exists at all, seems even more indistinguishable. Does text in a different color signify mood or is it presentational? Why don’t we begin reinstating thetag for the same reasons? Or? This all seems completely arbitrary.It’s not at all arbitrary. If I were to see something that stylistically is italicized, that does not implicitly mean what is italicized is emphasized. If I were blind and had to have something read the text to me, there is no difference in speech when something is <em> stylistically <\em> italicized, but we all know you say something differently if, in fact, the meaning was to emphasize the specific piece of text.
Also, bold is a typographic style, not an intrinsic linguistic differentiation. Once again, when saying something aloud, you can’t say something “boldly;” it means nothing, whereas strong is the equivalent of shouting or the like.
I should be able to look at your code with absolutely no design to it, and tell exactly what you were attempting to convey linguistically
Super. We’ll all code this completely arbitrary distinction into all of our pages so you and the other 1% of the world who can read our code without styling approve of it.
Jack, it’s not just for the 1% who can read the code, it’s for SEO purposes, for overall semantics, for document portability, for syndication, for future-proofing, etc.
Having these rules in place helps in all those areas.
I hope nobody uses <b> tags anymore
I do! In my eyes, “bold” has the same semantic meaning as “strong”. If something is bold it is strong, loud, emphasized, stands out from the crowd. All this rubbish about semantics annoys me – all arguments like “bold refers to the visual presentation” are completely moot with CSS, and in fact it’s the same argument that people use to encourage “strong”.
Also, “strong” is too verbose for my liking; “b” is shorter and quicker to type :)
Ok, I get how I relates to EM and how B relates to STRONG
but if you can use STRONG STRONG , then what is the relation of EM to STRONG??? How strong do you think the emphasis can be?
Why need separate tags if there can be hierarchy?
N.R,
“Strong” is for adding importance to a phrase within the context (i.e. surrounding content and text). So “strong” can create a hierarchy within the text.
“em” has nothing to do with hierarchy, it’s for giving emphasis. Like if I said “Go to your room! Now!”
The “em” tag in that example wraps the word “now” to give it more emphasis the way you’d give it emphasis when you actually read it. But it doesn’t add SEO or contextual importance like “strong” does.
I use b an i too. The difference between the definitions and the uses amounts to what we used to call “arguing semantics”, meaning using different words to say the same or similar things. There is no case that you mentioned about, where you could not switch the use of tags and argue your case for it’s use.
It’s quibbling. But I’m code by hand, so I’m all for shorter tags.
When SEO companies see this I suspect they’ll want to make everything double strong, killing any usefulness this may have.
How so? The hierarchy is only relative to its own page, not the web as a whole, so it doesn’t have an effect on SEO other than allowing finer control over content importance. There is no difference from an SEO standpoint between using all double strong tags and using all single strong tags. The only SEO benefit to be had from utilizing double strong tags comes from using them in conjunction with single strong tags as that is what creates the hierarchy and subsequently targets the correct content you want search engines to focus on.
To be honest, I kept using the
<b>and the<i>in HTML4/XHTML markup, after they had been declared as depricated. Depricated is not forbidden. Depricated means, that the semantic intension has changed and these tags were downgraded to a meaningless existence.I used them often as a
<span>element. For example, if I have a headline (<h...>) and want to change the look of some of its parts, I use a<span>. If<span>is already in use I can switch over to a<b>or<i>. I can be sure they have no semantic meaning and don’t add emphasis to these parts.The cited example of a BBC article doesn’t actually make use of the
<b>it simply uses a CSS class:<p class="first":gt;. I think that is how I will continue to implement this, as it seems a cleaner separation (to me).I’ll continue to use <em> and <strong> just like I’ll continue to put quotes around HTML attributes.
I’m struggling to see how this new implementation or definition of <b> is any different <span>. Span allows you to style text without giving it any semantic meaning, and that’s what <b> appears to mean here. Or am I misunderstanding?
This is one that I will agree with. But it seems like that’s an issue with the drafters wanting to continue support for a useless tag than anything else. The draft states an example would be “keywords in a description,” which I don’t think of as being any separate from a span class=”keyword”
Agreed emphatically (with semantic meaning).
And to all the hand-wringing earlier in the comment stream about “why would a client care about semantics:” I think that’s a basic client-education issue. If they’re concerned about SEO, or effectively selling something, or achieving a particular purpose with their website… they care about semantics, whether or not they’ve thought that through yet. (And if none of the above applies, why are they hiring you to do their site?) What a site says and how it says it are, obviously, important for all aspects of the outside world’s interaction with their site. Given that the “new” HTML5 rules are (arguably) clearer than the old rules, I would expect search engines to phase in evaluation using the new rules.
That being said, yes, the ‘i’ tag is one of the (several) smoking guns that remind us that HTML is going the way of the Microsoft Windows API: once something’s in there, no matter how obsolete it becomes over time, it’s damned hard to muster the leadership to get rid of it.
I realize that the debate here has largely been about the technical and SEO aspects, but what of the additional meanings historically given to italicized text.
For example, it’s customary to change book titles to italics, though it doesn’t mean they’re in an “alternate voice.” These uses of italics in particular are present in all kinds of fields as well.
I added a note in the article about this, because I had forgotten about the change in using “cite” tags. In HTML5, “cite” tags now replace “em” and/or “i” tags when you want to offset text as a publication title.
http://www.w3.org/TR/html-markup/cite.html#cite
I thought using
<cite>for citations had been a common option for around a decade. Here is one discussion about it from 2003.http://simplebits.com/notebook/2003/09/23/simplequiz-part-viii-titles/
Maybe I’m missing some important cases, but I’ve found that most things I want to present with italics already have semantic tags.
<cite> <q> <dfn> <var> and <em>cover a lot.For your “foreign language” example, you get better accessibility if you use the lang attribute… E.g.,
the phrase <q lang="la"> argumentum ad verecundiam</q>.More ideas for multi-language text, from 2006:http://www.alistapart.com/articles/worldgrowssmall/
And yeah. Resurrecting i and b to mean “different in amorphous ways from the context, with no implications for content hierarchy” seems like multiplying the span tag. I’m kind of “whatever” about it.
No, actually, while “cite” may have been discussed as a possible way to mark up a publication title, it was never described as such in the spec. See this article:
http://24ways.org/2009/incite-a-riot
In there, Keith says “the cite element has been redefined in the HTML5 spec” and goes on to give the definition, which says it’s for titles of publications, and not for personal names.
I have always used the <span> tag for an item I wanted to have a bold effect, which was not important for the search engines to pick up as being something as important or relevant as the <strong> tag has to offer.
Ok, you’ve said this is the case… but where is the supporting evidence from search engine providers?
There’s one thing that everyone in SEO (and Internet marketing in general) should know: what matters the most to search engines is purely the text content they can read (leaving aside backlinks and social signals). Google and others won’t be impressed and influenced simply because you bold or italicize some text, no matter how, B or STRONG, I or EM. Their algorithms are made to extract themes and meanings from documents, not rank them based on visual appeal. My 2 cents after almost 10 years of search engine optimization.
As I’ve explained earlier in the thread, these tags do not affect a site’s ranking in relation to other sites. What they do is help crawlers determine what the level of importance of certain content in relation to other content *on the same page*. Same with all other semantic use of elements, such as headers tags, they aide in the information hierarchy of a particular page.
How does this relate to SEO? It relates to SEO in that the more relevant and meaningful content is that is placed higher in the information hierarchy through proper use of elements, the better the site will do compared to one which does not make proper use of semantic coding practices or does not optimize their content in a meaningful way through highlighting keywords and phrases that a user would use to find that particular content.
I see that you run or are a part of an “internet marketing” business. I feel bad for your clients who have been misguided about the importance of semantic code’s role in SEO.
The first sentence should read: “…these tags do not _directly_ affect a site’s ranking in relation to other sites.”
And I feel bad for your misguided “understanding” of search engines.
“Use <b> when you want the text to have a different style without contextual importance, but use <strong> when you want the text to have extra importance from a content or SEO perspective.”
Good point! You just simplified it for me. Thanks….
This has nothing to do with HTML5 – the difference between i/em, and b/strong have been well established for a long time and, as I believe someone else pointed out, are treated differently by screenreaders.
Great stuff, search engines and searchers are always going to like content that has hierarchy built in. It amazes me how obsessed people become about how it may affect ranking. Google is latching onto the fact people are more interested in rank and ways of improving rank. Content and its quality will rule soon… thank god!
Done!
Thanks… I learned what “argumentum ad verecundiam” means :) My master thesis was on Semantic Web and even so I have to say that distinction between <em> and <i> is so subtle that it will be misused and in the end ignored by search engines…
I tend to use more often the and bold it from css. What do you think is it a good method ?
You have made some really good points there. I looked on the internet for more
information about the issue and founnd most people
will go along with your views on this website.
Google is latching onto the fact people are more interested in rank and ways of improving rank. Content and its quality will rule soon… thank god!