How to make text bold with HTML: 9 steps

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

Step 1. Use the 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: right here.

  

  Step 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:

  … Follow these guidelines when using them:

  • The h1 heading is written like this:

    first level heading

    and this is the most important, largest title on the page.

  H2 heading

  - for the second most important title, and so on up to the very

  heading h6, the smallest of all

  • 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, don't put after

    straightaway

    … This way, the page formatting will not fail when converting to another format

  

  Step 3. As a last resort, use the b tag

  Tag still supported in HTML5, but much better. It can be used 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, - paired, managing the text placed inside it.

    Method 2 of 2: Create Bold Text with CSS

    

    Step 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, there is nothing wrong with HTML tags, they can be used, but it's better to work with CSS - you will 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

    

    Step 2. Add a 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 can of course be used to change the appearance of tags like

    or

    , but sometimes it is possible to change such text that has not yet been included in any tags. A tag is like a wrapper, which in itself has no effect or effect, but gives us the opportunity to make the necessary changes to the page. Here's an example:

    I am learning how to make text bold using inline CSS

    

    Step 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:

    • I am learning how to make text bold using inline CSS..
    • 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!

    

    Step 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:

    • I am learning how to make text bold using inline CSS..
    • 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:.

      

      Step 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:

      I am learning how to make text bold using inline CSS

      

      Step 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:

      • "Bolder" - this way the text will always be bolder than the parent element, no matter how bold it may be. If an entire paragraph is bold, then a bolder will help to highlight even more bold, say, a single sentence within it.
      • "Normal" - this text will look as usual, even when it is inside a tag that makes the text bold.
      • To set the boldness of the text, you can use values from 100 to 900. 400 - regular style, bold - from 700 and above.

      Advice

      • 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 - so 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).