Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Gain a deeper understanding of HTML5 and learn how to create richer, more meaningful web pages with structural tags and descriptive attributes. In this course, author James Williamson presents an overview of HTML5 and its development, defines the new tags and attributes, and discusses how browsers parse and display HTML5 content. The course also includes step-by-step instructions for constructing an HTML5 document with a header and footer, navigation, content groups, and formatting.
One of the things that HTML5 is causing me to do personally is to go back and eat some of my previous words. Now, for years, I've been telling students not to use the bold and italic tags. Those tags were deprecated in XHTML 1.0 as being purely presentational, and their use was discouraged on those grounds. However, the tags were still found in the HTML 4 specification and have been updated in HTML5 to further clarify when bold and italic tags should be used in place of, say, the emphasis and the strong tag.
Let's take a quick look at the specification. I'm going to start here with the bold element. So just to go down and read the description of this, "The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or a mood," so again, purely presentational, not semantic or structural in any way. So key words in a document abstract, product names in a review, actionable words, things like that, but nothing that you're trying to emphasize particularly. Okay.
Let's take a look at the italics tag now. So this is the i element, italics element. The i element represents a span of text in an alternate voice or mood. So this is a little bit more complicated here. A span of text in an alternate voice or mood, an otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, those types of things. Now you might say, well, wait a second, a span of text in an alternate voice.
That sounds a lot like the em tag, and honestly, in some ways, this is still presentational. It's still going to italicize the text. But in some ways, it kind of is taking over that little bit of a role. Let me contrast that with the emphasis tag. So this is the em element. The em element represents a stress emphasis of its contents. Okay, so there is your difference. The italics tag is text in an alternate voice, where the emphasis tag is where we're stressing the emphasis of its contents.
So there really is a semantic difference between those two. Just an alternate voice might be a way of basically changing the phrasing of the text, whereas the emphasis tag shouldn't be used just to italicize, but to emphasize its contents. And the strong element gives a very similar description, noting that strong represents the level of importance of the content. So it's stressed even more. So really what this boils down to is when you encounter a situation where the normal typographic treatment would be to either bold or italicize the content, you're free to go ahead and use the bold or italics tag.
Now in situations where you want to affect the meaning of the content or stress its importance, then the emphasis tag and the strong tags really should be used over those tags. And in a lot of other cases, CSS is going to be able to do the job for you. So what we're going to do is we're going to take those lines of thought back to our trails page and take a look and see if there's any text in there that would benefit from the bold or italics tag. All right! So we're back in our trails.htm page, and this particular one can be found in the 05_05 folder.
And I want to focus really on the footer, so I'm just going to scroll down till I get to all the way down to the footer content. So when we look at the footer content, we have the right column which was returned to top, the telephone number, the email address. And then the left column has all our copyright information, the Explore California address, and all of that, and the 24-hour support line. So how about Explore California? That's the name of the company. I would really like that to be a little bolder, say. So what I'm going to do is I'm just going to go ahead and wrap that, in order to do that, in a bold tag.
Now you might be saying well, why not use the strong tag here? Wouldn't that really strongly emphasize Explore California and set it apart from the rest of the address? Both yes and no there. You can certainly do that. You can make the case for that, but the other thing to remember too is that Explore California is in a separate paragraph as the rest of your address. So visually, it would certainly stress the importance of it, but it really doesn't stress the importance of it outside any other content because it is the only content within this paragraph. So in this instance, the bold tag works fairly well. Now, going back down to our telephone numbers, I notice here that I have '24 hour support' right after this phone number.
And I don't really need that to be stressed any more than this. I don't really need that to be emphasized, but I do want it to be italicized. Now if I was going to use CSS to do this and I didn't want to use the em tag, I'd probably end up surrounding it with the span tag anyway. So it's not like I'm not going to have any additional markup here. So I'm just going to go ahead and use the italics tag to do that. So I'm going to use the i tag and surround '24 hour support'. I'll go ahead and save that, and I'm going to preview that in my browser to kind of see how that looks.
And once I'm in my browser, I'm just going to sort of scroll down here, and sure enough, Explore California is in bold and '24 hour support' is being italicized, which is exactly what we want. Now I could also go ahead and italicize the legal data here, but we have some other plans for that. So we'll come back to that in a little bit. So even though it is kind of taking me a little bit of time to get used to using the bold and italics element and the fact that they're viable options again, they do provide us with additional options when describing your document's content.
Now there are some of you out there who are probably committed to not using these elements because of their presentational nature, and I've got to tell you, that's fine. As with many other elements in HTML5, you choosing to use them to identify your content or not is totally up to you as an author. You should, however, be aware that the choice is available to you and that both of these tags are indeed valid HTML.
There are currently no FAQs about HTML5: Structure, Syntax, and Semantics.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.