Emphasis and important text

Add meaning to text with , , and .

The strong and em tags

HTML has two basic tags that add meaning to text. Text inside  is marked as important and shown important by the browser.  (emphasis) carries emphasized text; the browser shows it in italics.

The real difference is not visual but semantic. Screen readers read  with a different tone and  with stress.

The mark and small tags

Text inside  looks highlighted, as if drawn with a highlighter. The browser shows it with a yellow background by default. Use it to draw the reader's attention.

 carries small print: side notes, copyright notes or footnotes. Again, the meaning — not the look — is the point.

Semantic inline tags

, ,  and  are semantic inline tags. Their job is to mark the meaning of text, not its appearance. You adjust appearance with CSS; in HTML you mark meaning.

So using  just to make text bold is not correct — boldness is CSS's job. Use  only when the text is really important.

Exercise Write a meaningful sentence

Add a  to body. Inside it, include a  (for example important), an  (for example note), a  (for example tomorrow), and a  (for example At 10 am.).

Show example solution

<body>
  <p>This is an <strong>important</strong> <em>note</em>: <mark>tomorrow</mark> there is a meeting. <small>At 10 am.</small></p>
</body>

Test yourself

Which tag marks important text?
- 
- 
- 
- 
Show answer

 — Correct. carries important text.

Wrap the important word

<p>This is ____ topic.</p>

Show answer

<p>This is <strong>important</strong> topic.</p>

Which tag suits side notes or small print (e.g. copyright)?
- 
- 
- 
- 
Show answer

 — Correct. is for side notes and small print.
Match each tag to its role



Important text


Emphasized text


Highlighted text


Side note / small print

Next lesson: Quotations and sources

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies