HTML Text Formatting for Beginners: Quotes, Code & Special Characters (Part 2)

Hey friend! 👋

Welcome back to our HTML Basics for Beginners series!

In Part 1 of HTML Text Formatting, you learned how to:

• Make text bold and italic
• Underline, highlight, and small text
• Show deleted and inserted text
• Use line breaks and dividers

And honestly… your page already looks MUCH better now 😄

But today?

We’re taking it to the next level — the “real website” level. 🚀

What You’ll Learn Today

By the end of this tutorial, you’ll be able to:

✅ Add quotes like a pro
✅ Give proper credit using citations
✅ Show code on your webpage (super important!)
✅ Use special characters like ©, <, >
✅ Write formulas using subscript & superscript
✅ Build a mini project: Book Review Page

Let’s make your text look like a professional website!🔥

Before You Start

Prerequisites:
✅ Completed Tutorial #2 Part 1 (bold, italic, basic formatting)
✅ A text editor (VS Code, Notepad, etc.)
✅ A web browser (Chrome, Firefox, etc.)

Ready? Let’s dive in!

Step 1: Quotes in HTML (Make Your Content Feel Real)

Sometimes, the text on your page is not yours.

Maybe it’s:

• A famous quote
• Something your teacher said
• A line from a book
• An article or website

HTML gives us special tags to show quotes properly and give credit.

Short Quotes → <q>

Use <q> for small quotes inside a sentence.

<p>My teacher said, <q>Practice every day.</q></p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

What <q> does:

• Adds quotation marks automatically
• Keeps the sentence flowing naturally

🌐 Browser Magic: You don’t type the ” ” marks yourself. The browser adds them automatically when it sees <q>.

When to Use <q>

• Small quotes
• Single sentences
• Dialogue inside a paragraph

💡 Think of <q> as:
Quotation marks inside a sentence.

Long Quotes → <blockquote>

Now imagine a BIG quote.

Something important.

Something that deserves its own space.

Use <blockquote> when the quote is long or needs attention.

<blockquote>
  Learning never exhausts the mind.
</blockquote>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

What Happens?

• It moves to a new line
• Adds spacing
• Looks important

When to use <blockquote>:

• Famous quotes
• Paragraph-length quotes
• Important statements or testimonials

💡 Think of <blockquote> as:
👉 “Pause. This is important.”

<q> vs <blockquote>

Add Credit → <cite>

Now here’s where beginners often make a mistake ❌

They add quotes… but don’t give credit.

Let’s fix that.

<p><cite>— Albert Einstein</cite></p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

What <cite> does:

• Shows the source of the quote
• Gives credit to the author or work

💡 Simple rule:
Quote + Cite = Trust

Best Practice (VERY IMPORTANT)

Most of the time, you’ll use quotes and citations together.

<blockquote>
  Imagination is more important than knowledge.
</blockquote>

<p><cite>— Albert Einstein</cite></p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — Quotes & Citations by Codeboid (@Codeboid) on CodePen.

👉 This makes your page:

• More professional
• More trustworthy
• More readable

This clearly tells the reader:

• These words are quoted
• Who said them

Clean. Professional. Respectful.

Real-Life Example (Blog Style)

<p>As my mentor once said:</p>

<blockquote>
  <p>Don't rush the process. Good things take time.</p>
</blockquote>

<p><cite>— My Coding Mentor</cite></p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — Quotes & Citations (Blog Style) by Codeboid (@Codeboid) on CodePen.

Important Tips ⚠️

❌ Don’t use quotes just to make text look fancy
❌ Don’t forget to give credit

✅ Use quotes when the words are not yours
✅ Always mention the source if possible

Practice Challenge 🎯

Add your favorite inspirational quote using <blockquote> and credit the author with <cite>.

Step 2: Special Characters & HTML Entities

Here’s something that confuses beginners A LOT.

Some characters have special meaning in HTML (<, >, &).
To display them as text, use HTML entities.

<   >   &

If you use them normally, HTML gets confused 😵

Why Do We Need HTML Entities?

Imagine you want to show someone how to write HTML code on your webpage.

The Problem

<p>Use the <p> tag</p>

This breaks your page ❌

Because <p> is treated as a real tag.

The Solution → HTML Entities

<p>Use the &lt;p&gt; tag</p>

👉 Output: Use the <p> tag

Common HTML Entities

Examples:

<p>To write HTML tags, use &lt;p&gt; and &lt;/p&gt;.</p>
<p>Copyright &copy; 2026 My Website. All rights reserved.</p>
<p>Coca-Cola&reg; is a registered trademark.</p>
<p>Price: &euro;49.99</p>
<p>Ben &amp; Jerry's</p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — HTML Entities by Codeboid (@Codeboid) on CodePen.

Result on webpage:

