If you've been following along with this series, you've learned how to use HTML headings, HTML paragraphs, and HTML lists in your blog posts. You're pretty close to being able to write all of your posts in HTML, all the time!
Today we're going to talk about the HTML elements <em> and <strong>, and their older siblings, <b> and <i>.
Knowing about all four of these elements, and using them when appropriate, gives you maximum flexibility for styling and clarity. At the end of this post I'll show a few examples of how to put these different elements to creative use in blog posts.
Choosing the right element from this group of four is a lot like choosing the right tone of voice to say something in; it's a bit subjective, and it's hard to use them "wrong" as long as you know what each element stands for. So let's see what they do!
<strong> Strong
Use a <strong> tag to indicate very important text when it's not appropriate to use a heading element. Good candidates for the <strong> tag are warnings, disclaimers, and exclamations.
Here's how you create a strong element:
<strong>Extra important text here!</strong>
And here's how that looks in the browser:
Extra important text here!
<em> Emphasis
Use an <em> tag when you want to emphasize a word or phrase. I use <em> a lot (see what I did there?) when I want to mimic the stresses I'd use if I were talking to you out loud.
Here's how to create an emphasis element:
<em> I really mean it! </em>
And here's how that looks in the browser:
I really mean it!
<strong> and <em> vs. <b> and <i>
You've probably noticed that by default, the <strong> tag bolds the text, and the <em> tag italicizes it. If you're familiar with the <b> bold element and the <i> italic element, then you know that they bold and italicize text, too.
So, what's the difference?
Back in the early days of HTML, when web pages were mostly just text and blue links, the bold and italic tags were used to style text. Now that we have CSS to do our styling, many web developers feel that there's no reason to keep the bold and italic elements in the HTML specification. If you've talked to developers, you may have been told to never use <b> or <i> tags in your HTML.
However, the W3C, the governing body of HTML, disagrees. Both <b> and <i> are in the HTML5 specification and will remain a part of HTML for the foreseeable future. Though they're not as important as the <strong> and <em> elements, they do come in handy in certain circumstances, and you should know how they work!
<b> Bold
The <b> tag bolds your text, but does not assign the text any special importance. Good uses of the <b> tag are product names in reviews or keywords in an educational post.
You create a bold element like this:
Let's learn about <b>herbivores</b>!
Here's how that looks in the browser:
Let's learn about herbivores!
<i> Italic
The <i> tag italicizes your text, but does not give it any extra emphasis. It's good for marking up technical or scientific terms, and it's particularly useful if you blog in more than one language. I'll show you an example of how to style foreign-language text at the end of this post.
You create an italic element like this:
Let's talk about <i>Tyrannosaurus Rex</i>.
Here's how that looks in the browser:
Let's talk about Tyrannosaurus Rex.
That's all you need to know about <strong>, <em>, <b>, and <i> to start using them in your blog posts. But, if you want to try your hand at a little CSS, I can show you two examples of how to use some of these elements with style!
Two Creative Uses for These Elements
Now that you have the HTML basics of these elements in mind, I'm going to show you two examples of how you can use CSS to style different elements in useful ways. (RSS readers, you'll need to click through to see these CSS effects at work.)
For the sake of brevity I'm going to show the CSS styling the elements directly. You may need to add classes to the elements to style them the same way on your blog, depending on your template's CSS.
1) Super Strong!
Let's say you blog about dynamite and other explosives, and you mark up your warnings with <strong> tags. To make those strong statements really stand out, let's give them some intensity, like this:
DO NOT taunt a bear with a firecracker.
The HTML
<p><strong>DO NOT</strong> taunt a bear with a firecracker.</p>
The CSS
I enlarged the text and turned it red with this bit of CSS:
strong {
font-size: 1.6em;
color: red;
}
2) Italic for Foreign Language
One great use of the <i> italic tag is to highlight and clarify text in a foreign language. Let's say for example that you're a food blogger, and you cook the cuisines of the world. If you set all of your foreign-language food words with an <i> tag, you can use an HTML title attribute and a bit of CSS to help your readers.
Hover your cursor over the italicized & underlined word in this sentence:
Today I'm making dulce de leche
You should see a question mark cursor and some extra information about dulce de leche when you hover. Pretty cool, right? Here's how I did it:
The HTML
<p>Today I'm making <i title="Spanish - sweetened milk dessert">dulce de leche</i></p>
The CSS
I added the dotted underline and the question mark cursor with this little bit of CSS:
i {
border-bottom: 1px dotted gray;
cursor: help;
}
Those are just two examples to give you a taste of the infinite possibilities with these four useful elements!
What's Next?
Next, learn about the HTML of images in Practical HTML for Bloggers - Images.
Title cards for this series designed by the dazzlingly wonderful Jenna from Little Bit Heart.
