Learn about the differences between <strong> and <bold> tags and when to use different HTML5 semantic tags.
Curriculum Developer
Young web designers and developers often assume <strong> and <b> tags are the same. While both tags are considered HTML5 semantic tags, there are some important differences to understand when determining which tag to use while creating a web page.
The <strong> tag is used to provide meaning to the contents within the start and end tags. It literally means that the text contained in the tag has strong importance. Modern web browsers visually indicate the importance of the text by bolding it. However, some older browsers underlined text within a <strong> tag. Here are some examples of when to use a <strong> tag:
So if <strong> is used to indicate text of strong importance, when should we use the <b> tag? Even though the <b> tag is used less often by today’s web designers and developers, it’s good to understand that the <b> tag can still be used to stylize text as bold. It’s used to draw attention to a selection of text with boldface, but without indicating that the text has strong importance - more of a decorative styling. Here are a couple of examples of how the <b> tag might be used:
Today, most web projects avoid the use of the <b> tag and instead favor the use of the CSS font-weight property to stylize text. Check out this article for more information on using the CSS font-weight property.
The same can be said about using the semantic <em> tag to emphasize text and stress the content. However, the <i> tag can still be used to stylize text in italics.
Note: The <i> tag is also commonly used to embed icons on a web page, such as those provided by the Bootstrap CSS framework.
The example below demonstrates the use of the <em> tag, <i> tag, and CSS font-weight property to create bold text styling.
It’s important for web designers to understand the meaning of the content within their web projects in order to utilize the most appropriate semantic HTML5 tags.
