In This Tutorial
HTML bold tag
HTML comes up with the <b> tag to make text bold i.e. text is darkened to help emphasize a remark or comment. You have to use closing </b> tag otherwise whole text following <b> tag will appear as bold.
Note that, the text in headings like <h1>, <h2> etc. is bold by default.
Syntax of bold tag
The syntax of bold tag in HTML is:
<b>some text to be bold</b>
Example of using HTML bold tag
The following example uses <b> tag to make text bold in <p> and <div> tag’s text.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Bold</title>
</head>
<body>
<p>This is Tutorials Collection is collection of tutorials and this is <b>HTML Tutorial</b>.</p>
<div>This is Tutorials Collection is collection of tutorials and this is <b>HTML Tutorial</b>.</div>
</body>
</html>
|
Bold text by using CSS
You can also use CSS to make text bold. It allows using different thickness level for text. The property that is used to make text bold is font-weight.
To set text bold with font-weight the syntax is:
font-weight: bold;
Example of using font-weight property
The following example sets the text bold by using font-weight property. It also uses numeric value to make bold text to show you how boldness can be from thinner to thicker by changing the numeric value.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Bold</title>
<style>
.txtbold
{
font-weight: bold;
}
.txtboldnum1
{
font-weight: 200;
}
.txtboldnum2
{
font-weight: 600;
}
.txtboldnum3
{
font-weight: 900;
}
</style>
</head>
<body>
<p>This is bold text with font-weight:bold</p>
<p>This is bold text with font-weight: 200</p>
<p>This is bold text with font-weight: 600</p>
<p>This is bold text with font-weight: 900</p>
</body>
</html>
|
Leave A Comment?