Mastering HTML Bold Text

Introduction

In this lab, you will learn how to use the HTML <b> tag to create bold text on a webpage. We will also cover the best practices for using this tag and recommended alternatives when necessary.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") subgraph Lab Skills html/basic_elems -.-> lab-70706{{"`HTML Bold Text`"}} html/text_head -.-> lab-70706{{"`HTML Bold Text`"}} html/para_br -.-> lab-70706{{"`HTML Bold Text`"}} end

Set Up the HTML File

Create a new file called index.html in your code editor. In the document's body, add a paragraph with some text that you want to make bold.

<body>
  <p>Here is some text that needs to be bold.</p>
</body>

Add the b Tag

To make the text bold, wrap it with the <b> tags like this:

<body>
  <p>Here is some <b>bold</b> text.</p>
</body>

Default CSS Style

The default CSS style for the <b> tag is:

<style>
  b {
    font-weight: bold;
  }
</style>

Best Practices

Avoid using the <b> tag excessively. Only use it on important text that needs emphasis.
For headings, use the <h1> through <h6> tags instead of the <b> tag.
For emphasizing text, use the <em> tag instead. This tag also uses italicized text instead of bold.
For important text, use the <strong> tag instead. This tag will make the text bold and indicate its importance for search engines.

Summary

That's it! You now know how to use the HTML <b> tag to create bold text on your webpage. Remember to use this tag appropriately and follow best practices for optimal markup.

HTML Bold Text