02 Formatting Text.

docx 5

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 markup text to be italicized or bolded,
 two that convey a certain meaning, a human language reason for the bold or italic,