Problem Statement
What's the difference between <b> and <strong> tags?
Explanation
The b and strong tags both make text bold, but they have different purposes and semantic meanings. The b tag is a non-semantic tag that simply applies bold styling to text without indicating any importance. It is used when you want text to be visually bold for stylistic purposes, but the text does not carry any special importance. For example, keywords in a product description or the first words of an article. On the other hand, the strong tag is a semantic tag that indicates strong importance, urgency, or seriousness. It tells browsers, search engines, and screen readers that the text is important. Search engines may give more weight to text in strong tags. Screen readers may use different voice inflection when reading strong text, helping visually impaired users understand the emphasis. In modern web development, it is best practice to use strong for important content and b only for stylistic purposes. If you need bold text purely for design, it is even better to use CSS font weight property. Understanding semantic HTML shows good knowledge in interviews and improves your code quality and accessibility.
Code Solution
SolutionRead Only
<!-- Semantic importance -->
<p><strong>Warning:</strong> This action cannot be undone.</p>
<p><strong>Important:</strong> Submit by Friday.</p>
<!-- Visual styling only -->
<p><b>Product features:</b> waterproof, durable, lightweight</p>
<p><b>Chapter 1:</b> Introduction to HTML</p>
<!-- Best practice with CSS -->
<style>
.bold {
font-weight: bold;
}
</style>
<p class="bold">Styled with CSS</p>