[html] Alternative to the HTML Bold tag

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?

This question is related to html css

The answer is


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


You can use following :

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

OR

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

OR

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


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>

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.


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

You can make text or words Bold with using <b>Text</b> tag.

You can also use <strong>Text</strong> 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

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

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.


_x000D_
_x000D_
    #bold{_x000D_
      font-weight: bold;_x000D_
    }_x000D_
    #custom{_x000D_
      font-weight: 200;_x000D_
    }
_x000D_
<body>_x000D_
  <p id="bold"> here is a bold text using css </p>_x000D_
  <p id="custom"> here is a custom bold text using css </p>_x000D_
</body>
_x000D_
_x000D_
_x000D_

I hope it's worked


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


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.


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 :)


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.


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

p { font-weight: bold; }

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

<strong> means semantically highlighted text

font-weight: bold means visually highlighted text

<strong> 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.


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.


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

I use <span class="bold">my text</span>    

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.


<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.


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

<strong> text here </strong> 

The <b> tag is alive and well. <b> is not deprecated, but its use has been clarified and limited. <b> has no semantic meaning, nor does it convey vocal emphasis such as might be spoken by a screen reader. <b> does, however, convey printed empasis, as does the <i> 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.

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.