MY CARTHow to Bold Text in HTML – Instructions
How to Bold Text in HTML: Video
This video lesson, titled “Emphasizing Text (Bold and Italic),” shows how to bold text in HTML and italicize text in HTML. This video lesson is from our complete HTML5 and CSS3 training, titled “Mastering HTML5 and CSS3 Made Easy v.1.0.”
Overview of How to Bold Text in HTML
This tutorial shows you how to bold text in HTML. To bold text in HTML, you should apply the bolding using a CSS style rule and the “font-weight” property. You can apply the CSS style using either inline, internal, or external CSS, as needed, although inline is usually not recommended. The “font-weight” property is also dependent on the “font-family” CSS property that is currently set, as the fonts must have bolding available to them.
You can apply the font-weight CSS property’s default text value of “bold” or you can assign a degree of boldness with a numerical value. If you use a numeric value for bolding, the font-weight property accepts multiples of 100. Values between 700 and 900 produce font bolding. Lower values instead produce lighter text.
To bold text in HTML using CSS, place your insertion mark cursor at the location in the external, internal, or inline CSS style where you want to add the font-weight property. Then type the property name of font-weight. Then type a colon symbol. Then type either that text value “bold” or a numeric multiple of 100 in the range from 700 to 900.
The following examples show you how to bold text in HTML by applying the font-weight property as an inline CSS style to the paragraph tag and the span tag. The paragraph tag example uses the default font-weight “bold” text value. The span example uses a number value for its bolding.
| Property: | font-weight |
| Value: | Either “bold” or a multiple of 100 from 700 to 900 |
| Example 1: | <p style = “font-family:sans-serif; font-weight:bold”>This is a sans-serif font paragraph with bolding applied.</p> |
| Example 2: | <p style = “font-family:sans-serif”>This is a sentence in a sans-serif font paragraph with <span style = “font-weight:900”> very dark </span> bolding applied to a few words.</p> |
| Result 1: |
This is a sans-serif font paragraph with bolding applied. |
| Result 2: |
This is a sentence in a sans-serif font paragraph with very dark bolding applied to a few words. |
A picture showing how to bold text in HTML using an inline CSS style.
Alternatively, you can use the older HTML bold tags of <b> and </b> to denote bold text in HTML, which most web browsers still interpret correctly. However, it is recommended to only use this tag as a last resort, as it lacks descriptive value. Ideally, use other HTML tags with more descriptive value and similar appearance instead.
For example, to bold a title in an HTML document, it is better to use the <H1> and </H1> through <H6>and </H6> tags, instead, since these tags apply bolding but also indicate important text titles in a web page. If the bolded text is not title text but is still important, you can instead use the <strong> and </strong> tags around the text to note its strong importance. Only use the HTML bold tag of <b> and </b> if the text to bold is not of any additional importance and you are only applying the bolding for appearance or style.
Instructions on How to Bold Text in HTML
- To bold text in HTML using CSS, place your insertion mark cursor at the location in the external, internal, or inline CSS style where you want to add the font-weight property.
- Then type the property name of font-weight.
- Then type a colon symbol.
- Then type either that text value “bold” or a numeric multiple of 100 in the range from 700 to 900.
