HTML Bold
This page contains various HTML bold codes - HTML codes for creating bold text.
There's more than one way in HTML to bold text. This can be slightly confusing - especially if you aren't familiar with HTML coding. However, once you get your head around it, you'll find that each method has its place, and you can - and probably should - use a combination of these whenever you want HTML bold text.
CSS Bold: font-weight Property
CSS provides the font-weight property to make your text bold.
Here's an example:
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:
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>, <h2>, <h3>, <h4>, <h5>, & <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.