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>

The <b> and <i> Tags

The <b> and <i> tags also create bold and italic text, but they add no importance or emphasis. The look of text is changed in CSS, and these tags have jobs of their own: <b> draws attention to a word, e.g. a name in a description, and <i> marks text set apart from the rest, e.g. a foreign name:

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

Underline and Strikethrough

The <u> tag underlines text, but it has narrow uses, e.g. marking spelling mistakes. An underline is easy to confuse with a link, so pages rarely use it:

1<p>The scribe wrote <u>piramid</u> instead of "pyramid".</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>Each side of the pyramid's base is 230 m, an area of about 53,000 m<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 tags that mark importance and emphasis (<strong>, <em>) and tags that only set text apart (<b>, <i>). Use comments to leave hints for future scribes - including yourself!"

Here are the most important formatting tags:

• <strong> / <b> - bold (importance / drawing attention)
• <em> / <i> - italic (emphasis / text set apart)
• <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

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Text formatting</title>
6</head>
7<body>
8    <h1>Text Formatting in HTML</h1>
9
10    <p>Text <strong>bold</strong> and <em>italic</em>.</p>
11    <p>Text <mark>highlighted</mark> and <s>strikethrough</s>.</p>
12    <p>Formula: H<sub>2</sub>O and E = mc<sup>2</sup></p>
13
14    <hr>
15
16    <blockquote>
17        "Knowledge is like the Nile - the more you drink, the more you thirst." - Mohamed
18    </blockquote>
19
20    <p>Code fragment: <code>&lt;h1&gt;</code></p>
21
22    <pre>
23This is    text
24    with preserved
25        formatting
26    </pre>
27
28    <!-- This is an HTML comment - invisible on the page -->
29</body>
30</html>