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:
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:
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>
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>
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).
Follow the instructions below:
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
Allow the page to refresh and check your changes in the browser below.
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
