Content

• Steps
• Method 1 of 2: Create Bold Text with HTML
• Method 2 of 2: Create Bold Text with CSS
• Tips

The HTML markup language allows you to make text bold without any problems, and even in several ways at once. However, it will be better if you spend a couple of minutes studying the basic rules of cascading style sheets - CSS, and add them to the document so that you can work there later. The bottom line is that it is much easier to control the appearance of a web page from CSS, including when something needs to be highlighted in bold.

Steps

Method 1 of 2: Create Bold Text with HTML

1. 1 strong> Use the strong / strong> tag. In HTML5, according to the spec, this is the best way to highlight text. This tag will almost always make the text bold.
   • Place the text you want to highlight inside the tags: strong>right here/ strong>.
2. 2 Use headings when appropriate. Typically, they are placed at the top of the page or at the beginning of a new section. By default, headings are displayed larger and bolder than normal text, although there are some subtleties here too. There are six levels of headings, from 1 to 6: h1> - h6>. Follow these guidelines when using them:
   • The h1 heading is written like this: h1> first level heading / h1>, and this is the most important, largest heading of the page.
   • h2> Heading h2 / h2> - for the second most important heading, and so on up to the very h6> heading h6, the smallest of all / h6>.
   • You need to use headings carefully, in moderation, solely to organize the content of the page. The user should be able to see the title as quickly as possible in order to understand if the content they want is underneath.
   • When creating subheadings, it's worth going down just one level at a time. In other words, there is no need to put after h1> immediately h3>. This way, the page formatting will not fail when converting to another format.
3. 3 b> As a last resort, use the b / b> tag. The b> tag is still supported in HTML5, but much better. You can use b> when the text is highlighted for stylistic, non-semantic purposes - for example, to highlight keywords or vocabulary words, product names, and so on.
   • Like most tags, b> is a pair that controls the / b> text that is placed inside it.

Method 2 of 2: Create Bold Text with CSS

1. 1 Remember when to use CSS. CSS is a very powerful and convenient tool for editing the appearance of a page. Actually, CSS is how the page "looks", while HTML is what it "means". Of course, HTML tags are okay, they can be used, but it's better to work with CSS - you have more control over how your text will look.
   • Open a simple HTML page in different browsers. Notice how it appears slightly differently in each one? CSS can help keep this difference to a minimum.
2. 2 Add a span> tag to the text. If you don't already own CSS, you should start with the so-called "inline CSS" - "inline style sheets", if you like. This, of course, can be used to change the appearance of tags like p> or h1>, but sometimes you can also change text that is not yet included in any tags. The span> / span> tag is like a wrapper that by itself has no effect or effect, but allows us to make the necessary changes to the page. Here's an example:
   • span> I am learning how to make text bold with inline CSS./span>
3. 3 Add the style attribute. Attributes in HTML are written directly in the tag, right in the checkboxes>. The style attribute is required to insert CSS into an HTML tag, so insert style = in the span tag:
   • span style => I am learning how to make text bold with inline CSS ../ span>
   • Why add a style attribute if you don't add the style itself? Think right. But here we are setting out everything step by step!
4. 4 Add the font-weight property. The CSS properties are added as part of the attribute, in this case as part of the style attribute, namely "font-weight" (literal weight). This property can be used to specify the style of a font, not only bold, but also extra-bold, thin, or normal. After the = sign, write "font-weight:"... It should look something like this:
   • span style = "font-weight:"> I am learning how to make text bold using inline CSS ../ span>
   • Pause for now, don't write anything else (and yes, there is more to come).
   • Don't forget to put quotes before and after font-weight:.
5. 5 Add the bold value. What's left? That's right, set the attribute property to a value! Where to insert it? That's right, between font-weight: and a closing quote. This property has several varieties, differing in boldness, and the easiest way is to use the value bold:
   • span style = "font-weight: bold"> I am learning how to make text bold using inline CSS./span>
6. 6 Experiment with other values. CSS is far more powerful than HTML, so don't feel like you're tied hand and foot. Here are some alternatives to bold:
   • span style = "font-weight: bolder"> "Bolder" - so the text will always be thicker than the parent element, no matter how bold it may be. / span> If the entire paragraph is highlighted with "bold," then "bolder" will help to highlight even more boldly, say, a separate sentence that is in it.
   • span style = "font-weight: normal"> "Normal" - such text will look as usual, even when inside a tag that makes the text bold. / span>
   • span style = "font-weight: 900"> To set the weight of the text, you can use values ​​from 100 to 900. 400 - regular style, bold - from 700 and above. / span>

Tips

• When using numeric values ​​for weight in CSS, use multiples of 100. All other values ​​will still be rounded up.
• An external CSS file, to be sure, is much more convenient than what is described in this article - this way it will be possible to control the appearance of all pages of the site from one file at once!
• You cannot make a font fatter than originally intended by typographers. When working with CSS, remember that the font will change according to the standard. Accordingly, you will not see the difference between the two bold font options (more precisely, you can see it - but it already depends on the font).