HTML-101 #5. Text Formatting, Quotes & Code Formatting

Source: Dev.to

👋 Short Intro (Why I’m Writing This)

I’m currently learning HTML and decided to learn in public by documenting my journey.

This blog is part of my HTML‑101 series, where I’m learning HTML step‑by‑step from scratch.

The series is not written by an expert — it’s a beginner learning out loud, sharing:

• what I understand,
• what confuses me,
• and what I learn along the way.

The goal is to build consistency, clarity, and invite discussion.

📌 What This Blog Covers

In this post I’ll cover:

• Text‑formatting tags in HTML
• Semantic vs. non‑semantic formatting (<strong> vs. <b>, <em> vs. <i>)
• Underline, highlight, small text, deleted text
• Superscript and subscript usage
• Quoting content using <blockquote> and <q>
• Code formatting using <code> and <pre>

📂 GitHub Repository

All my notes, examples, and practice code live here:

[GitHub repo link]

The repo is updated as I continue learning.

📚 Learning Notes

1. HTML Text‑Formatting Tags

<strong>

• Purpose: Indicates importance semantically; browsers render it bold.
• Syntax: <strong>Warning</strong>
• When to use: When the text is important, not just for visual boldness.

<em>

• Purpose: Indicates stress or emphasis; screen readers change tone. Rendered italic.
• Syntax: I <em>really</em> sorry
• When to use: When you want to convey emphasis, not merely italics.

<b>

• Purpose: Visual bold without semantic meaning.
• Syntax: <b>Hi There!</b>
• When to use: When you need bold styling but no importance.

<i>

• Purpose: Visual italics without semantic meaning.
• Syntax: <i>Hi There!</i>
• When to use: When you need italic styling but no emphasis.

<u>

• Purpose: Underlines text visually.
• Syntax: <u>This is underlined</u>
• When to use: For annotations, misspellings, or stylistic purposes not to indicate importance.

<mark>

• Purpose: Highlights text with a yellow background.
• Syntax: <mark>This is a highlighted word</mark>
• When to use: To draw attention to relevant or matched text (e.g., search results).

<small>

• Purpose: Reduces the font size.
• Syntax: <small>Terms and conditions apply</small>
• When to use: For disclaimers, legal notes, or fine print.

<del>

• Purpose: Shows strikethrough (deleted) text.
• Syntax: <del>$50</del> <ins>$30</ins>
• When to use: To represent removed/obsolete content, price reductions, version changes, or corrections.

<sup> / <sub>

• Superscript: <sup> raises text. Example: x<sup>2</sup> (used for exponents).
• Subscript: <sub> lowers text. Example: H<sub>2</sub>O (used in chemical formulas).

<abbr>

• Purpose: Marks abbreviations and provides the full form via title.
• Syntax: <abbr title="HyperText Markup Language">HTML</abbr>
• When to use: Improves accessibility and shows meaning on hover.

2. Quotes in HTML

<blockquote>

• Purpose: Long quotes or cited sections that should stand apart. Rendered as a block, indented by default, and starts on a new line.
• Syntax:

<blockquote>
  This is a long quoted section from another source.
</blockquote>

• Optional cite attribute:

<blockquote cite="source-url">
  The future belongs to those who believe in the beauty of their dreams.
  — Eleanor Roosevelt
</blockquote>

• When to use: For quoting larger passages from another source.

<cite>

• Purpose: References the source of a quote or creative work.
• Syntax: <cite>— Eleanor Roosevelt</cite>
• When to use: To attribute quotes, books, articles, or authors.

<q>

• Purpose: Inline short quotes; browsers automatically add quotation marks.
• Syntax:

<p>He said, <q>HTML is easy to learn</q> and smiled.</p>

• When to use: When the quote is part of a sentence and should not break the text flow.

Key Differences

3. Code Formatting Tags

<code>

• Purpose: Represents short snippets of code inline with surrounding text.
• Syntax:

Use the <code>console.log()</code> function to debug.

• When to use: For short commands, file names, variable names, etc., that appear within a paragraph.

<pre>

• Purpose: Displays pre‑formatted, multi‑line content exactly as written (preserves whitespace, indentation, and line breaks).
• Syntax:

<pre>
function greet(){
  console.log("Hello World");
}
</pre>

• When to use: For multi‑line code blocks or any content where exact formatting matters.

Combining <pre> and <code>

For real code blocks, nest <code> inside <pre>:

<pre><code>
function add(a, b) {
  return a + b;
}
</code></pre>

• <pre> preserves formatting; <code> adds semantic meaning.

⚠️ Challenges / Mistakes I Faced

Initially I only knew about <strong>, <em>, <b>, and <i>. I didn’t realize the importance of semantic tags, the differences between <strong> and <b>, or how to properly format code with <code> and <pre>. (The rest of this section was cut off in the original draft.)

Cleaned Markdown

, , ,  as they are. -->

So that was something new I learned while going through this topic.

If you faced any issues or have any questions, do let me know in the comments 🙂  

💬 Feedback & Discussion

💡 I’d love your feedback!

If you notice:

• something incorrect,
• a better explanation,
• or have suggestions to improve my understanding,

please comment below. I’m happy to learn and correct mistakes.

⭐ Support the Learning Journey

If you find these notes useful:

⭐ Consider giving the GitHub repo a star — it really motivates me to keep learning and sharing publicly.

🐦 Stay Updated (Twitter / X)

I share learning updates, notes, and progress regularly.

🔜 What’s Next

In the next post, I’ll be covering:

👉 Paths, Anchor Tag, Mail & Phone Links

I’ll also continue updating the GitHub repo as I progress.

🙌 Final Thoughts

Thanks for reading!

If you’re also learning HTML, feel free to:

• follow along,
• share your experience,
• or drop questions in the comments 👋