Bold and italics in HTML

HTML Bold and italics tag

Bold and italics in HTML

Let’s talk about HTML Bold and italics tag. There are four HTML elements to talk about here, two for bold and two for italic.

The I element is used to apply to only visual italics, while the em element is used to put emphasis on something. We aren’t just typesetting when we’re choosing elements like these. We’re conveying semantic meaning, human meaning.

<i> and <em> tags

It works like this. Let’s wrap the word “favorite” in <em> tags, while wrapping “Sesame Street” in <i>tags. We can see that visually, they look exactly the same. But don’t be tricked, they’re not the same.

It’s important, actually, that we don’t just get lazy and only use one of these for everything. They potentially create very different results for anyone listening to the content.

The <i> element is used to apply to only visual italics, while the <em> element is used to put emphasis on something.

HTML Bold and strong tags

There are also two elements we can use to mark something as bold. The <strong> element conveys importance, seriousness, urgency. We should use it to mean, hey, this should be strong. Like emphasis, it conveys meaning.

The <B> element is like the I element. It’s generic, neutral, it doesn’t mean anything. It just gives us a way to mark something so it can be styled as bold.

There’s no implication of an alternative voice or mood. Here are two examples: “Warning! Do not be late.” We want the word “warning” to be marked as extra important, to be strong. Or we can simply use the strong to specify that one part of a phrase is more important than another. “Chocolate and coffee” is the key part of the headline. “And other things I crave” is a bit more of a throwaway. It’s still part of the h1, but it’s not as important. If instead we want to bold certain words in a passage of text without conveying any meaning, we can use the B element.

Here, I have a paragraph where I want a certain phrase to jump out for the reader. But I don’t want to convey any special meaning to the browser or to a screen reader. So I’ll use the B element.

Now, don’t get confused. If we simply want to make something on the page typeset in a bold font, we don’t use the strong or B element. We just use CSS to change the weight of the type and apply the style to any element that we want.

Maybe our h2 headlines are thin and condensed and our h3 headlines are thick and wide. We’ll just use CSS and define the styling for h2 and h3. The B element gives us a way to mark something that otherwise doesn’t have an element. The recommendation is to use it at the last resort.

Those are the four elements that we have to mark up text to be italicized or bolded, two that convey a certain meaning, a human language reason for the bold or italic, and two that are without meaning, em, I, strong, and B.

Leave a Reply