HTML Text Formatting

Meaning First, Appearance Second

HTML gives you two elements that produce bold text and two that produce italics, which looks like duplication until you realise they are answering different questions. <strong> and <em> describe meaning; <b> and <i> describe presentation without extra meaning. The browser happens to render them the same way, which is why so many people use them interchangeably and never notice.

<strong> marks content with strong importance, seriousness or urgency — a warning, a deadline, the word "not" in a safety instruction. <em> marks stress emphasis, the word you would lean on if you read the sentence aloud. Notice that changing which word you emphasise changes what the sentence means: "I never said she took the money" means six different things depending on where the stress falls.

Be honest about the payoff, because tutorials often overstate it. Most screen readers do not announce bold or italic by default — a listener will not hear the difference between <b> and <strong> unless they turn that feature on. The real benefits are elsewhere: the markup records why the text is styled that way, so a future reader of your code knows whether the styling can safely change; search engines and text-processing tools can use the distinction; and users who do enable formatting announcements get the information you meant to convey.

<!-- Importance and urgency -->
<p><strong>Do not</strong> connect the motor while the battery is charging.</p>
<p>Submissions close on <strong>15 March</strong>. Late entries are not accepted.</p>

<!-- Stress emphasis: the word you would lean on -->
<p>We asked for the <em>final</em> report, not the draft.</p>

<!-- Emphasis inside emphasis is allowed and increases the stress -->
<p><em>Please</em> read the <em>whole</em> notice.</p>

• <strong> — this content is important, serious or urgent
• <em> — this word carries the stress in the sentence
• <b> — draw the eye here, but nothing more is implied
• <i> — this is in a different voice or mood from the surrounding text
• None of the four should be used simply because you wanted bold or italic styling — that is what CSS is for

When b and i Are the Right Choice

You may have been told that <b> and <i> are deprecated. They are not. HTML5 kept both and redefined them so that they describe a change in presentation with no extra importance attached, which is a genuinely useful thing to be able to say.

<b> fits keywords you want the eye to catch — the product name at the start of each entry in a review list, or the lead sentence of an article. Nothing about them is more important than the surrounding text; you just want them to stand out. <i> fits text in an alternate voice: a technical term being introduced, a phrase in another language, a scientific name, a character's inner thought.

In day-to-day work you will use <strong> and <em> far more often, and reaching for them by default is a safe habit. The one thing to avoid entirely is using any of the four purely to get a font weight, because then your markup is lying about your content and you have made your styling impossible to change globally.

<!-- <i> for a term in another language or a technical term -->
<p>The Hindi word <i lang="hi">namaste</i> is a common greeting.</p>
<p>A <i>callback</i> is a function passed as an argument to another function.</p>

<!-- <b> to make keywords stand out, with no extra importance -->
<p><b>Arduino Uno</b> — the board most beginner projects start with.</p>

<!-- Wrong: using markup to get a style -->
<p><b>Chapter 3</b></p>

<!-- Right: it is a heading, so mark it as one and size it in CSS -->
<h2>Chapter 3</h2>

Showing Changes: del, ins, s and mark

<del> and <ins> mark text that has been removed from or added to a document — an edit history made visible. Both accept a datetime attribute recording when the change happened and a cite attribute pointing at an explanation. A price list showing a revised fee, or a notice showing a corrected date, is exactly the intended use.

<s> also renders as struck-through text, but it means something narrower: content that is no longer accurate or relevant, without implying that the document was edited. A sold-out item on a shop page fits <s>; a corrected sentence in a published notice fits <del>.

<mark> highlights text that is relevant in the current context — the classic case is highlighting the search term inside a set of results. It is not a general-purpose highlighter pen. If you want a yellow background because it looks nice, that is background-color in CSS.

<!-- An edit to the document, with a date -->
<p>The workshop fee is
  <del datetime="2026-02-10">Rs 500</del>
  <ins datetime="2026-02-10">Rs 350</ins>
  for club members.</p>

<!-- No longer relevant, but not an edit -->
<p><s>Robotics Challenge — 12 March</s> This event has been cancelled.</p>

<!-- Highlighting a search term in results -->
<p>Showing results for <mark>sensor</mark>:</p>
<p>Ultrasonic <mark>sensor</mark> wiring guide</p>

Small Print, Abbreviations, Subscript and Superscript

<small> means side comments and small print — a copyright line, a legal disclaimer, an attribution under a photograph. It is not "make this text smaller", though that is how it renders. If you want smaller text for design reasons, use font-size.

<abbr> marks an abbreviation, and its title attribute holds the expansion. Hovering shows a tooltip on a desktop browser. It is worth knowing the limitation: tooltips do not appear on touch screens at all, and support in screen readers is inconsistent. So use <abbr>, but never let the title be the only place the expansion exists — spell the term out in full the first time you use it, exactly as this course does with jargon.

<sub> and <sup> produce subscript and superscript, and here the meaning really is typographic. They are the correct elements for chemical formulae, mathematical powers, ordinal suffixes and footnote markers. Do not use them to make text small and raised for decoration.

<!-- Small print -->
<footer>
  <p><small>Fees are non-refundable after the registration deadline.</small></p>
</footer>

<!-- Abbreviation, expanded in the text as well as in the title -->
<p>The Hypertext Transfer Protocol
  (<abbr title="Hypertext Transfer Protocol">HTTP</abbr>)
  is how browsers request pages.</p>

<!-- Subscript and superscript -->
<p>Water is H<sub>2</sub>O.</p>
<p>The area of the plate is 24 cm<sup>2</sup>.</p>
<p>Held on the 5<sup>th</sup> of March.</p>

• <small> — fine print and side comments, not a font-size control
• <abbr title="..."> — an abbreviation plus its expansion; expand it in the visible text too
• <sub> — subscript, for formulae such as H₂O
• <sup> — superscript, for powers, ordinals and footnote markers
• <mark> — relevance in the current context, most often a matched search term

Quotations and Code

<blockquote> marks a quoted block of content and takes an optional cite attribute holding the source URL. <q> marks a short inline quotation, and the browser adds the quotation marks itself — so typing your own quotation marks inside a <q> gives you two sets. <cite> marks the title of a creative work such as a book, film or paper; note that per the specification it is the title, not the person's name.

For showing code on a page, <code> marks a fragment of computer code inline. To show a multi-line block you need <pre> around it, because <code> alone does not stop whitespace from collapsing — the pairing <pre><code>...</code></pre> is the standard way to display a code sample. Remember that any angle brackets inside must be escaped, or the browser will treat them as tags.

Three related elements are worth knowing because they appear in technical writing: <kbd> for keys the user presses, <samp> for output a program produced, and <var> for a variable name. None of them is essential, but using them makes technical documentation much easier to style consistently.

<blockquote cite="https://example.com/report">
  <p>The club completed eleven projects during the academic year.</p>
</blockquote>
<p>— from the <cite>Annual Activity Report</cite></p>

<!-- Browsers supply the quotation marks for <q> -->
<p>The notice said <q>bring your own laptop</q>, so I did.</p>

<!-- Inline code, and a multi-line block -->
<p>Close the loop with <code>break</code> when the sensor reads zero.</p>

<pre><code>for (let i = 0; i &lt; 5; i++) {
  console.log(i);
}</code></pre>

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>