• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 11/2/22

Strengthen and emphasize text

In the last chapter, you learned how to add headings and paragraphs to a text in order to add greater meaning and structure to an unstructured text.

The base of last chapter's example was a Wikipedia article, in which you may have noticed some text that you consider "bold" or "italicized."

In bold, you see "polar bear" and "white bear", and in italics, you can see more precise scientific or linguistic names:

Screenshot from the Wikipedia article on polar bears
Some text is stronger (bold) or emphasized (italics) in this text

In a normal word processing scenario, you can highlight the text you want to make bold or italic and then click buttons that usually look like this:

Two buttons, one to make text bold, the other to make text italic
Buttons to make text stand out in a typical writing scenario

This will make your text bold or italic. However, to do the same thing in HTML, we must adjust our thinking about text appearance.

In the first part of this course, we learned that HTML should add meaning to your content. HTML shouldn't be concerned with your content's pure appearance. Adding the right HTML tags allows your web content to be viewed by human eyes, yes, but it also allows browsers and search engines to understand your content — and they don't care how it looks, really! Browsers and search engines only look to your HTML in order to tell elements apart from another. This helps browsers provide a consistent browsing experience across the web.

That's why thinking of text as "bold" or "italicized" doesn't make sense in HTML. "Bold" and "italicized" only describe text appearance. In reality, transforming text like this adds meaning to certain words. Making words bold or italicized actually makes certain text more powerful. 

And, fancy that! The names of the tags you'll use in HTML are <strong> and <em> (for emphasized) to accomplish your goal of making certain text more powerful.

Strong text

Bold text is considered to be "strong" in HTML. Surround the text you wish to strengthen with a <strong> opening tag and a </strong> closing tag.

Whether the text you wish to strengthen appears in the middle of a sentence or is an entire sentence itself, the tag wrapping process is the same.

In the first line of the following code, only two words are strong. In the second line, the whole paragraph is strong.

<p>Sometimes, you'll want to make <strong>certain words</strong> more powerful than the rest of your text.</p>

<p><strong>The "strong" tag in HTML makes text bold by default.</strong></p>
Text with 'strong' tags added, resulting in a bolded appearance by default
Result

Emphasized text

Strong ("bold") text is useful, but sometimes you need more nuance. Enter emphasized text, which produces a default result that is visually identical to italicized text.

<p>Sometimes, you'll want to emphasize <em>certain words</em> more than the rest of your text.</p>

<p><em>The "em" (which stands for emphasis) tag in HTML makes text italicized by default.</em></p>
Text with 'em' tags added, resulting in an italicized appearance by default
Result

Why don't these tags have simpler names, like <bold>?

This is a very good question. Remember that HTML controls content, not appearances. CSS controls appearances instead. By adding <strong> or <em> tags around text you want to make stronger or emphasize, you can use CSS later to change the default behavior of that text. For example, even though <strong> makes text bold by default, you can add custom CSS to make <strong> elements red instead of bold. Either way, the text is stronger. Making it "bold" isn't what counts; it's the importance of the text that matters, and how you reflect that in the text's appearance is up to you.

Practice!

It's your turn to try adding strong (bold) text and emphasis (italics) to content now! Head to this CodePen exercise. Add strength (bold) and emphasis (italics) to the polar bear text, as seen below (click to enlarge). 

Polar Beer text
Polar Bear text

Follow the instructions below:

  1. Add 2 instances of strong text to the article. Hint: surround the following word groups with <strong> and </strong> to mimic the image above:

    polar bear

    white bear

  2. Allow the page to refresh and check your changes in the browser below.

  3. Add 15 instances of emphasized (italicized) text to the article. Hint: add <em> and </em> tags around:

    (Ursus maritimus)

    (Ursus arctos middendorffi)

    Ursus maritimus

    nanook

    nanuq

    nanuuk

    umka

    bélyj medvédj

    Oshkúj

    oski

    ours blanc

    ours polaire

    Isbjørn

    Thalarctos

    Ursus maritimus

Example of certificate of achievement
Example of certificate of achievement