Alternative to the HTML Bold tag

Admin 1
Viewed 308383

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

Or is that in CSS, or Javascript?

css html
21 Answers

Also consider the <strong> tag. It's much better for screen readers and therefore better for accessibility. Search engines also use <strong> tags to determine important content similar to how they use header tags <h1>, <h2>, etc (although <b> will also have similar meaning to search engines). If you want to stress importance of text, use <strong>. If you don't want to stress importance, use the <b> tag or use the font-weight:bold; style on the element or in the CSS.

Although, if you are bolding the entire paragraph, it's probably better to use the CSS option. This will reduce the affect on screen readers and it probably doesn't make sense to have an entire paragraph emphasized. But on the other hand, I've seen bold used to emphasize an entire paragraph before for good reason. In which case, font-weight:bold; is what you want to use, likely in a class/style.

In the end, <strong>, <b> or font-weight:bold; will all work and accomplish something similar visually (probably exactly the same), but they have slightly different meanings. Also, make sure that if what you're bolding is a header, use the header tags: <h1>, <h2>, etc.

Darryl_Hein_54410

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

p { font-weight: bold; }
user_288040

If the text's meaning is semantically strong, use the strong element. If not, use a semantic named class (one that clearly shows the meaning of the element, don't mix presentation and data by calling it bold etc) and reference it in your CSS.

HTML

<span class="important-message">I'm important!</span>

CSS

.important-message {
   font-weight: bold;
}

Some people still use the b element as a presentational hook, but it hasn't been deprecated, though most people favour the strong element nowadays. Just make sure they are used correctly.

alex_316710

Its in CSS you have to set font-weight: bold; as style

serioys_sam_750760

You can use the font-weight attribute on your

For example:

<p>This is my paragraph</p>

You can either have your CSS inline as below:

<p style="font-weight:bold;">This is my paragraph</p>

Or have it in your external CSS stylesheet as below:

p{
  font-weight:bold;
}
user_75708330

It's all historical and dates from a time where dinosaurs walked the earth and CSS didn't exist.

More seriously, forget about the <b/> tag and use font-weight:bold in a CSS rule :)

Julian_Aubourg_751920

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

user_28470 

    #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

user_111498770

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.

user_60021740

On a sidenote the below code will also make it bold.

<strong> text here </strong>
Binoj_Antony_330150

Nowadays people tend to use website builders (CMS like Wordpress) instead of coding their own blog from scratch. Even professional web developers do it because it's faster.

It would be nice if you could mention the advantages and things to keep in mind when coding your own blog in real life, for example:

  • More flexibility (customization)
  • Pay a domain name
  • Pay and choose a web hosting
  • Security and maintenance
  • Copyright and license of some website builders' templates and graphics. Your website could be locked to a particular web host if you used your host's website builder. So you cannot move to another web host, because if you do you could no longer use that template.
  • Experience trouble when asking for website builder's tech support when the website goes down.
  • Some templates are not search engine friendly and this affects your website ranking (SEO)

Anyways, you can use css/css3 or JavaScript for making interactive webpage. Even you can upload your all sort of code into a server formatting the default blog theme.

user_90730240

Use the <strong> tag because it's more semantic. <b> has been depreciated so it's best not to use it. Also bold text is given more Search Engine Optimisation (SEO) weight so it's always best to use a real <strong> rather than making a <p> or <span> bold using CSS.

user_833890
Related