Text Formatting

Inside a paragraph, some words need special treatment: a warning that matters, a word you stress when speaking, a chemical formula, a keyboard shortcut or an old price that has been cut. HTML has a small element for each of these jobs.

The key idea of this lesson is that these elements describe meaning, not looks. Browsers give each one a default style, such as bold or italic, but you choose the element for what the text is. CSS can always change how it looks.

Importance and emphasis: strong and em

<strong> marks text that is important, serious or urgent. <em> marks stress emphasis: the word you would say louder when reading aloud, which changes the meaning of the sentence.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>strong and em</title>
</head>
<body>
  <p><strong>Warning:</strong> the exam hall closes at 9:45 am sharp.</p>
  <p>I <em>did</em> pay the hostel fee. (Someone doubted it.)</p>
  <p>I did pay the <em>hostel</em> fee. (Not the mess fee.)</p>
</body>
</html>

The last two sentences have the same words, but moving the <em> changes what the speaker means. That is the test for <em>: if you read the sentence aloud, would your voice stress this word?

When it is not about importance: b and i

Sometimes text is styled differently by convention, without being more important. That is what <b> and <i> are for today.

• <i> marks text in an alternate voice: a word from another language, a technical or scientific term, a ship or train name, or a thought. Add lang for foreign words so screen readers pronounce them properly.
• <b> draws attention to a word without adding importance: a product name in a review, or key words at the start of a news summary.

<p>The mango, <i>Mangifera indica</i>, is the national fruit of India.</p>
<p>Every evening she said <i lang="hi">chalo, chai peete hain</i> and we walked to the stall.</p>
<p>We tested the <b>Rohtak Willow Pro</b> bat for a full season.</p>

Highlights, small print and changes

These elements show text that is marked, minor, outdated or edited.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Marking changes</title>
</head>
<body>
  <p>Search results for "dosa": Best <mark>dosa</mark> in Kochi.</p>
  <p>School bag: <s>₹1,999</s> ₹1,499 this week only.</p>
  <p>Meeting moved to <del>Friday</del> <ins>Saturday</ins>.</p>
  <p><small>Prices include GST. Offer valid while stock lasts.</small></p>
</body>
</html>

• <mark> highlights text because it is relevant right now, such as the words someone searched for.
• <s> marks text that is no longer accurate, like an old price. It stays visible so the reader can compare.
• <del> and <ins> mark text that was deleted from or inserted into a document, like tracked changes. Both accept a datetime attribute recording when the change was made.
• <small> is for side comments and small print, such as terms and copyright lines. It does not mean "make any text smaller".

Subscript and superscript

<sub> lowers text and <sup> raises it. Use them where the position changes the meaning, such as formulas, powers and footnote markers.

<p>Water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub>.</p>
<p>The area of a square of side 4 cm is 4<sup>2</sup> = 16 cm<sup>2</sup>.</p>
<p>Rohan came 1<sup>st</sup> in the district quiz.</p>

Computer text: code, kbd, samp and var

When you write about computers, these four elements tell the reader exactly what kind of text they are looking at. Browsers show most of them in a monospace font.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Computer text</title>
</head>
<body>
  <p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save your file.</p>
  <p>VS Code shows <samp>Saved</samp> in the status bar.</p>
  <p>Use the <code>lang</code> attribute to set the language.</p>
  <p>If <var>x</var> = 5, then 2<var>x</var> = 10.</p>
</body>
</html>

For a block of code over several lines, put <code> inside <pre> so the spacing is kept: <pre><code>...</code></pre>.

Abbreviations and dates

<abbr> marks an abbreviation. Write the full form in the text the first time you use it, or put it in a title attribute. Remember that a title tooltip is invisible on phones, so writing it out in the text is kinder.

<time> marks a date or time. Its datetime attribute holds a machine-readable version that search engines, calendars and scripts can understand, while the visible text can be written any way you like.

<p>Pay your fee through <abbr title="Unified Payments Interface">UPI</abbr>.</p>
<p>The <abbr>ISRO</abbr> (Indian Space Research Organisation) exhibition is on
  <time datetime="2026-11-14">14 November</time>, from <time datetime="10:00">10 am</time>.</p>

Do not use formatting for looks

Every element in this lesson comes with a default style, and it is tempting to pick one just for that style. Resist it. If a heading should be blue and italic, use CSS. If a whole paragraph is small grey text for design reasons, use CSS. Keep the elements for their meaning, and you will be able to restyle the whole site later without touching the HTML.

One element deserves a special warning: <u>. It underlines text, and readers expect underlined text on the web to be a link. Its real job is narrow, such as marking a spelling mistake, so you will rarely need it.

Common mistakes

• Making everything <strong>. If half the paragraph is important, nothing stands out. Use it for the few words that really matter.
• Using <i> or <b> only for looks. Use CSS for visual style, or the right meaningful element.
• Using <small> to make any text smaller. It means small print, not "small size".
• Using <s> for edits. For tracked changes to a document, use <del> and <ins>.
• Using <u> for emphasis. Underlined text looks like a link and confuses readers.

Key points

• Formatting elements describe meaning; CSS controls the final look.
• <strong> is for importance; <em> is for stress that changes the meaning.
• <i> is for an alternate voice such as foreign words; <b> draws attention without extra importance.
• <mark> highlights, <s> marks outdated text, <del> and <ins> mark edits, <small> is small print.
• <sub> and <sup> are for formulas, powers and footnotes.
• <code>, <kbd>, <samp> and <var> describe computer text; <abbr> and <time> add useful details.

<p><strong>Important:</strong> bring your ID card to every class.</p>
<p>Monthly fee: <s>₹2,500</s> ₹2,000 for students who join this month.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>D</kbd> to bookmark this page.</p>
<p>Tomorrow's topic: the area of a circle, π<var>r</var><sup>2</sup>.</p>
<p>The first mock test is on <time datetime="2026-12-06">6 December</time>.</p>