text HTML Bold codes

CSS Bold: font-weight Property

CSS provides the font-weight property to make your text bold.

Here's an example:

Example of CSS bold text...

...and now this whole paragraph is bold.

CSS Code:

<p>Example of <span style="font-weight:bold;">CSS bold</span> text...</p><br /> <p style="font-weight:bold;">...and now this whole paragraph is bold.</p><br />

You can also specify the "boldness factor" (instead of just specifying bold). In other words, you can apply different levels of boldness to different text. Plus you can even specify that text should not be bold. To learn more about this, read about the font-weight property.

The above example uses inline style sheets, however, I highly recommend learning how to use external style sheets and CSS classes, as this will enable you to apply your styles across your whole website in one go.

HTML Bold: <b> Tag

When most people think "HTML bold", they usually think of text that has been boldened using the HTML <b> tag.

Here's an example of creating "HTML bold" using the <b> tag:

Example of HTML bold text...
...and now this whole paragraph is bold.

HTML Code:

<p>Example of <b>HTML bold</b> text...</p><br /> <p><b>...and now this whole paragraph is bold.</b></p><br />

Using the HTML <b> tag is probably the quickest/easiest way to bold text, however, just because you want bold text, doesn't mean you should automatically use the HTML <b> tag everytime.

So Which "HTML Bold" Tag Should I Use?

The HTML specification includes several tags for presented boldened/emphasized/highlighted text. Each tag has its own special meaning.

The following table outlines the HTML tags in question:

HTML Tag	When to use this tag
<b>	Use on 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.
<em>	This element represents stress emphasis of its contents. Use this tag whenever you want to place emphasis on a particular word or phrase.
<h1> to <h6>	Use these tags for defining different levels of headings.
<mark>	This element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. Use this tag when you want to highlight a particular word or phrase for reference purposes.
<strong>	This element represents strong importance for its contents. Use this tag whenever you want to convey importance for a particular word or phrase.

Here's what the HTML specification says about HTML bold and other emphasized/highlighted text:

The <b> element should be used as a last resort when no other element is more appropriate. In particular, headings should use the <h1> to <h6> elements, stress emphasis should use the <em> element, importance should be denoted with the <strong> element, and text marked or highlighted should use the <mark> element

Combining CSS Bold and HTML Bold

Actually, a combination of CSS and HTML is often the best way to bold text in HTML documents.

You should use HTML to define the meaning of the marked up text, then use CSS to define the way that the text looks.

As the HTML specification says:

Style sheets can be used to format <b> elements, just like any other element can be restyled. Thus, it is not the case that content in <b> elements will necessarily be boldened.