EN

HTML・Polishing your text

Let's emphasize text

When you want to say "this part matters!" Learn how to use strong and em to gently make just part of your text stand out.

When you’re writing, there’s often that one phrase where “please don’t skip past this part.” That’s when you reach for tags that emphasize text. This time you’ll learn the two main ones, <strong> and <em>.

Important spots use strong

<strong> is a tag that carries the meaning “this is important.” In many browsers, the text it holds is shown in bold.

<p>For payment, <strong>cash only</strong>, please.</p>
Just the “cash only” part turns bold and catches your eye right away.

This way, only “cash only” becomes bold and catches your eye right away. The point is that it’s not just decoration — it carries the meaning of “important.”

For a change in tone, use em

<em> is short for emphasis. It’s a tag with the nuance of “read this part with a little force,” and in many browsers it’s shown in italics.

<p>This is a <em>really</em> recommended book.</p>
Just the “really” part turns italic and looks slightly slanted.

When you read it aloud, you put a bit more force on “really” — that’s the feeling. If <strong> is “important,” then <em> is “the nuance of how it’s said.” Telling them apart will come naturally as you get used to it.

Layering the two together

When you want a spot that’s “both important and carries force in how it’s said,” you can nest <strong> and <em> to layer them.

<p><strong><em>No matter what</em>, please don't forget.</strong></p>
The “no matter what” part has both bold and italics applied, and looks the strongest.

You get a look with both bold and italics applied, letting it carry the meaning of both “important” and “nuance.” But this is a combo move for the moments that really count. Usually, either <strong> or <em> on its own is enough.

Summary of this lesson

  1. Especially important spots use <strong> (usually turns bold)
  2. Spots where you want force in the words use <em> (usually turns italic)
  3. Choose both by “meaning,” not by “look”

Try it: emphasize your self-introduction

In the self-introduction on Shima’s page, emphasize the words you most want to convey with <strong>.

<h2>Self-Introduction</h2>
<p>Hi! I'm Shima. I <strong>love</strong> drawing, and on weekends I often go out for ramen.</p>

The <h2> and <p> are what you wrote in a previous lesson. What you add this time is just the <strong> … </strong> in the middle of the sentence. The “love” it wraps turns bold.

Browser view. In the sentence under the “Self-Introduction” heading, only “love” is in bold
Just “love” turns bold and catches your eye right away.

Emphasis, used too much, makes it hard to tell what matters after all. Use it only on that one phrase that counts. And with that, your writing now has “highs and lows.”

FAQ

Can I use strong or em as many times as I like in one piece of text?
There's no set limit on the count, but overusing them makes it hard to tell what really matters. The knack is to use them only on the one phrase that truly counts.
Can I combine them, like putting an em inside a strong?
Yes. Layering the two lets you mark a spot that is both important and carries a nuance. But using it a lot makes text hard to read, so save it for the moments that really count.
Can I use strong or em inside a heading (h1 or h2)?
Yes. You can use them when you want to further emphasize just part of a heading, but since a heading is already prominent text, save it for when you truly need it.