START A COURSE

The HTML and CSS Blog:

HTML5 Redefined Tags: New Uses for Old Tags

What You’ll Learn in This HTML5 Lesson

Last month we introduced you to some completely new elelments that have been introduced with HTML5. This month we’re going to teach you how some existing tags have changed with HTML5: strike, bold, italics and underline. If you are new to HTML all together, some of these tags may be new to you. That’s OK. In this post we’ll show teach you when to use these tags and when to avoid them.

Some Tags That Have Been Redefined with New HTML5 Standards:<strike> <b> <i> <u> <small>

Style versus substance image

In HTML, substance is the winner

If you are an experienced coder, than you know that HTML tags are supposed to be used for structure (defining what things are), and CSS is used for styling and presentation(defining how things look). So, for years we’ve been told to avoid really old HTML tags that were presentational (strictly visual), like strikethrough, bold, italics, and underline.

The World Wide Consortium (the organization that maintains and adds to the HTML language) has taken a look back at these old tags and has given them a new spin. Rather than viewing them as merely visual effects, they have suggested appropriate uses for these tags that are meaningful and semantic.

Markup Text to add Semantics Whenever Possible

When HTML4 was the hottest thing in town, tags like  <strike> <b> <i> <u> <small>  were discouraged because they change the style of the text, and style changes should be done with CSS, not HTML.

In HTML5 these tags have been redefined in to add meaning. In most cases, you will still want to use CSS and avoid the tags below. However, there are still tons of webpages out there that use these tags, so the clever folks at the Consortium decided to re-purpose these elements to help in the transition to a world where style is left to CSS. Ian Hickson puts it thus:

By reusing existing elements, we are able to support them without having to wait for new elements to be implemented. By doing so in a way that closely matches how those elements were actually used in practice (at least to the same extent as other elements have been correctly used in practice) we can not only have older UAs support these new elements automatically, but we can do so in a way that does not introduce an undue volume of invalid pages.

I was surprised to realize that there are some occasions where  <b> or <i> or <u>  are appropriate because they add semantics. Semantics is a fancy word we keep throwing around, but all it means is that our code should add meaning not just for humans but for computers too. In each of the examples below, we’ll show how these old style-markers can be used to change the meaning of the text, not just how it looks.

The Strike Tag for Showing a Change

Image of text for strike tag

The Strike tag is for striking out text. So that makes sense.

The Strike tag,  <strike> , can be used to indicate changed or updated information. The original price may be displayed with <strike> , to allow the viewer to compare the original price to the new price. Since strike-through the old price adds meaning to the text, <strike>  is appropriate. If you just think it looks cool to strikethrough text, use CSS instead.

When to Use Italics Instead of Emphasis

I’ve been controlling italics with CSS and using the HTML <em> tag to emphasize text since the dinosaurs had their last meal. So, it really surprised me to see examples where <i> for italics can be used to add semantics.

But as it turns out, this semantic use is quite common. In grammar style guides, editors italicize most titles of things, to distinguish them from long works. Since these examples are not emphasis, that is the intent is not to read them aloud a certain way, all of them should be coded with the italics tag.

We’re not just talking about the names of ships here, folks. Semantically you’d use  <i>  for all:

  • TV show names
  • all movie names
  • all newspaper/magazine names
  • all album names
  • all book names

Thus:

…It looks the same, but more and more our browsers will interact with this code differently. Still unclear? We have a whole post on which italics tag to use in HTML.

The Bold Tag Versus the Strong Tag

Be Louder sign spotted in oakland

Be louder when you use <strong>  but not when you use bold [via FutureIsFiction]

Using the <strong> tag indicates the content is stronger, which is heard louder when using assistive technology. In most cases, you want to use <strong> so that our future robot overlords understand we want the words marked to be read louder or in a deeper voice. Thus, after the robot uprising, we’ll be sure to code the text to say,

…so that the robots know to yell while whipping us into submission.

Semantic use of the bold tag  <b>  is less common because it doesn’t have a grammatical counterpart like  <i>  does. However, there may be situations that  still call for it. For example, say you’re writing the HTML for a an English test, and the directions say, “for each sentence, define the word in bold.” In such an instance, you’d not want to have the bold tied to the CSS style sheet, because a change to the style sheet could render all the bold text differently, and that would make the test difficult to take (go ahead HTML students, I see you plotting).

We are always going on about how using proper headings will tell search engines and whatnot what your web page is about. The H1 tag, like the title of an outline, tells Google “this webpage is about the words in this H1”. However in some cases, you may need to make something bold, but don’t want search engines to weigh it as important content. In some of these instances, bold may be appropriate.

Semantic Use of the Underline Tag

Use of the underline tag is even more rare in HTML5. Since links are usually underlined, use of underline is often even stylistically discouraged. If you don’t code in Chinese, probably the most common semantic use you will see for the underline tag is when marking a spelling error, as it has become common practice for many software programs to indicate misspelling with an underline.

It is more likely that you’ll want to remove an underline, than to add it. The default is to display content as underlined when marked up with the  <u>  tag. However, the underline is presentational and can be controlled by CSS. IF you don’t want underlining, use the CSS property and value of:

To remove the underline from every instance in your web pages  you could redefine the underline tag in your CSS stylesheet like this:

The Small Tag for The Small Print

Always read the fine print - funny sign

Always read the fine print. [via Echidne of the Snakes]

The Small tag <small>  has been redefined from “small size font” to “the small print” to change its use from style to semantic. Small Print traditionally contains legal text, copyright info, caveats, exceptions, credits, health warnings, side effects, contest regulations and other stuff that people in positions of authority wish you would not read. So, add <small>  in a meaningful way to the content that is supposed to be “small print” and continue to use CSS to specify the font size for all your other text.

By the way, using these new HTML5 tags semantically also makes it easier to select this text and format it with CSS. Rather than adding HTML class and id attributes to select your small text, you can leave the HTML alone, and just redefine the <small>  tag with a CSS tag selector. This semantic approach to HTML simplifies your HTML!

Style Versus Substance

Lego stormtroopers beating a dead horse

Don’t use HTML for style! Don’t use HTML for style! Don’t Use HTML for style! Get it? (image via PotatoeHuman)

Just in case we haven’t driven this point home sufficiently redundantly, the point is that HTML should be never be used for style, but should only be used to add meaning to the text. If you want to test whether your use is semantic, ask yourself if changing the way it looks in this instance would take away from the meaning of the sentence. If not, it is probably better to use CSS to style.

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.