HTML Essential Training

Formatting page content

In this series of exercises, we'll explore how to use HTML elements to format basic page content.

Emphasizing text

Often you will want to emphasize a particular phrase or word within your text. HTML gives you several different tags to do this with. In this exercise we'll explore the four most common formatting tags you'll use to emphasize content.

The Bold Tag

The bold tag (⟨b⟩) is mean to represent a span of text that you wish to set apart stylistically from the rest of the text without inferring any type of special relevance or meaning. It was removed in XHTML as being solely presentational, but added back to HTML5. As you would expect, browsers typically bold this text.

The Strong Tag

By using the strong tag (⟨strong⟩) you are representing a string of text as having strong importance. The text should be considered to be more important than the text surrounding it. It is typically displayed as bold.

The Italic Tag

Like the bold tag, the italic tag (⟨i⟩) represents a string of text that is set apart stylistically from the text around it. No particular meaning is attached to the text, rather it is rendered in italics. Helpful for phrases, terms, or any text that is normally displayed in italics.

The Emphasis Tag

The emphasis tag (⟨em⟩), or "em" tag, denotes text that is emphasized more than the text around it. Although this tag is usually rendered in italics, it shouldn't be used in place of the italics tag, rather it should be used for text that needs to emphasized for some reason.

Wait.... what?

You're probably wondering why there are multiple tags for bolding and italicizing text. If you are, don't worry, you're not alone! 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. What that means is that presentational text doesn't convey explicit meaning, it merely serves to change the styling of the text. Logical elements however do convey a specific meaning. Text that is either bold or italic are just that, bold or italic. Text that is represented with a strong or em tag can represent multiple states. Using styles, for example, you could change it so that the text is underlined or highlighted. By contrast, it wouldn't make much sense to change the styling of a bold or italic element, since they are represented exactly as intended.

There are other elements you'll need to research when learning about emphasizing text as well. The cite tag (⟨cite⟩), for example, is used for citing a work such as a book title, or an author, and is usually displayed as italicized text.