The difference between <strong> and <b> tags in HTML
In website development, the <strong> and <b> HTML tags are often interchangeably used to make text look bold on the page. Although they both make text bold, they definitely have different meanings and uses.
It is usually confusing to new developers which of them they should use under various circumstances.
In this article, we will cover the differences between the <strong> and <b> tags in HTML and when to use each of them.
The <strong> Tag
The <strong> tag is used to indicate that the enclosed text is of strong importance compared to the other text on the page.
It's used to convey the importance and add semantic meaning to a word, phrase, or sentence within it.
The text within it is typically rendered in a bold font.
Example
<p>This is a <strong>very important</strong> paragraph.</p>
Below is how the above paragraph is displayed on a page.
This is a very important paragraph.
The words "very important" are enclosed in a <strong> tag, indicating that they have strong importance or emphasis in the sentence. As you can see, the browser has rendered it in a bold font.
It's important to note that the <strong> tag is also used for accessibility purposes whereby screen readers often read the text within a <strong> tag with more emphasis. This helps visually impaired users to easily understand the importance of the text.
The <b> Tag
The <b> tag (which stands for ‘bold’) is used to indicate that the enclosed text should be displayed in a bold font.
It simply renders the text in a bold font (increases the font weight) to draw the user's attention without adding any emphasis/importance or conveying any meaning beyond that.
Example
<p>This paragraph contains some <b>bold text</b>.</p>
Output:
This paragraph contains some bold text.
In the above example, we have enclosed "bold text" within the <b> tag to indicate that the browser should display it in a bold font. This doesn't add meaning or importance to it.
The CSS <font-weight> property is often used as an alternative to the <b> tag to bolden text.
Similarities between <strong> and <b> tags
The two are paired tags, meaning they have an opening and a closing tag between which the text is placed.
Visually, the text enclosed with either tag is rendered in a bold font and displayed exactly the same on the page.
Differences between <strong> and <b> tags
The <strong> tag adds semantic meaning and importance to enclosed text while <b> tag does not add any extra importance or semantic significance to the text beyond rendering it in a bold font.
When to Use Each Tag
Use the <strong> tag when you want to convey the importance or emphasis of a word, phrase, or paragraph.
On the other hand, use the <b> tag when you simply want to display text in a bold font, with no additional emphasis or meaning.
