编码实现方式多样性的原因探究——以网页粗体实现为例

Great question—this is one of those quirks that confuses many new web developers, and it all comes down to semantic meaning vs. visual presentation, plus a dash of web history. Let’s break this down using your bold text example:

1. Semantics vs. Pure Styling #

The <b> tag (and its cousin <strong>) isn’t just about making text bold anymore. In modern HTML5, <b> has a specific semantic purpose: to draw attention to a piece of text without implying it’s more important. Think of it like highlighting a keyword in a product description or a sidebar note.

On the other hand, font-weight: bold is purely a style instruction. It doesn’t carry any meaning about the content itself—it just tells the browser how to render the text visually.

2. Separation of Concerns (The CSS Philosophy) #

CSS was invented specifically to separate content (HTML) from presentation (styles). Using font-weight: bold via a CSS class (like .bold-text { font-weight: bold; }) makes your code far easier to maintain. If you later decide you want all "bold" text to be a dark blue instead, you just update one CSS rule—no need to hunt down every <b> tag in your codebase.

CSS also gives you more flexibility: you can adjust the weight to font-weight: 700 (a common alternative to bold), or even change the style dynamically (like making text bold on hover). You can’t do that with just an HTML tag.

3. Historical Legacy #

Back in the early days of the web (before CSS existed), developers had no choice but to use HTML tags like <b>, <i>, and <u> to style text. These tags were originally designed for presentation, not semantics. As CSS became standard, the web community shifted toward separating content and style—but these old tags weren’t removed. Instead, they were repurposed with new semantic roles to maintain backward compatibility with existing sites.

4. Use Case Specificity #

Sometimes, the choice comes down to context:

• If you need to mark text with a specific semantic meaning (like important content, use <strong>; or highlighted text, use <b>), go with the HTML tag.
• If you just need to apply a bold style to a piece of text without any underlying meaning, or if you want to reuse that style across multiple elements, use CSS.

At the end of the day, these aren’t just random alternatives—they’re tools designed for different jobs. Understanding when to use each will make your code more readable, maintainable, and accessible.

内容的提问来源于stack exchange，提问作者Kakeema