Often when formatting documents,
you're going to need to emphasize content in a specific manner.
Let's take a look at a few of the ways that HTML allows us to do that
by using the emphasis.htm file found in the 03_05 directory.
Now, this is very similar to the pages that we've been working with.
But if I look at this in the browser,
you can see that we have slightly different content here.
We've got more descriptive text talking about the different ways that we
can emphasize text.
Now in this exercise, we're going to be using four main tags.
The bold, strong, Italic and emphasis tag.
And you can see here, we have some text that sort of describe what those do.
So, let's take a closer look at them.
We'll start by using the bold tag.
So if I scroll down, I can see that here we have a definition list and
we'll talk more about these types of lists a little bit later on in the course.
But for right now, a definition list is split into two parts.
You have the term, which is the dt tag.
And then you have the definition, which is the dd tag.
So, what we're doing is we want to bold all of these terms.
So I'm going to find each one of these, and then I'm going to place my cursor
just inside the opening dt tag, I want to wrap the text with a b tag.
So that means, I need an opening and a closing bold tag.
You also want to be very careful with where you're positioning these.
You want to make sure that they're fully nested inside the dt tag.
So where you place the opening and closing tags are very important.
So we're going to do the bold tag.
The strong tag.
The text for the italic tag.
And then finally, just below that, we're going to have the emphasis tag.
There's one more phrase that I want to bold.
If I scroll down all the way to the end, I can see where we're discussing the cite
tag and right here in the second sentence, I want to bold the text cite tag.
So again, to use the bold tag, we use both an opening and a closing tag.
So I'm going to save this, preview it in a browser.
And you can see, sort of the first of our label there.
We have all of our terms are bolded right now.
The bold tag, strong tag, italics tag.
And then we have the cite tag down there that's bold, as well.
Now, this is just purely visual.
It's purely presentational.
We haven't changed the meaning of those elements at all or
added anything to them semantically.
The bold tag, all it does,
is just tell the user agent, hey, this text should be displayed as bold.
So, it's simply a visual thing.
Now, there is another way to have our content displayed as bold text, but
it has a slightly different meaning.
And that would involve the strong tag.
So what I want to do, scroll down and
towards the end of this underneath the heading that says, wait, what?
There's a sentence that says, you're probably wondering why
there are multiple tags for bolding and italicizing text.
And then right after that there's a sentence that says, if you are,
don't worry, you're not alone.
So, what I want to do is I want to strongly emphasize the text,
you are not alone.
So, surrounding the phrase, you are not alone,
I'm going to surround that with a strong tag.
Now just like bold, for strong, I'm going to need an opening and
a closing tag.
So I'm going to save this, and if I go back into my browser,
you can see the text says, you're not alone is now in bold.
It doesn't look visually like there is a whole lot of difference between
the bold tag and the strong tag.
But in fact, there is.
As we mentioned, the bold tag is purely presentational, whereas the strong tag,
actually means that you are strongly emphasizing the text.
It has a semantic value.
That means, so say, for example, a screen reader is reading that text.
If it's capable of doing a different vocal inflection,
it knows to really strongly emphasize that text.
So it might actually say that louder or emphasize it more.
Now, this was a really big debate a few years ago.
When XHTML came out, the desire was to strip all presentational mark up
out of HTML, so the bold tag and the italics tag were removed.
And the strong tag and em tag were basically said, use these in their place.
When HTML5 came back around, the thought was,
well, you know, there are times when visually, you might want to bold text or
italicize it and you don't necessarily need to emphasize it.
For example, in this case, we wouldn't want the bold tag to be
read any stronger up here just because it's a term.
But visually, we might want to represent it as bold.
Now bold tag allows us to do that.
All right.
Now we have a similar relationship between the italics tag and the emphasis tag.
So let's take a look at those.
And I'm going to scroll back up to our definition list.
And I want to focus on these two elements, the italic tag and the emphasis tag.
What I want to do is in the italics tag, you can see that the last sentence here
says, helpful for phrases, terms or any text that's normally displayed in italics.
So what I'm going to do is I'm going to surround the word italics with the i tag.
So i for italics.
And then below that in the emphasis tag,
we have a sentence here that says the emphasis tag or
em tag, denotes text that is usually emphasized more than the text around it.
Although this tag is usually rendered in italics.
And so what we want to do is again, we're going to take italics there, and
we're going to wrap that in an italics tag.
So there we go.
All right, now, let's save that.
So in those cases, I want that text to appear italicized, but
I don't necessarily want to emphasize it.
There are times when I do want to emphasize text.
So what I'm going to do now.
All right.
So let's scroll down to the paragraph where we added the strong tag earlier.
Right after the strong tag, we have a sentence that says,
this is one of the most confusing aspects of learning HTML.
The easiest way for me to explain it is this.
One set of tags is presentational, while the other is logical.
Now, I would like the term presentational and
the term logical to be emphasized there.
So what I'm going to do,
is I'm going to surround the word presentational with an em tag.
And just like the strong tag, I'm going to use an opening and a closing tag for
both of those, and the same thing for logical.
We're going to do an em tag there as well, and I'll save that.
Now again, when we go back into the browser, we can see that the i tag is
italicizing the word italics in both of these paragraphs.
And when we go down into the description down here, presentational and
logical are being italicized even though they're using a separate tag.
So just like bold and strong, visually they look the same.
But just remember that semantically, they're very different.
You know, if the difference between these tags isn't crystal clear to you at first,
don't worry.
As I mentioned in the text, you are not alone.
Just read through this page, where I give a little bit more information about
the differences between them, and research the tags as much as you can.
I'd also recommend paying attention to how other authors are using them,
because over time, you'll get a greater understanding of them.
And you'll develop a use case for
when you should use one of the elements over its counterpart.