Text Formatting in HTML

Imagine you are a scribe in Ancient Egypt. On papyrus, you don't write everything the same way — you highlight important pharaoh decrees with larger hieroglyphs, italicize the names of gods with respect, and strike through forbidden passages. In HTML, you have exactly the same capabilities! Mohamed says: "Text without formatting is like a pyramid without decorations — functional, but devoid of soul."

Bold and Italic — Emphasizing Text

The most commonly used formatting tags are those that give text weight or emphasis:

Semantic Tags (Recommended)

The

<strong>

tag marks text as especially important — the browser displays it in bold, but more importantly, screen readers emphasize its importance with their voice:

1<p>Attention! <strong>The Pyramid of Cheops</strong> is the only surviving wonder of the world.</p>

The

<em>

tag marks text with emphasis — it's displayed in italics and read with appropriate intonation:

1<p>Mohamed whispered: <em>Never touch the pharaoh's treasure!</em></p>

Visual Tags

The

<b>

and

<i>

tags also create bold and italic text, but they don't carry semantic meaning. Use them when you want to change the appearance of text without emphasizing its importance:

1<p><b>Technical name:</b> <i>Khufu</i> is the original name of Cheops.</p>

Underline and Strikethrough

The

<u>

tag underlines text — useful for marking proper names:

1<p>Visit the <u>Karnak</u> temple in Luxor.</p>

The

<s>

tag strikes through text — great for showing outdated information, like a scribe crossing out an error on papyrus:

1<p>Pyramid entry: <s>50 gold coins</s> free!</p>

Highlight, Superscript, and Subscript

The

<mark>

tag highlights text with a yellow background, like a highlighter on papyrus:

1<p>The most important rule: <mark>always close your HTML tags</mark>!</p>

The

<sup>

(superscript) and

<sub>

(subscript) tags are useful in formulas and dates:

1<p>The pyramid has an area of 230m<sup>2</sup></p>
2<p>Chemical formula for water: H<sub>2</sub>O</p>

Line Breaks and Horizontal Rules

Sometimes you need to break a line without creating a new paragraph. The

<br>

(break) tag does exactly that — it's a self-closing tag, it doesn't need a closing tag:

1<p>Mohamed<br>Guide to Egypt<br>Cairo, Egypt</p>

The

<hr>

(horizontal rule) tag creates a horizontal line separating sections — like a border between chapters on papyrus. It's also self-closing:

1<h2>Chapter 1: Pyramids</h2>
2<p>Content about pyramids...</p>
3<hr>
4<h2>Chapter 2: Sphinx</h2>
5<p>Content about the Sphinx...</p>

Quotes and Preformatted Text

Block Quote

The

<blockquote>

tag is used for marking quotations — like royal decrees carved on stone tablets. The browser automatically adds indentation:

1<blockquote>
2  <p>Wisdom is like the Nile — the deeper you look, the more treasures you'll find.</p>
3</blockquote>

Preformatted Text and Code

The

<pre>

(preformatted) tag preserves the exact formatting of text — all spaces, tabs, and new lines. Ideal for displaying code or text tables:

1<pre>
2Pyramid of Cheops:
3  Height:  146 meters
4  Base:    230 meters
5  Age:     4500 years
6</pre>

The

<code>

tag marks a code fragment in text. The browser displays it in a fixed-width (monospace) font:

1<p>To create a heading, use the <code>&lt;h1&gt;</code> tag.</p>

We often combine

<pre>

with

<code>

for code blocks:

1<pre><code>&lt;h1&gt;Welcome to Egypt!&lt;/h1&gt;
2&lt;p&gt;I am Mohamed.&lt;/p&gt;</code></pre>

HTML Comments

Comments are hidden notes in code that are not displayed on the page. They're like secret messages that a scribe left in the margins of papyrus — visible only to other scribes:

1<!-- This is a comment - the browser will ignore it -->
2<h1>Welcome to Egypt!</h1>
3
4<!-- TODO: add pyramid description -->
5<p>Content about pyramids will go here.</p>
6
7<!--
8  Multi-line comment:
9  This section is being prepared.
10  We'll come back to it later.
11-->

Comments start with

<!--

and end with

-->

. They are extremely useful for:

• Describing code — explaining what a particular section does
• Temporarily disabling — "hiding" HTML fragments without deleting them
• Organizing — marking sections in longer documents

Summary

Mohamed summarizes: "Text formatting in HTML is like the art of writing hieroglyphs — each tag has its purpose and gives text the appropriate form. Remember the difference between semantic tags (

<strong>

,

<em>

) and visual tags (

<b>

,

<i>

). Use comments to leave hints for future scribes — including yourself!"

Here are the most important formatting tags:

• <strong>

  /

  <b>

  — bold (semantic / visual)

• <em>

  /

  <i>

  — italic (semantic / visual)

• <u>

  — underline,

  <s>

  — strikethrough

• <mark>

  — highlight,

  <sup>

  /

  <sub>

  — superscript / subscript

• <br>

  — line break,

  <hr>

  — horizontal rule

• <blockquote>

  — quote,

  <pre>

  — preformatted text

• <code>

  — code fragment

• <!-- -->

  — HTML comment