Bold text in HTML
Basic bold text
There is several ways of making bold text. The most simple, and often also the best, solution, is the tag <B>. It can be found in another version called <STRONG>. The two of them produce the same effect, namely bold text. From programming standpoint <B> is preferable, as it takes up less space in the program lines, making it less disruptive when working with the source codes. In the end, it is a matter of personal taste whether you use one or the other.
As code, a piece of text in bold will look like this:
On the page, when shown, it looks like this:
As code, a piece of text in bold will look like this:
Here the text is normal, <B>here the text becomes bold using the B tag,</B> and here it becomes normal again.
Here the text is normal, <STRONG>here the text becomes bold using the STRONG tag,</STRONG> and here it becomes normal again.
On the page, when shown, it looks like this:
Here the text is normal, here the text becomes bold using the B tag, and here it becomes normal again.
Here the text is normal, here the text becomes bold using the STRONG tag, and here it becomes normal again.
Styling with bold text
A method offering more options is STYLE="font-weight:bold". Styles is a way of modulating tags, e.g. if you want a paragraph in bold: <P STYLE="font-weight:bold"> </P>. The method has two advantages:
1. At the more complex elements it is easier to control the formatting.
2. The method makes it possible to style using cascading stylesheets (CSS)
A piece of text, here with the SPAN tag, will look like this as code:
The result is:
Officially more options are available for formatting when using font-weight e.g. bolder which is supposed to give extra bold text (see the table below). It is possible that it may work if you choose something other than strict for HTML 4, but using strict it does not work. For HTML 5, it works to some extend, for the newer versions of the browsers. If you use font-weight:bolder, you don't see any extra bold text, but if you use font-weight:900, it works just fine on the newer versions of the browsers.
1. At the more complex elements it is easier to control the formatting.
2. The method makes it possible to style using cascading stylesheets (CSS)
A piece of text, here with the SPAN tag, will look like this as code:
Here the text is normal, <SPAN STYLE="font-weight:bold">here the text becomes bold,</SPAN> and here it becomes normal again.
The result is:
Here the text is normal, here the text becomes bold, and here it becomes normal again.
Officially more options are available for formatting when using font-weight e.g. bolder which is supposed to give extra bold text (see the table below). It is possible that it may work if you choose something other than strict for HTML 4, but using strict it does not work. For HTML 5, it works to some extend, for the newer versions of the browsers. If you use font-weight:bolder, you don't see any extra bold text, but if you use font-weight:900, it works just fine on the newer versions of the browsers.
| Valus | Description |
| normal | Defines normal text. This is default |
| bold | Defines bold text |
| bolder | Defines extra bold text |
| lighter | Defines thinner text |
| 100 200 300 400 500 600 700 800 900 | Defines thin to bold text. 400 is the same as normal, and 700 is the same as bold. |