• To write HTML tags, use <p> and </p>.
• Copyright © 2026 My Website. All rights reserved.
• Coca-Cola® is a registered trademark.
• Price: €49.99
• Ben & Jerry’s

💡 Simple Rule:
👉 If it looks like HTML… escape it

When to Use Entities:

✅ Displaying HTML code examples
✅ Adding copyright/trademark symbols
✅ Showing mathematical symbols
✅ Preventing words from breaking across lines ( )

Practice Challenge 🎯

Create a footer with a copyright symbol, the current year, and your name.

Step 3: Show Code on Your Website

Now comes the FUN part 😄

Now that you know about HTML entities, let’s learn how to display code!

Inline Code → <code>

Use <code> when you mention small pieces of code inside a sentence.

<p>To create a paragraph, use the <code>p</code> tag.</p>
<p>The <code>h1</code> tag creates the biggest heading.</p>
<p>In Python, use <code>print()</code> to display text.</p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

What It Does

• Changes font (monospace)
• Makes code stand out

When to use <code>:

• Tag names (p, h1, div)
• Function names (print, alert)
• Variable names
• File names (index.html)

💡 Think of <code> as saying:
“This is code — don’t read it like a sentence.”

Displaying HTML Code with Entities

Now you can show HTML tags safely!

<p>Use the <code>&lt;strong&gt;</code> tag to make text bold and important.</p>
<p>To create a heading, use <code>&lt;h1&gt;My Heading&lt;/h1&gt;</code>.</p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — + HTML Entities by Codeboid (@Codeboid) on CodePen.

Multi-line Code → <pre>

Want to show full code?

Use <pre>:

<pre>
<code>
function sayHello() {
  console.log("Hello, World!");
}
</code>
</pre>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

Best Practice → <pre> + <code>

<pre>
  <code>
  &lt;h1&gt;Hello World&lt;/h1&gt;
  &lt;p&gt;Learning HTML&lt;/p&gt;
  </code>
</pre>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — + by Codeboid (@Codeboid) on CodePen.

This safely displays HTML code without breaking your page!

Why use both tags together?

• <pre> keeps spacing and line breaks
• <code> tells the browser this is code

💡 Remember:

• <code> = this is code
• <pre> = keep formatting

Practice Challenge 🎯

Display<h1>, <h2>, <p> tags using <pre> and <code>.

Step 4: Keyboard Keys → <kbd>

This one is super fun 😄

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd></p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

👉 Output looks like keyboard buttons

Use it for:

• Shortcuts
• Instructions
• Tutorials

Step 5: Subscript & Superscript

Subscript → <sub>

Subscript text appears slightly lower than normal text.

<p>Water formula: H<sub>2</sub>O</p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

When to use <sub>:

• Chemistry formulas (H₂O, CO₂)
• Math equations
• Footnote markers

💡 Think of <sub> as:
“This number belongs below.”

Superscript → <sup>

Superscript text appears slightly higher than normal text.

<p>2<sup>3</sup> = 8</p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — by Codeboid (@Codeboid) on CodePen.

When to use <sup>:

• Powers and exponents (2³, x²)
• Ordinal numbers (1ˢᵗ, 2ⁿᵈ)
• Footnote references

💡 Think of <sup> as:
“This number belongs above.”

Example Together

<p>Chemical formula: CO<sub>2</sub></p>
<p>Math equation: E = mc<sup>2</sup></p>
<p>Temperature: 25°C<sup>*</sup></p>
<p><small><sup>*</sup>Measured at sea level</small></p>

👉 Try it on CodePen

See the Pen Codeboid – HTML Tutorial #2 — + by Codeboid (@Codeboid) on CodePen.

Practice Challenge 🎯

Write Einstein’s famous equation (E=mc²) and the chemical formula for water (H₂O).

Mini Project: Book Review Page 📚

Now let’s combine EVERYTHING you learned in Parts 1 and 2!

Create a file called book-review.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Book Review</title>
</head>
<body>

<h1>Book Review</h1>

<h2><i>To Kill a Mockingbird</i></h2>

<p><strong>Author:</strong> Harper Lee</p>
<p><strong>Rating:</strong> 5<sup>★★★★★</sup></p>
<p><strong>Published:</strong> July 11, 1960</p>

<hr>

<h3>My Favorite Quote</h3>

<blockquote>
  <p>You never really understand a person until you consider things from his point of view.</p>
</blockquote>

<p><cite>— Atticus Finch, To Kill a Mockingbird</cite></p>

<hr>

<h3>My Review</h3>

<p>This book is <strong>absolutely incredible</strong>. I <em>could not</em> put it down!</p>

<p>The story explores themes of racial injustice, childhood innocence, and moral growth. Harper Lee's writing style is <mark>beautiful and timeless</mark>.</p>

<p>What I loved most was the character development. Scout's journey from innocence to understanding is portrayed with <strong>authenticity and heart</strong>.</p>

<hr>

