In short
HTML text formatting tags like <strong>, <em>, <mark> and <code> add meaning to words in your content. Learn which tag to choose and why meaning matters more than looks. Meaning vs look: why it matters Some HTML tags make text look bold or italic.
HTML text formatting tags like <strong>, <em>, <mark> and <code> add meaning to words in your content. Learn which tag to choose and why meaning matters more than looks.
Meaning vs look: why it matters
Some HTML tags make text look bold or italic. But in modern HTML, each tag has a meaning (also called semantics). The look is just the browser's default way to show that meaning.
Why care? Screen readers, search engines and translation tools read the meaning, not the look. And you can always change the look later with CSS. So pick the tag that describes why the text is special.
Strong vs b, and em vs i
These four tags are the most confusing, so let's compare them.
| Tag | Meaning | Default look |
|---|---|---|
<strong> | Important, serious or urgent | Bold |
<b> | Draw attention, but not more important | Bold |
<em> | Stress emphasis that changes the meaning | Italic |
<i> | Different voice: a foreign word, a term, a thought, a ship name | Italic |
<p><strong>Warning:</strong> the oven door gets very hot.</p>
<p>I <em>love</em> this cake. (Not just "like" it.)</p>
<p>In Spanish, a bakery is called a <i lang="es">panadería</i>.</p>
<p>Today's special: <b>lemon tart</b> with fresh cream.</p>You will see "Warning:" and "lemon tart" in bold, and "love" and "panadería" in italics. They look similar, but the meaning is different. Some screen readers change their voice for <em>, just like you would stress a word when speaking.
Tip: When unsure, use
<strong>for important text and<em>for stressed words. These are the right choice most of the time.
Mark, small, sub and sup
<p>Search results for "sourdough": the best <mark>sourdough</mark> needs time.</p>
<p>Price: £4.50 <small>Prices include VAT.</small></p>
<p>Water is H<sub>2</sub>O.</p>
<p>The area is 25 m<sup>2</sup>. This is the 1<sup>st</sup> floor.</p><mark>highlights text that is relevant right now, like a search word. It usually looks like a yellow highlighter.<small>is for side comments and small print, like legal notes or copyright.<sub>(subscript) puts text slightly lower, used in chemical formulas.<sup>(superscript) puts text slightly higher, used for powers and "1st".
Line breaks and dividers: br and hr
<br> makes a line break inside the same block of text. Use it where the line break is part of the content, like an address or a poem. Don't use it to add space between paragraphs.
<hr> stands for a thematic break: a change of topic between sections. Browsers show it as a horizontal line.
<p>Corner Café<br>8 Station Road<br>Bristol BS1 4DJ</p>
<hr>
<p>Now let's talk about our weekend menu.</p>The address appears on three lines, then a line across the page, then the next paragraph.
Quotes and code: blockquote, q and code
Use <blockquote> for a longer quote that stands on its own, and <q> for a short quote inside a sentence. The browser adds quotation marks to <q> for you, so don't type them yourself.
Use <code> for a short piece of computer code inside your text.
<blockquote cite="https://example.com/reviews">
<p>The best cinnamon rolls in the city. We come back every Sunday.</p>
</blockquote>
<p>As my grandmother said, <q>Good bread needs patience.</q></p>
<p>To make text important, use the <code>strong</code> element.</p>The blockquote is indented from the left. The short quote appears with quotation marks around it. The word "strong" is shown in a monospace font, where every letter has the same width, like a typewriter. The cite attribute stores the source address of the quote. It is not shown, but it is useful information.
Common mistake: Using
<blockquote>just to indent text. It means "this is a quote". For indenting, use CSS.
Practice exercise
Write a short product description for a pair of trainers. Include one important safety note with <strong>, one stressed word with <em>, the price with a <small> note about delivery, and a short customer quote with <q>.
Hint: ask yourself "why is this text special?" for each word, then pick the tag that matches the reason.
Key takeaways
- Choose formatting tags for their meaning, not their look; CSS can change the look.
<strong>means important and<em>means stressed;<b>and<i>are for attention and different voice.<mark>,<small>,<sub>and<sup>each have a clear, specific job.- Use
<br>only inside content like addresses, and<hr>for a change of topic. - Use
<blockquote>for long quotes,<q>for short ones and<code>for code.