How to Create Bold Text With HTML

HTML makes it easy to bold text, and there are several tags you can learn if you want more options. Better yet, you can take a few minutes to learn some basic CSS and add it directly to your HTML document. This is quicker than adding a whole CSS stylesheet, and will give you more control over exactly how thick the bolded text displays.

Method 1

Method 1 of 2:

Creating Bold Text with HTML

Download Article

1
<strong>Use the strong tag</strong>. In HTML5, the preferred standard, the strong tag is recommended for important text. This is almost always displayed as bold text in browsers.
- Place the text you want bolded in between these tags: <strong>bold text here</strong>.
2
Use heading tags instead when appropriate. "Headings" are usually placed at the top of the web page or at the beginning of a new section. Usually, headings are displayed as bold and larger than the regular font, but this can vary. There are six different heading tags, from <h1> to <h6>. Follow these guidelines when using them:
- The h1 tag, written <h1>Your Heading Here</h1> is the most important heading, typically the largest text at the top of the page.
- <h2>The h2 tag</h2> is for the second most important heading, and so on down to <h6>h6, the smallest</h6>.
- Use these sparingly, only to organize your page. Users should be able to skim the headings quickly and find the topic they're looking for.
- When creating subheadings, move down just one level at a time. In other words, don't skip from <h1> to <h3>. This helps the HTML page preserve its formatting when transferred to another format.^{[1]XResearch source}
Advertisement
3
<b>Use the b tag as a last resort</b>. The <b> tag is still supported in HTML5, but <strong> is preferred in most situations. Use the <b> tag only when the text should be bolded for stylistic reasons, not to add emphasis. Examples include key words or vocabulary words in a passage, or product names in a review.^{[2]XResearch source}
- As with most tags, <b>place the affected text between a start tag and an end tag</b>.

Method 2

Method 2 of 2:

Creating Bold Text with Inline CSS

Download Article

1
Understand when to use CSS. CSS is a more powerful and consistent way to style your web page. This makes it the ideal way to determine how your page looks, while HTML is designed to determine what your page means. It's completely fine to use HTML tags when you want to emphasize important text, but CSS will give you more close control over the visual appearance of your bold text.
- Try opening a basic HTML page with different browsers, and you might notice differences in the display. CSS tells the browser exactly how to display text altered by a given tag, to minimize the amount of variation.
2
Add a <span> tag to your text. If you don't know CSS yet, using "inline CSS" is a good way to get started. While you can use this to alter tags such as <p> or <h1>, sometimes you'll want to change text that's not already between tags.^{[3]XResearch source} In this case, place the text between <span></span> tags. This has no effect on its own, but gives us something to work with. Here's the example we'll be using:
- <span>I learned how to make this text bold with inline CSS.</span>
3
Add the style attribute. HTML attributes are written directly in the tag, inside the < >brackets. The style attribute is necessary to insert CSS into the HTML tag, so we'll insert style= into the span tag:
- <span style=>I learned how to make this text bold with inline CSS.</span>
- There's no reason to add the style attribute without specifying any styles. We're just taking this one step at a time to make it easy to follow.
4
Add the font-weight property. CSS properties are added as part of the style attribute. In our case, we'll use the font-weight property, which determines how thick to draw the font. This single property can be used to display bold (extra-thick) text, thin text, or even specify that the text should be displayed with normal thickness. Add "font-weight: " after the = sign, like this:
- <span style="font-weight: ">I learned how to make this text bold with inline CSS.</span>
- Again, this is unfinished and won't do anything by itself.
- Don't forget the quotation marks before and after font-weight:.
5
Add the bold value. The only thing we need to do now is add a value for font-weight, between the font-weight: and the final quotation mark. There are quite a few options for different amounts of "boldness," but the value bold is the easiest to use :^{[4]XResearch source}
- <span style="font-weight:bold">I learned how to make this text bold with inline CSS.</span>
6
Experiment with other values. CSS gives you many more options than HTML, so you don't need to feel constricted. Here are several alternatives to the "bold" value:^{[5]XResearch source}
- <span style="font-weight:bolder">"Bolder" text will always be thicker than the parent element.</span> For example, if you make an entire paragraph "bold," then use "bolder" on an individual sentence inside that paragraph, it will be even thicker.
- <span style="font-weight:normal">"Normal" text will be displayed as normal even if the span is inside a bold tag.</span>
- <span style="font-weight:900">You can instead use a number from 100 to 900 to specify thickness. 400 is normal text, while bold text uses a thickness of 700 by default.</span>^{[6]XResearch source}

Community Q&A

Search

Add New Question

Question
How do I change the image size?
Acute Viral
Community Answer
Try adding a width and/or height attribute in the image tag. I would recommend using one or the other so your image doesn't get squashed or stretched.
Thanks! We're glad this was helpful.
Thank you for your feedback.
If How.com.vn has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission.Support How.com.vn
Yes No
Not Helpful 1 Helpful 2
Question
How do I make one letter bold?
Community Answer
You can select the letter with a span element and set the span element to apply a bold face.
Thanks! We're glad this was helpful.
Thank you for your feedback.
If How.com.vn has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission.Support How.com.vn
Yes No
Not Helpful 2 Helpful 0

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Tips

When using the font-weight property in CSS, only use numerical values that are multiples of 100. Values that are in between will be rounded up.^{[7]XResearch source}
Thanks
Helpful0 Not Helpful0
An embedded or external CSS sheet is an even better way to bold text, since it allows you to alter and easily change an entire document at once.
Thanks
Helpful0 Not Helpful0
Each font only has certain "font weights" available. When using CSS, the closest available font weight to the specified amount is used. This means you won't always see a difference between two thicker than normal font weights.
Thanks
Helpful0 Not Helpful0