What Is the Difference Between b and strong: Your Short Guide

A lot of people know about the existence of the tags <b> and <strong>. However, not everyone clearly understands the difference between them. If they mean the same or have the same function, isn’t it easier to choose and use just one of them? In this post, we’ll delve into whether <b> is the same as <strong>, what they look like, and how to use them.

Tags <b> and <strong>: Syntax

<b> and <strong> belong to the text-level semantic tags in HTML (HyperText Markup Language) coding. Both <b> and <strong> are paired tags. That means they have an opening and a closing tag between which the text is placed.

What Is the Difference Between <b> and <strong> Visually and Semantically?

To understand the difference between these two tags, let’s analyze what they look like on a page (their visual representation) and their semantics (meaning). Let’s start with the definition of the tags <b> and <strong>.

Tag <b>: Definition

The HTML tag <b> stands for ‘bold’ and makes the text within it boldface. According to the definition of the <b> element provided by the Web Hypertext Application Technology Working Group (WHATWG), this tag represents a piece of text to which we want to draw attention without adding any extra importance or changing its mood/voice.

Tag <strong>: Definition

As for <strong>, this tag also draws attention to the specific text within the tag. The definition in WHATWG states that the <strong> element represents strong importance, seriousness, or urgency for its contents. In other words, the tag <strong> conveys additional meaning to the text.

Like the tag <b>, the <strong> element is displayed as bold text on the web page (unless they are styled separately via CSS or coding). However, what differentiates the <strong> tag from the tag <b> is its semantics. The <strong> tag shows web crawlers that the text is of greater importance.

So, Is <b> the Same as <strong> Visually?

Tags <b> and <strong> are usually displayed in the same way optically in different browsers – in bold type. You can see the tag <b> applied to the bold text ‘tag B’ in the screenshot below.

Identically, as you can see in the image below, the text ‘tag STRONG’ with the tag <strong> is displayed in bold.

The tags <b> and <strong> are compatible with the most common browsers, such as Chrome, Android, Firefox, Opera, and Safari.

Is <b> the Same as <strong> Semantically?

Traditionally, the tags <b> and <strong> are interpreted differently. The element <b> creates the boldface without adding semantic significance to the text within it. Conversely, the tag <strong> emphasizes the importance of the text within its content.

As markup elements, <b> and <strong> convey information to web crawlers. Screen readers interpret these tags differently. For instance, when browsers read the text to users, they may change the voice to show the importance of a certain text marked with <strong>.

New Tendencies in Using Tags <b> and <strong>

With the introduction of HTML5, the meaning of the tag <b> has changed. There is a thought that the <b> element is also ‘used as a stylistic offset such as keywords in a document of product names’.

Likewise, some experts at SeobilityWiki believe that the functionality of the tags <b> and <strong> has changed in the newer versions of HTML. The specialists state that these elements can be considered equivalent, and they hardly differ in their functionality and application. Thus, both <b> and <strong> tags can convey additional meaning of the text.

What Is the Difference Between <b> and <strong> for SEO?

Since the tags <b> and <strong> emphasize the content of greater significance, you can use them as an SEO tool. Use the keywords you want the page to rank for in the tags <b> and <strong>. This instructs search crawlers to pay attention to them.

Officially, Matt Cutts, a representative of the Google Search Central, declares no difference in treating tags <b> and <strong> in terms of ranking, scoring, and indexing. This was true in 2006 and 2013 when Google Search Central recorded their explanation.

Yet, some specialists have noticed changes in page rankings depending on the use of the tags. Because applying the tags to pages, monitoring their performance, changing the markup, and spotting the differences is a time-consuming process, it’s hard to gather specific examples.

There is little official evidence that the <b> and <strong> elements influence the page’s rankings. So, be careful when experimenting and applying these tags to emphasize targeted keywords or phrases.

How and How Often Should You Use Tags <b> and <strong>?

Search engines look for the proper markup that helps them interpret the page structure and the importance of elements on the page. Consequently, don’t use the tags <b> and <strong> to differentiate headings from paragraphs. Instead, use headings and subheadings as an essential part of the page that creates its structure.

If you want to emphasize the targeted keywords and phrases with the help of <b> and <strong>, remember these points

• Use the tag <b> to highlight keywords.

The element <b> used within a specific text can add importance to words that otherwise don’t have any special meaning. This tag can function as an obsolete meta keywords tag that lists the targeted keywords for the page.

• Use the tag <strong> relative to the content.

As the element <strong> indicates that a text section is important, use it to highlight a particular clause or a sentence.

• Remember not to overdo.

Whether you are keeping the boldface for <b> and <strong> elements or prefer to apply the normal style to them just to keep the markup for search engines, remember to use the tags wisely. This will benefit both the visual perception for the page visitors and the correct understanding of the markup by search engines.

Too many boldened words or phrases make users’ experience negative. Similarly, too many <b> and <strong> elements can be regarded by search crawlers as keyword stuffing, thus leading to penalizing the page.

For instance, in the article by Forbes that has more than 700 words, the tag <strong> is used at the very beginning and to distinguish a significant part of the content:

Styling the Text: Alternatives to <b> and <strong>

With the development of the web, CSS was created to complement HTML. CSS stands for Cascading Style Sheets and describes the visual presentation of the HTML elements on a web page. In other words, CSS is responsible for styling pages.

So, if you want to stay on the safe side, follow the latest trends. Avoid using tags <b> and <strong> for the visual representation of the bold text. To make the text bold, you can:

• implement the style with CSS classes
• apply the boldface directly in the HTML coding

In the screenshot below, you can see the text ‘in boldface type’ made bold via HTML coding.

Knowing that HTML is a markup language, it’s preferable to use CSS for styling.

Changing the Look of <b> and <strong>

Similarly, for the tags <b> and <strong>, you can set the style in CSS or apply the ‘normal font style’ in HTML to make no visual difference between these elements and the text in which they are used. In the image below, as you can notice, the text ‘tag B’ within the element <b> has a normal font-weight.

Thus, visually the text within the tag <b> doesn’t differ from the surrounding text. Also, as with making the text bold, it’s better to change the styling via CSS rather than HTML markup.

Conclusion

Let’s summarize the key points that we have covered.

• Tags <b> and <strong> are HTML markup elements, serving to mark the essential parts of the page.
• Usually, the visual default representation of the tags is in boldface text (if you don’t apply CSS to style these tags).
• The <strong> tag is meant to show the text of greater importance within the content.
• The semantics of the tag <b> has changed in HTML5; both <b> and <strong> elements can convey additional meaning.
• Tags <b> and <strong> have meaningful functions, so you shouldn’t use them only to style the text; CSS is preferred for styling.
• For SEO purposes, you can try using the targeted keywords in the <b> element and essential clauses in the <strong>. Remember to do this wisely to avoid overstuffing.

---

Superior Web Development Services from GetDevDone

GetDevDone has been a leading provider of web development services for more than 16 years.

We offer CMS-based development (Drupal, WordPress development, HubSpot), frontend development with popular JS frameworks (Vue, React, Angular), pixel-perfect, responsive design to HTML/CSS conversion, creating email templates and engaging HTML5 banners, eCommerce development (Shopify development, Magento, WooCommerce), and many other in-demand services.

Reach out to us today!