Alternative to the HTML Bold tag

Question

Okay, so I know that in HTML you can use the tag, but isn\'t there a \"weight=bold\" attribute that I can use in the

Answer 1

you could also do <p style="font-weight:bold;"> bold text here </p>

Answer 2

<b> is a last resort

You can use <b>, but only as a last resort. There are a variety of elements that work as good alternatives to <b>, here they are in order of most usefulness:

More useful alternatives

• For important text: <strong>
• For stress emphasized text: <em>
• For headings, not just page headings but paragraph headings and others of all kinds: <h1> through <h6>

The practical edge case for use of <b>

The only case where I would advocate using <b> is if

1. you have styled <strong> in a different way that you don't want displaying for the text that you have in mind,

2. you don't want italic emphasis or a heading, and

3. you are about to use an inline span or a span with a class just for bolding text. (For example: <span class='bold'>)

Then it's reasonable to use <b> instead, because in that case it'll probably be cleaner/shorter and more semantic than an unsemantic span, and terceness/readability is a good reason for making that choice, since b has been redefined for use as an element denoting printed emphasis.

Answer 3

What you use instead of the b element depends on the semantics of that element's content.

• The elements b and strong have co-existed for a long time by now. In HTML 4.01, which has been superseded by HTML5, strong was meant to be used for "strong emphasis", i.e. stronger emphasis than the em element (which just indicated emphasis). In HTML 5.2, strong "represents strong importance, seriousness, or urgency for its contents"; the aspects of "seriousness" and "urgency" are new in the specification compared to HTML 4.01. So if you used b to represent content that was important, serious or urgent, it is recommended that you use strong instead. If you want, you can differentiate between these different semantics by adding meaningful class attributes, e.g. <strong class="urgent">...</strong> and <strong class="warning">...</strong> and use appropriate CSS selectors to style these types of "emphasis" different, e.g. using different colours and font sizes (e.g. in your CSS file: strong.warning { color: red; background-color: transparent; border: 2px solid red; }.).
  Another alternative to b is the em element, which in HTML 5.2 "represents stress emphasis of its contents". Note that this element is usually rendered in italics (and has therefore often been recommended as a replacement for the i element).
  I would resist the temptation to follow the advice from some of the other answers to write something like <strong class="bold">...</strong>. Firstly, the class attribute doesn't mean anything in non-visual contexts (listening to an ePub book, text to speech generally, screen readers, Braille); secondly, people maintaining the code will need to read the actual content to figure out why something was bolded.
• If you used b for entire paragraphs or headings (as opposed to shorter spans of texts, which is the use case in the previous bullet point), I would replace it with appropriate class attributes or, if applicable, WAI-ARIA roles such as alert for a live region "with important, and usually time-sensitive, information". As mentioned above, you should use "semantic" class attribute values, so that people maintaining the code (including your future self) can figure out why something was bolded.
• Not all uses of the b may represent something semantic. For example, when you are converting printed documents into HTML, text may be bolded for reasons that have nothing to do with emphasis or importance but as a visual guide. For example, the headwords in dictionaries aren't any more "serious", "urgent" than the other content, so you may keep the b element and optionallly add a meaningful class attribute, e.g. <b class="headword"> or replace the tag with <span class="headword"> based on the argument that b has no meaning in non-visual contexts.

In your CSS file (instead of using style attributes, as some of the other answers have recommended), you have several options for styling the "bold" or important text:

• specifying different colours (foreground and/or background);
• specifying different font faces;
• specifying borders (see example above);
• using different font weights using the font-weight property, which allows more values than just normal and bold, namely normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,
• etc.

Note that support for numeric font-weight values has not always been great.

Answer 4

    #bold{
      font-weight: bold;
    }
    #custom{
      font-weight: 200;
    }

<body>
  <p id="bold"> here is a bold text using css </p>
  <p id="custom"> here is a custom bold text using css </p>
</body>

I hope it's worked

Answer 5

Maybe you want to use CSS classes?

p.bold { font-weight:bold; }

That way you can still use <p> as normal.

<p>This is normal text</p>
<p class="bold">This is bold text</p>

Gives you:

This is normal text.

This is Bold Text.

Answer 6

You're thinking of the CSS property font-weight:

p { font-weight: bold; }