Basic HTML

How To Add Bold Text Using HTML?

One afternoon Aria walks into the house looking particularly big and fluffy.

What’s up with you?

A passerby was walking by with their dog so I made myself extra fluffy so I looked bigger and more intimidating.

That way the dog really knows who the important one around here is.

Wow!

Very brave.

You waited until the dog was round the corner didn’t you?

Of course!

I’m important, not stupid!

So Aria fluffed herself up so she looked bigger and stood out more, this is rather like adding bold text to your website. The bold text is thicker and so stands out much more, so is useful for highlighting certain phrases, like titles, or important words.

But we’ve already covered bold text when we looked at the font-weight property in CSS.

Why are we looking at it again?

Aria is right, we did look at font-weight in CSS which is used to make text bolder; not to be confused with balder. But you can also add bold text to your website just with HTML and using HTML you get slightly different results and actually a bit more control.

Let’s take the following sentence:

Aria likes to take a lot of naps.

With CSS we can make the whole sentence bold so it all stands out:

Aria likes to take a lot of naps.

But with HTML we can do this:

Aria likes to take a lot of naps.

Here, just one word is in bold and so it is that part of the sentence which is emphasised.

We all know Aria likes to take naps, but in the last example the important bit, which is that she takes a lot of naps, is the part which is highlighted.

You can make certain words bold just by using the b tag and, just like most other HTML tags, the b tag uses both an opening and closing tag.

        <b> </b>
      

In any p tag, just surround the words you want to be bold with b tags, just like this.

        <p>Aria likes to take a <b>lot</b> of naps.</p>
      

In CSS you would be able to do this:

        <p style=”font-weight:bold;”>Aria likes to take a lot of naps.</p>
      

But this would make the whole sentence bold and not just the keywords.

Can I only use this on p tags?

Well as all the headings you make with the h1 to h6 tags are already bold, there isn’t any point using the b tag with those.

So really, it is only used for highlighting key words in paragraphs.

Try using the box below to write your own sentence and highlight key words to see what it looks like.

        
      

Chunky words for chunky cats.

Can you style text in other ways using HTML rather than CSS?

Well, you remember when you came back from the vets and you were a bit wobbly but we talked out italic text?

Not at all.

Ok, well the short answer is yes.

But maybe we should quickly recap what italics are first.

I don’t know about italics but I do know that I Paw Licks and I Tail Licks

Terrible, terrible joke, but good use of the b tag there.