What's New Tutorial Index References RSS Feed Contact

Bolds, Italics, and Emphasis

In the last section, I gave you a basic, completely functional page as an example for you to play with.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Web Page Title</title>
</head>
<body>
	<h1>A Web Page</h1>
	<p>Well, here we are, a basic web page. It's not much, but we all gotta start somewhere, I suppose.</p>
</body>
</html>

It's time for you to start adding to it and writing your own markup. Some of the most basic tags you can play with are the ones to emphasize text, to make words and phrases bold, italicized, and stand out among the rest of the text.

Emphasized text (<em>)

To emphasize a bit of text, wrap the text you'd like to emphasize in <em>...</em> tags. By default, this will give the appearance of italicized text in most browsers (though you shouldn't use it to merely italicize text, and I'll explain why in a moment).

Well, here we are, a basic web page. It's not much, but we all gotta start somewhere, <em>I suppose</em>.

Well, here we are, a basic web page. It's not much, but we all gotta start somewhere, I suppose.

Strong text (<strong>)

Strong text indicates importance or seriousness in comparison to the text around it. To use it, wrap the text you'd like to emphasize in <strong>...</strong> tags. 

Well, here we are, a basic <strong>web page</strong>. It's not much, but we all gotta start somewhere, I suppose.

Well, here we are, a basic Web page. It's not much, but we all gotta start somewhere, I suppose.

A good example for how these differ occurs on Tesserae itself. I use strong when new terminology is introduced, words and jargon you should learn the meaning of, while I use em when I'm trying to emphasize directions or bits of information you should pay attention to. Another example:

HTML is a <strong>markup language</strong>, which are used to make the meaning of the text distinguishable from the text itself. It is <em>extremely important</em> that the text and content that appears on the page itself go only in the <code>body</code> element.

HTML is a markup language, which are used to make the meaning of the text distinguishable from the text itself. It is extremely important that the text and content that appears on the page itself go only in the body element.

A brief introduction to semantics

The difference between em and strong is the essence of semantics in HTML, that is, writing HTML for the meaning of the content instead of its presentation. As you get your bearings on the language, you'll notice some elements seem to do very similar things, at least visually. A good example is the difference between em, i, and cite. These all seem to italicize text; what's the difference?

The reason these elements exist is because they all carry different meanings for the text they're marking up. While em text is emphasized, i text indicates separated words from the rest of the text, say, for a character's thoughts in a story. Finally, cite indicates a cited work, such as a novel or a movie.

If this sounds confusing, or you're not sure you'll remember all three, you thankfully don't need to remember the difference just yet. Semantics will become important when you're better equipped for it. For now, focus on writing proper markup and remember that HTML is meant to describe a page's meaning, not its appearance.

Summary:

  1. Emphasized, or stressed, text should be marked up using the em element.
  2. Text of importance should be marked up using the strong element.
  3. Some elements will visually look the same, but have different semantic meanings.
    • You don't need to know semantics just yet, just remember that HTML is meant to describe a page's meaning and not its appearance.

Further reading