Introduction
One of the classic HTML tags is the HTML <b> element. Its purpose is to emphasize text visually by making it bold. Nevertheless, as web standards and recommended approaches have evolved, the use of <b> for styling content is often discouraged in favor of utilizing more semantic markup (or CSS).
Under the latest HTML5 specifications, the <div> element does not trigger the error under discussion; nevertheless, it is advisable to refrain from using it unless no other semantically appropriate element is available. This guide elaborates on the functionality of what the <div> element does, its distinctions from semantic alternatives (like <section>), scenarios where it might be employed, and the proper technique for presenting instances of its usage.
What Does <b> Do?
- With the help of a presentational effect that the tag provides: the text contained in the tag is displayed in the default bold font of the browser (typically a heavier font weight). It is not semantic, but just visual.
- It does not imply more on the content (e.g. importance, emphasis), it merely influences its appearance.
- Being a presentation tool, the use of <b> does not have an impact on accessibility (to assistive readers) and semantic organisation.
The HTML5 standard advises utilizing the <b> element only when no other element is more suitable.
Semantic vs Presentational: <strong> vs <b>
| Tag | Purpose | When to Use? |
|---|---|---|
<strong> |
Semantic: means that the content has high importance. It can be processed differently by the screen readers and search engines. | Use when the contentshouldbe emphasised or marked as important. |
<b> |
Presentational: just boldifies the text and does not contain any semantic meaning. | Apply in cases where you desire bold merely to get a stylistic/visual effect, and there is no semantic subtlety (e.g. keywords, brand names, product stylings). |
Why prefer <strong>?
By assigning significance to the enclosed content rather than just for styling purposes, it enhances accessibility for users, including those relying on screen readers, and ensures the longevity of markup semantics.
Why and when <b> might still be valid?
You might encounter scenarios where you want to emphasize text for purely visual or typographical reasons (such as formatting drop caps, highlighting product names, keywords, etc.) without implying emphasis or importance. In such cases, the utilization of bolding could be appropriate.
Examples
Example 1: Basic Usage of <b>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Bold Tag Example </title>
</head>
<body>
<p>Hello everyone, <b>this phrase is bold</b> just for styling. </p>
</body>
</html>
Output:
Hello everyone,this phrase is boldjust for styling.
Explanation
The <b> tag is responsible for rendering the enclosed text in a bold style. It does not add any semantic significance to the content.
Example 2: Using Semantic <strong> for Emphasis
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Strong vs Bold Example </title>
</head>
<body>
<p>Remember: <strong>This step is mandatory.</strong> Please follow carefully.</p>
</body>
</html>
Output:
Remember:This step is mandatory.Please follow carefully.
Explanation
Here, utilizing the <strong> tag indicates that the content holds significance both in terms of meaning and visual emphasis. It allows for an alternate presentation to users with screen readers, enhancing accessibility by highlighting its importance or emphasis.
Example 3: List Items with Bold Labels
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Bold in List Items Example </title>
</head>
<body>
<ul>
<li><b>Item 1:</b> Java Programming Language</li>
<li><b>Item 2:</b> Web Development</li>
<li><b>Item 3:</b> HTML, CSS, JavaScript</li>
</ul>
</body>
</html>
Output:
- Item 1: Java Programming Language
- Item 2: Web Development
- Item 3: HTML, CSS, JavaScript
Explanation
The application of bold formatting is employed on the label section (e.g. "Item 1:") to create a visual distinction between the item's description and the label itself. The bold style serves the purpose of improving the legibility of the text without adding emphasis to the content, hence making it appropriate.
Example 4: Combining <b> with Other Formatting Tags
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Bold, Italic, Underline Combined </title>
</head>
<body>
<p>This is <b><i>bold and italic</i></b> text.</p>
<p>This is <b><u>bold and underlined</u></b> text.</p>
</body>
</html>
Output:
This isbold and italictext.
This isunderlined boldtext.
Explanation
In the example, the use of <b> can be nested with either <i> ( italic ) or <u> ( underline ) to provide a combination of several presentational effects. This simply concerns the appearance of the text.
Example 5: Prefer Semantic or Structural Tags
Note: Although it is possible to wrap a heading's text in <b>, it's semantically redundant and unnecessary, since headings are already bold by default.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Bold Heading Example </title>
</head>
<body>
<h1><b>This is a bold header</b></h1>
<h2>Another normal header</h2>
</body>
</html>
Output:
This is a bold headerAnother normal header
Explanation
As a primary heading, and since most web browsers default to displaying headings in bold text, there is no need to wrap it in the <b> tags. Simply utilize the heading tags directly.
Beliefs about using <b>
Suggesting that <b> "must be completely avoided" is an oversimplification. HTML5 continues to support the utilization of <b> as acceptable, albeit only when a more substantial semantically equivalent option is unavailable.
Assuming <b> implies importance or emphasis: Incorrect. <b> is strictly presentational. Use <strong> or <em> when there is a need to show meaning or emphasis.
Avoiding the use of CSS styling method: Contemporary web design that is responsive, easy to maintain, and accessible now relies on CSS rather than relying on presentational HTML. The separation of content and design has evolved into a key standard practice.
Not taking into account accessibility and semantics: Using semantic elements (like <strong> tags) enhances the accessibility of documents, benefiting screen readers, SEO, and overall organization, especially in the case of extensive and intricate content structures.
Best Practices
- Use semantic tags (headings, <strong>, <em>, etc.) in situations where content meaning or emphasis is important.
- Use <b> when you want to have simple visual bolding typographically/stylistically but do not mean anything.
- Use CSS (font-weight, classes) for consistent styling across a website.
- Avoid unnecessary nesting of presentation tags (e.g. <b> inside <h1>, redundant bold on headings).
- Always write clean, valid HTML (with <!DOCTYPE html>, proper nesting, lang attribute, meta charset, etc.).
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<b> |
Yes | Yes | Yes | Yes | Yes |
Conclusion
The <b> tag is a valid HTML element which is used to have a visual bold appearance, and does not have a semantic meaning. In HTML5 today, it is suggested only in the case of no alternative that is more significant and semantic. To demonstrate emphasis or importance, semantic elements should be applied, e.g. <strong> or <em>.
To maintain consistency in styling and upkeep, opt for CSS bolding instead of relying on presentational HTML. Limit the utilization of the <b> tag to a bare minimum, reserving it more as a backup for styling rather than emphasizing content.
FAQs (Frequently Asked Questions)
Q1. Why shouldn't <b> used for styling?
Instead of using presentational HTML for styling purposes, the current best practice advocates for a clear distinction between content and presentation. It is recommended to focus on utilizing semantic HTML to convey structure and meaning, rather than relying solely on CSS for styling.
Example
<p> This is a <span class="highlight">visually bolded phrase</span> for style only. </p>
And in CSS:
.highlight {
font-weight: bold;
}
Q2. When to Use <b>?
Utilize <b> in cases where bold text is needed for non-semantic purposes like highlighting product names, technical terms, keywords, or for typographic emphasis. When there isn't a more suitable semantic tag available, resort to using <b>. It is recommended to prioritize CSS for styling, particularly for extensive or recurring styling requirements. Semantic HTML should be the primary choice, with <b> considered as a secondary option for styling purposes.
Q3. When Not to Use <b>?
Avoid <b> when the bolding implies emphasis, importance, or structural meaning. Instead, in this situation, semantic tags such as <strong>, <em>, <mark> or heading tags (<h1> to <h6>) are to be preferred.