All language subtitles for 06 - Bold and italics.en

- Let's talk about bold and italic.

There are four HTML elements to talk about here,

two for bold and two for italic.

But why are there two of each?

Well, let's look at this example.

If we are typesetting this for a book,

we highlight the text that we want to italicize

and hit an I button somewhere,

and we get italics, we're done.

Then, when that text is printed,

those parts of the text are typeset in an italic font.

There are all kinds of rules in grammar and typography

in book publishing, journalism, magazine production,

that tell us when we should italicize or bold things.

If we follow those rules, we're good,

we've done it right, right?

Well, actually, the truth is,

there are two different reasons for using italics here.

The word "favorite" is italicized

because we're making a point.

This is really important, this is our favorite character.

"Favorite" is italicized for emphasis.

The phrase "Sesame Street" is not

being italicized for emphasis.

It's italicized because it's the title of a television show.

In HTML, we want to distinguish between these two use cases.

We want the browser to know when

things should be verbally emphasized,

versus when they're simply visually distinguished.

It's easiest to understand this if we think about

reading the sentence out loud.

If I just say, "My favorite character

"from Sesame Street is Grover," the emphasis is missing.

If I say, "My favorite characters

"from Sesame Street is Grover," that sounds weird.

Why am I saying "Sesame Street" like that?

We want it to come across like this:

"My favorite character from Sesame Street is Grover."

A verbal emphasis goes on "favorite"

and not on "Sesame Street."

We can convey this in HTML by using two different elements.

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.

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.

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.