Emphasis and important text
Add meaning to text with <strong>, <em>, <mark> and <small>.
The strong and em tags
HTML has two basic tags that add meaning to text. Text inside <strong> is marked as important and shown important by the browser. <em> (emphasis) carries emphasized text; the browser shows it in italics.
The real difference is not visual but semantic. Screen readers read <strong> with a different tone and <em> with stress.
The mark and small tags
Text inside <mark> 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.
<small> carries small print: side notes, copyright notes or footnotes. Again, the meaning — not the look — is the point.
Semantic inline tags
<strong>, <em>, <mark> and <small> 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 <strong> just to make text bold is not correct — boldness is CSS's job. Use <strong> only when the text is really important.
Exercise Write a meaningful sentence
Add a <p> to body. Inside it, include a <strong> (for example important), an <em> (for example note), a <mark> (for example tomorrow), and a <small> (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?
- <em>
- <mark>
- <strong>
- <small>
Show answer
<strong> — Correct. <strong> 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)?
- <strong>
- <em>
- <mark>
- <small>
Show answer
<small> — Correct. <small> is for side notes and small print.
-
Match each tag to its role
- <strong>
- Important text
- <em>
- Emphasized text
- <mark>
- Highlighted text
- <small>
- Side note / small print