The tags <b> and <strong> seem to perform an identical function in HTML, but in fact, they are different. In this post, we explain how exactly.
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.
<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.
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>.
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.
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.
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.
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>.
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.
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.
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
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.
As the element <strong> indicates that a text section is important, use it to highlight a particular clause or a sentence.
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:
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:
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.
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.
Let’s summarize the key points that we have covered.
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!
Learn about average Drupal developer rates and Drupal website development cost Drupal development cost is a tricky issue. When you need a professional-looking site tailored to your business needs, hiring expert Drupal developers is the only way to go. In this post, we discuss the price of building Drupal-based sites from DIY projects to complex […]
Have a glimpse into what professional Shopify Web Development involves E-commerce has a great impact on today’s global business landscape. According to Statista, e-commerce retail sales worldwide will reach the whopping number of over $6.5 billion. Compare it with slightly above $1.3 billion this industry generated in 2014. Such huge growth has been achieved largely […]
Learn what headless Drupal is and when you should choose it for your own project. In this post, we discuss decoupled Drupal. We define it, talk about its most common use cases, its advantages and drawbacks, and, finally, give recommendations as to whether you should make your own Drupal website headless. Walking down the decoupled […]
