Text formatting, quotes and special characters

Headings and paragraphs give a page its shape. Inside that text you often need to stress a word, show a price change, quote someone or print a symbol like © or <. HTML has a small set of elements for this, and each one has a meaning, not just a look.

Strong and emphasis

Screen readers can change their voice for <strong> and <em>, so use them when the meaning matters. If you only want a look (bold headings in a card, for example), use CSS instead.

<p><strong>Warning:</strong> the office closes at 5 pm on Fridays.</p>
<p>I <em>really</em> need the report today.</p>
<p>We sell <b>Marzley Duka</b>, a shop system for small businesses.</p>
<p>The word <i lang="sw">karibu</i> means "welcome".</p>
<p>Search results: learn <mark>HTML</mark> in Kenya.</p>
<p><small>Prices include 16% VAT.</small></p>

Changes, subscripts and superscripts

<p>Price: <del>KSh 2,500</del> <ins>KSh 1,999</ins></p>
<p>Water is H<sub>2</sub>O.</p>
<p>The area is 25 m<sup>2</sup>. This is the 1<sup>st</sup> edition.</p>

• <del> shows text that was removed (crossed out), <ins> shows text that was added (underlined).
• <sub> sits below the line, <sup> sits above it.

Quotes, citations and code

<blockquote cite="https://en.wikipedia.org/wiki/Wangari_Maathai">
  <p>It's the little things citizens do. That's what will make the difference.</p>
</blockquote>
<p>— <cite>Wangari Maathai</cite></p>

<p>As the saying goes, <q>haraka haraka haina baraka</q>.</p>

<p>Use the <code>print()</code> function to show text in Python.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

<pre>
Name      Marks
Amina     78
Otieno    84
</pre>

• <blockquote> is a long quote on its own; browsers indent it.
• <q> is a short quote inside a sentence; the browser adds the quote marks.
• <cite> is the title of a work or the name of the source.
• <code> is a piece of computer code, <kbd> is a key the user presses.
• <pre> keeps spaces and line breaks exactly as you typed them.

Line breaks and horizontal rules

<br> starts a new line inside the same paragraph. It is perfect for addresses and poems, but not for making space between paragraphs (use CSS margins for that).

<hr> is a thematic break: a change of topic. Browsers draw it as a line.

<p>Marzley Tech Solutions<br>P.O. Box 123<br>Nairobi, Kenya</p>
<hr>
<p>A new topic starts here.</p>

Special characters (entities)

Some characters mean something to HTML itself. To show < on the page you write an entity: an &, a name and a ;.

<p>In HTML, a paragraph starts with &lt;p&gt; and ends with &lt;/p&gt;.</p>
<p>Tom &amp; Jerry</p>
<p>&copy; 2026 Marzley Tech Solutions</p>
<p>KSh&nbsp;15,000 (the number never wraps away from "KSh")</p>

Tip: with <meta charset="utf-8"> in your page you can type most symbols directly (©, €, ✓, emoji). You only must use entities for <, > and &.

Common mistakes

• Using <br><br> to make space. Use separate paragraphs and CSS margins.
• Using <b> for everything. Ask: is this important (<strong>) or just styled (CSS)?
• Forgetting to close tags: <strong>Hello makes the rest of the page bold.
• Nesting in the wrong order: <strong><em>Hi</strong></em> is wrong; close the last one you opened first: <strong><em>Hi</em></strong>.

Why the right text elements matter

HTML text elements are not about looks (CSS handles that); they describe meaning. Search engines use that meaning to understand what's important on the page, screen readers change their voice or announce elements like quotes and code, and translation tools treat code and abbreviations correctly. Bloggers, journalists, documentation writers, teachers making online notes and every web developer use these elements daily.

Visual vs semantic elements

<p><strong>Warning:</strong> do not share your M-Pesa PIN with anyone.</p>
<p>I <em>said</em> deliver on Friday, not Thursday.</p>
<p>The Kiswahili word <i lang="sw">karibu</i> means welcome.</p>
<p>Search results for "hosting": affordable <mark>hosting</mark> plans for small businesses.</p>
<p><small>Prices include 16% VAT. Terms apply.</small></p>

Note lang="sw" on the Kiswahili word: screen readers can switch pronunciation for that word.

Abbreviations, definitions and time

<p>Register your business on <abbr title="Kenya Revenue Authority">KRA</abbr> iTax before you apply.</p>
<p><dfn>SEO</dfn> (search engine optimisation) is the practice of helping pages appear in search results.</p>
<p>The workshop starts on <time datetime="2026-11-14T09:00">14 November at 9 am</time>.</p>
<p>Opening hours: <time datetime="08:00">8:00</time> to <time datetime="18:00">6:00 pm</time>.</p>

<time datetime="..."> gives machines (search engines, calendars) an exact date while people see a friendly version.

Addresses and contact details

<address>
  <strong>Marzley Tech Solutions</strong><br>
  Nairobi, Kenya<br>
  Phone: <a href="tel:+254700000000">+254 700 000 000</a><br>
  Email: <a href="mailto:info@example.co.ke">info@example.co.ke</a>
</address>

<address> is for contact information of the page or article author/owner, not for any postal address. tel: links let phone users tap to call (the numbers here are examples).

Showing code and keyboard input

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save, or <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> to open DevTools.</p>
<p>The command <code>git status</code> shows changed files. Output: <samp>nothing to commit, working tree clean</samp></p>
<p>The area of a circle is <var>A</var> = π<var>r</var><sup>2</sup>.</p>
<pre><code>&lt;h1&gt;Hello Kenya&lt;/h1&gt;
&lt;p&gt;My first page&lt;/p&gt;</code></pre>

Inside <pre>, you still must write < for < when showing HTML code.

Bidirectional text and word breaks

<p>Long words can break nicely here: super<wbr>cali<wbr>fragilistic<wbr>expialidocious<wbr>words.</p>
<p>Customer name in Arabic: <bdi>محمد</bdi>, paid 2,000.</p>
<p>Ruby annotation: <ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby></p>

<wbr> suggests where a long word or URL may break on narrow screens. <bdi> keeps right-to-left names from scrambling the surrounding text order.

Headings: structure, not size

Headings (<h1> to <h6>) form an outline of the page, like a table of contents:

<h1>Web design services in Nakuru</h1>       <!-- one per page: the main topic -->
  <h2>Our packages</h2>
    <h3>Starter website</h3>
    <h3>Business website</h3>
  <h2>Frequently asked questions</h2>
    <h3>How long does it take?</h3>

• Use exactly one <h1> describing the page.
• Don't skip levels (h2 → h4) just to get a smaller font; change the size with CSS.
• Screen reader users jump between headings to scan a page, and search engines use headings to understand topics.

Writing for the web

Practice

1. Write a short article about your town with one h1, two h2 sections and correct use of strong, em and abbr.
2. Mark up an event announcement with <time datetime> for the date and start time.
3. Create a "keyboard shortcuts" list for MS Word using <kbd>.
4. Show a three-line HTML snippet on a page using <pre><code> and entities.
5. Add a contact block with <address>, a tel: link and a mailto: link.