HTML5 tutorial - The strong and b elements.

The strong and b elements

Here I introduce semantic HTML – a major advancement over HTML 4.01.

Take the following:

This bold text is in strong tags.
This bold text is in b tags.
<strong>This bold text</strong> is in strong tags.
<b>This bold text</b> is in b tags.

They both make text bold. In terms of presentation they are identical. So why have two elements that do the same thing?

They may look the same to humans, but the web crawlers or bots – that crucial second audience – see something quite different. When a search engine spiders and analyzes a page, text in <strong> tags is considered important. Text in <b> tags is not. *

Say you are making a page on "Digitigradient". I can't imagine why you would want to, but if you did you might include the following:

verb – To walk on your toes like a dog or cat.

By putting "Digitigradient" in <strong> tags you are telling the crawlers that "Digitigradient" is important to the meaning of the page while "verb", in <b> tags, is not. Placing "Digitigradient" in strong tags gives it "strong" semantic weight.

The dictionary defines semantics as "the study of meaning". On the web semantics puts meaning into HTML – meaning search engines can use to evaluate a page's SEO.

Semantics is not new to HTML5. Web designers have always had a degree of control of what the bots did and didn't judge significant. For example, anything in <h1> tags has been considered more important than something in say <h6> tags, but HTML5 takes semantics to a whole new level.

One of the biggest changes in HTML5 over previous versions is the addition of the new "section" elements: header, nav, article, footer, aside and section. To site visitors they work the same as <div> tags (which we study next, followed by the section elements), but, like <b>, <div> is semantically neutral. The new section elements give meaning to their content.

Unfortunately just what that meaning is not all that clear – at least not yet. I think we can assume something in the header carries more weight than something in the footer, but I have yet to find any rule where that is stated explicitly. **

My guess is that with time, usage will establish what means what. Incorporating semantics into HTML5 is a good idea – an idea that needs to mature and develop, but a very good idea nonetheless.

There is no need to wait to take advantage of HTML5 semantics, even if it is a bit vague. You can use the strong and b elements (in strong tags) as I suggest and adopting the new section elements now will make your sites forward compatible for years to come. With one small caveat (see below ***), the new section elements are compatible with all modern browsers.

Welcome to the murky waters of web semantics. Keep in mind that you are learning HTML5 while it is still in the design phase – and now is the time to do so, but any software "in beta" has kinks in the works.

At any rate, you can make text bold with all the confidence in the world.

Semantic HTML

Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation.

web crawler or bot

A Web crawler is a computer program that browses the World Wide Web in a methodical, automated manner.


Search Engine Optimization – designing pages to rank high in search engine results.
wikipedia · google

* Armed with this new information, do not think that filling a page with keywords in strong tags will get your page to rank first in Google. It won't. This is just one of many things you can do to get your page to rank.

** If you know something about this I don't, please contact me.

*** For the new elements to work in IE7 and IE8 you need to add what is called an "html5shim" to the head. Look in this page's source code to see how. The new elements do not work in any IE earlier than IE7.