Reputation:

Alternative to the HTML Bold tag

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  tag?

Or is that in CSS, or Javascript?

Upvotes: 82

Answers (20)

zakizakibzr

Reputation: 53

    #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

Upvotes: 2

Tsundoku

Reputation: 2707

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. ... and ... 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 .... 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.  or replace the tag with  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.

Upvotes: 1

Julian Aubourg

Reputation: 11436

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

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

Upvotes: 5

John Boker

Reputation: 83729

you could also do  bold text here 

Upvotes: 4

erroRs_

Reputation: 86

You can code like below..

<html>
 <head>
 <style>
 p.boldstats{
 font-weight: bold
  }
  </style>
 </head>

  <body>
  <p class="boldstats"> The bold finder </p>
  </body>
</html>

Upvotes: 7

Sayo Komolafe

Reputation: 1008

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;
}

Upvotes: 6

user336882

Reputation: 101

The  tag is alive and well. is not deprecated, but its use has been clarified and limited. has no semantic meaning, nor does it convey vocal emphasis such as might be spoken by a screen reader. does, however, convey printed empasis, as does the tag. Both have a specific place in typograpghy, but not in spoken communication, mes frères.

To quote from http://www.whatwg.org/

The b element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.

Upvotes: 10

Jim Butterworth

Reputation: 11

A very old thread, I know. - but for completeness:

I use my text

as I upload the four font styles: normal; bold; italic and bold italic into my web-site via css.

I feel the resulting output is better than simply modifying a font and is closer to the designers intention of how the boldened font should look.

The same applies for italic and bolditalic of course, which gives me additional flexibility.

Upvotes: 1

Nasser Hadjloo

Reputation: 12620

You can make text or words Bold with using Text tag.

You can also use Text tag

Head tags <h1>, <h2>, <h3>, ... are default bolded tags and make your text Bold by default unless you change their style with CSS

Above tags was available in HTML but if you like to change the style with CSS you can use

font-weight:bold

Upvotes: 8

KFC

Reputation: 559

You can use following :

<p id="p1">Some Text here </p>
#p1{
   font-weight: bold;
}

<Strong><p>Some text here </p></strong>

You can use <h1> tag which is somewhat similar to bold

Upvotes: -1

daalbert

Reputation: 1475

Maybe you want to use CSS classes?

p.bold { font-weight:bold; }

That way you can still use  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.

Upvotes: 1

Kzqai

Reputation: 23102

`` is a last resort

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

More useful alternatives

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

The practical edge case for use of ``

The only case where I would advocate using  is if

you have styled  in a different way that you don't want displaying for the text that you have in mind,
you don't want italic emphasis or a heading, and
you are about to use an inline span or a span with a class just for bolding text. (For example: )

Then it's reasonable to use  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.

Upvotes: 4

Guard

Reputation: 6955

The answer by @Darryl Hein is correct despite one point -  is not recommended at all since XHTML, because it's not semantic.

 means semantically highlighted text

font-weight: bold means visually highlighted text

 can be css-tuned to not be bold, though it's a conventional default. It can be made red, or italic, or underlined (though all these possibilities are not really user-friendly). Use it for phrases / words in text, not because of visual design, but related to their meaning

font-weight: bold should be used for design-related bold parts, like headers, sub-headers, table header cells etc.

Upvotes: -2

Darryl Hein

Reputation: 145107

Also consider the  tag. It's much better for screen readers and therefore better for accessibility. Search engines also use  tags to determine important content similar to how they use header tags <h1>, <h2>, etc (although  will also have similar meaning to search engines). If you want to stress importance of text, use . If you don't want to stress importance, use the  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, ,  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.

Upvotes: 100

alex

Reputation: 490461

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.

Upvotes: 23

Blake Tallos

Reputation: 21

<p style="font-weight:bold;"></p>

Upvotes: 0

Matthew James Taylor

Reputation: 4866

Use the  tag because it's more semantic.  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  rather than making a  or  bold using CSS.

Upvotes: -3