Text Formatting
Today we look at text formatting tags that wrap a few words for meaning: strong for importance, em for emphasis, and mark for a highlight the reader should notice.
- 1
Formatting a few words
Last lesson we built the outline of a page with headings and paragraphs. Sometimes one word inside a paragraph needs extra meaning: it is important, it needs stress, or it should be highlighted like a note.
That is text formatting. You wrap only those words in a small inline element. In today's example we use three tags:
<strong>,<em>, and<mark>. - 2
The Uniformity Problem: When Every Word Looks Equally Flat
A plain paragraph treats every word the same. In a sale notice, the new price matters more than the rest of the sentence. A spoken stress on one word changes how the line is heard. A highlighted phrase tells the reader, “look here.”
So HTML added small signs for those jobs.
<strong>marks importance.<em>marks emphasis.<mark>marks a highlight in the current context. The browser may show them bold, italic, or with a yellow background, but the first job of each tag is meaning. - 3
How Browsers Render Inline Semantic Tokens
These three tags are inline. They sit inside the paragraph and do not start a new line. The browser still sees one
<p>, with a few words marked inside it — the same idea you saw when<strong>sat inside a paragraph in the Elements lesson.Wrap only the words that need the meaning. If you wrap the whole paragraph in
<strong>, nothing stands out any more. - 4
Hands-On: Accentuating Discounts in a Promotional Sentence
Read the short sale line below, then look at the browser pane. Notice which words look bold, which look stressed, and which are highlighted.
- 5
The Golden Rule: Semantics First, Appearance Second
Prefer
<strong>and<em>when the words carry importance or stress. Later, CSS can change how they look. Today we stay with meaning, and with the three tags in the example.
Conveys serious importance or verbal emphasis. Screen readers alter tone and pitch when reading aloud. Search engines assign higher relevance.
Only alters font weight or slant without implying importance. Screen readers read them flatly with normal intonation.
What you'll learn
- 1Why a few words inside a paragraph need meaning
- 2strong marks importance
- 3em marks emphasis
- 4mark highlights text in context
- 5Wrap only the words that need it
Line by line
<strong>₹499</strong>Marks important text. Browsers usually show it bold, and assistive tools treat it as important.
<em>must</em>Marks emphasis, the stress you would put on a word when reading aloud. Browsers usually show it in italics.
<mark>Offer ends Friday.</mark>Highlights text as relevant in this context, like a highlighter on notes. The default look is often a yellow background.
Try it yourself
Write one paragraph about a small sale. Put the price in <strong>, one stressed word in <em>, and the last date in <mark>.
Hint: Wrap only those words. Do not wrap the whole paragraph in strong.
Common mistakes
- 1.Wrapping the entire paragraph in
<strong>. Then nothing is special any more. - 2.Choosing tags only for looks. Pick
strong,em, ormarkfor the meaning first. CSS can change the appearance later.
Interview prep (Click to reveal)
Q: What is the semantic distinction between <strong> and <b>?↓
<strong> conveys high importance or urgency to both search engines and assistive technology (which alters vocal tone). <b> is purely stylistic for drawing visual attention without conveying extra importance.
Q: How do <em> and <i> differ for accessibility?↓
<em> indicates stress emphasis that changes the spoken meaning of a sentence, which screen readers pronounce with altered pitch. <i> denotes alternate voice or mood (e.g., technical terms, foreign phrases, thoughts) without stress emphasis.
Q: When should the <mark> tag be used?↓
Use <mark> to highlight text for reference or search relevance in the current context (simulating a highlighter pen on paper), such as marking query matches in search results.