<h3>Who Should Read This?</h3>

<p>This book is perfect for:</p>

<p>
- Anyone interested in American history<br>
- Readers who love character-driven stories<br>
- People who enjoy thought-provoking literature<br>
- Students studying social justice
</p>

<hr>

<h3>Technical Details</h3>

<p><strong>Pages:</strong> 324</p>
<p><strong>Genre:</strong> Southern Gothic, Coming-of-age</p>

<hr>

<h3>Code Example: How to Format a Book Title</h3>

<p>In HTML, use the <code>&lt;i&gt;</code> tag for book titles:</p>

<pre>
<code>
&lt;p&gt;My favorite book is &lt;i&gt;To Kill a Mockingbird&lt;/i&gt;.&lt;/p&gt;
</code>
</pre>

<hr>

<h3>Final Verdict</h3>

<p><strong>Would I recommend this book?</strong> <em>Absolutely, yes!</em> 10/10</p>

<p>If I could describe this book in one word, it would be <mark>essential</mark>.</p>

<p><small>This review reflects my personal opinion and experience with the book.</small></p>

<hr>

<footer>
  <p><small>Copyright &copy; 2026 MyBookReviews.com | All rights reserved</small></p>
</footer>

</body>
</html>

What’s Happening in This Code:

Here’s a quick overview of every tag in this project and what it does — so nothing surprises you in the code!

✅ <h1>, <h2>, <h3> → Page headings and sections
✅ <strong> → Bold (author name, rating, key phrases)
✅ <em> → Italic emphasis (“could not put it down”)
✅ <i> → Italic for the book title
✅ <mark> → Highlight important phrases
✅ <small> → Footer and disclaimer text
✅ <hr> → Visual dividers between sections
✅ <blockquote> → Display the favorite quote
✅ <cite> → Credit the quote to the author
✅ <sup> → Star rating as superscript
✅ <code> → Mention a tag name inline
✅ <pre><code> → Show a multi-line code block
✅ < and > → Safely display HTML tags as text
✅ © → Copyright symbol in the footer

Your Turn! 🎯

Customize this page:

1. Change the book to YOUR favorite book
2. Write your own honest review
3. Add your favorite quote from the book
4. Include a code example showing an HTML tag
5. Use special characters in the footer
6. Add chemistry formulas or math equations if relevant

👉 Open it in your browser and admire your work!

Cheat Sheet (Save This!)

QUOTES & CITATIONS
<q>text</q>              → Short quote
<blockquote>             → Long quote
<cite>source</cite>      → Citation
 
DISPLAYING CODE
<code>code</code>        → Inline code
<pre><code>              → Code block
 
NUMBERS & FORMULAS
<sub>2</sub>             → Subscript (H₂O)
<sup>2</sup>             → Superscript (E=mc²)

DISPLAY KEYBOARD BUTTONS
<kbd>ctrl+p</kbd>        → Display keyboard buttons

 
SPECIAL CHARACTERS
&lt;                     → < (less than)
&gt;                     → > (greater than)
&amp;                    → & (ampersand)
&copy;                   → © (copyright)
&reg;                    → ® (registered)
&trade;                  → ™ (trademark)
&euro;                   → € (euro)
&pound;                  → £ (pound)

Quick Recap

Today you learned:

✅ How to format quotes with <q> and <blockquote>
✅ How to give credit with <cite>
✅ How to use HTML entities for special characters
✅ How to display code with <code> and <pre>
✅ How to display keyboard buttons with <kbd>
✅ How to use subscript and superscript
✅ Built a complete book review page

Common Mistakes

❌ Not giving credit for quotes
❌ Forgetting HTML entities when displaying code
❌ Using <code> without <pre> for multi-line code
❌ Not using <cite> for sources

Practice Challenge 💪

Create a page about your favorite scientist that includes:

• Their name in a heading
• A famous quote in a blockquote with citation
• Birth/death dates with superscript for years
• Their most famous equation or formula
• A code example showing how to format their name in HTML
• Copyright symbol in the footer

Get the Source Code

You can find all the code from this tutorial on GitHub:

👉 Codeboid/html-series

Download the complete sale page example and practice files!

Final Thoughts

You’ve mastered professional text formatting! 🎉

These skills are used on:

• Documentation sites
• Tutorial blogs
• Book review sites
• Technical articles
• Professional portfolios

Practice by creating different types of content: reviews, tutorials, research papers, technical docs.

You’re not just learning HTML anymore.

You’re learning how to write like a real developer 💪

And trust me —
These small tags are used on every professional website.

Keep going. You’re doing amazing 🚀

What’s Next?

Coming Up in Tutorial #3: HTML Lists

You’ll learn:

• Unordered lists (bullet points)
• Ordered lists (numbered)
• Nested lists
• Definition lists
• Mini project: “My Goals” page

👉 Continue to Tutorial #3 →