Text formatting · HTML

HTML has an element for every kind of emphasis and special text. Choose them for what they mean; CSS decides how they look.

Importance and emphasis

HTML

<p><strong>Warning:</strong> the oven is hot.</p>
<p>I <em>really</em> mean it.</p>
<p>The word <b>bold</b> and the word <i>italic</i>, with no extra meaning.</p>

Element	Meaning	Default look
`<strong>`	important or urgent	bold
`<em>`	stressed, the way you'd say it out loud	italic
`<b>`	draws the eye, without extra importance	bold
`<i>`	a different voice: a technical term, a thought, a foreign word	italic

Screen readers can announce <strong> and <em> differently, which is why meaning matters more than looks.

Highlights, small print and edits

HTML

<p>Results for <mark>closure</mark>: a function that remembers its scope.</p>
<p><small>Prices include tax. Offer ends Friday.</small></p>
<p>Price: <del>₹999</del> <ins>₹699</ins></p>

<del> and <ins> mark removed and added text, which is why browsers strike through the first and underline the second.

Subscript and superscript

HTML

<p>Water is H<sub>2</sub>O.</p>
<p>E = mc<sup>2</sup>, and this is the 1<sup>st</sup> example.</p>

Code and keyboard keys

HTML

<p>Call <code>print()</code> to show output.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<pre><code>def greet(name):
    return f"Hello, {name}"</code></pre>

<pre> keeps spaces and line breaks exactly as typed, which code needs. A block of code is written <pre><code>...</code></pre>.

Quotations

HTML

<blockquote cite="https://www.w3.org/WAI/fundamentals/accessibility-intro/">
  <p>The power of the Web is in its universality.</p>
</blockquote>
<p>Tim Berners-Lee, <cite>inventor of the World Wide Web</cite></p>

<p>She said <q>see you tomorrow</q> and left.</p>

<blockquote> is for a quotation set apart as its own block; <q> is for a short quote inside a sentence, and adds the quotation marks for you.

Abbreviations

HTML

<p><abbr title="HyperText Markup Language">HTML</abbr> describes structure; <abbr title="Cascading Style Sheets">CSS</abbr> describes appearance.</p>

Hover over an abbreviation to see what it stands for.

Line breaks and dividers

HTML

<p>221B Baker Street<br>London<br>NW1 6XE</p>
<hr>
<p>A new topic starts after the line.</p>

Use <br> only where the line break is part of the content, like an address or a poem. Never use it to add space between paragraphs; that's a job for CSS margins.

Special characters

A few characters mean something in HTML, so to show them as text you write entities:

HTML

<p>5 &lt; 10 and 10 &gt; 5</p>
<p>Fish &amp; chips</p>
<p>&copy; 2026 CodeMIRAI &middot; made with &hearts;</p>
<p>No&nbsp;break&nbsp;here, even in a narrow box.</p>

Entity	Shows	Why you need it
`<` and `>`	< and >	a bare `<` would start a tag
`&`	&	a bare `&` starts an entity
` `	a space that never breaks	keeps words like "10 km" on one line
`©`	©	there's no © key on most keyboards