Formatting text

Why you need this

Plain text is hard to read: the eye looks for what matters. In a book, important things are in bold, terms in italics, someone else's words in quotes. HTML has separate tags for this. And they tell not only "how it looks" but also what it means: "this is important", "this is a quote", "this is code". This helps search engines and screen readers.

Bold and italic: <strong> and <em>

• <strong> — important text. The browser shows it in bold.
• <em> (emphasis) — stress in meaning. Shown in italics.

<p>Before leaving, <strong>turn off the stove</strong>. It <em>really</em> matters.</p>

Result: «turn off the stove» in bold, «really» in italics.

There are also <b> and <i> — simply bold and simply italic, without the meaning "important". They are used less often: for example, <i> for the name of a ship or a foreign word.

Other inline tags

<p>Water is H<sub>2</sub>O, the area is 10 m<sup>2</sup>.</p>
<p>Price: <s>500</s> 350. <mark>Sale!</mark></p>
<p><small>Contract fine print</small></p>

Result: the «2» in H₂O is lowered, the «2» in m² is raised, «500» is crossed out, «Sale!» is highlighted in yellow, the last line is in small print.

Tag	Meaning
<sub>	subscript
<sup>	superscript (power)
<s>	crossed out, no longer relevant
<mark>	highlighted with a marker
<small>	a small note

These tags are inline: they live inside a paragraph and don't start a new line. <p> and <h1> are block tags: each takes the full width and starts on a new line.

Quotes

A long quote is a <blockquote> block; a short one inside a sentence is <q> (the browser adds the quotation marks itself). The author or source goes in <cite>:

<blockquote>
  <p>Simplicity is prerequisite for reliability.</p>
  <cite>Edsger Dijkstra</cite>
</blockquote>
<p>He said: <q>Tests first</q>.</p>

Result: the quote is indented, the author's name is in italics; in the second paragraph «Tests first» is in quotation marks.

Code on the page

For code there is the <code> tag: a monospaced font, all letters the same width. Multi-line code goes in <pre> — it keeps spaces and line breaks as they are:

<p>The <code>print()</code> function outputs text.</p>
<pre><code>for i in range(3):
    print(i)</code></pre>

Result: print() in a monospaced font right in the sentence, and below it the code with indents, as in an editor.

Special characters

How do you show the < sign itself on a page? If you type it directly, the browser decides a tag is starting. So special characters are written as entities — codes from & to ;:

We write	We see
&lt;	< (less than)
&gt;	> (greater than)
&amp;	&
&nbsp;	non-breaking space
&copy;	©

<p>Condition: a &lt; b &amp;&amp; b &gt; c</p>
<p>10&nbsp;km</p>

Result: Condition: a < b && b > c; «10 km» will never break across two lines.

How it works inside

When the browser sees <, it switches into "reading a tag" mode. The entity < is a way to say: "this is just a character, not a tag". Inside <pre> the browser turns off space collapsing, so the indents in code stay in place — but tags inside <pre> still work.

Common mistakes

1. <strong> for a bold heading. If it is a heading, use <h2>, not a bold paragraph.
2. Code without <pre>. Multi-line code in a plain <p> gets glued into one line.
3. Raw < and > in text. <p>Tag <div></p> — <div> becomes a real tag and disappears. Write <div>.
4. A missing semicolon. &lt without ; sometimes works, sometimes not. Write it in full: <.
5. <blockquote> just for an indent. This tag is for quotes; indents are done in CSS.

Cheat sheet

Tag	What it does
<strong> / <em>	important (bold) / emphasis (italic)
<b> / <i>	bold / italic without special meaning
<sub> / <sup>	subscript / superscript
<s>, <mark>, <small>	crossed out, marker, small text
<blockquote>, <q>, <cite>	long quote, short quote, author
<code>, <pre>	code, text with spaces kept
&lt; &gt; &amp; &nbsp;	< > & non-breaking space