DEV Community

Cover image for HTML-101 #5. Text Formatting, Quotes & Code Formatting
Himanshu Bhatt
Himanshu Bhatt

Posted on

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

#html #learninpublic #beginners #tutorial

👋 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.

This 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:

https://github.com/dmz-v-x/html-101

This repo is updated as I continue learning.

📚 Learning Notes

1. HTML Text Formatting Tags

  • <strong>: This tag show importance semantically, and visually it makes the text bold. So <strong> should be used where want to show something important rather than using <b>.

Syntax: <strong>Warning</strong>

When to use:
Use when text is important, not just bold-looking.

  • <em>: This tag should be used when we want to add stress or emphasis, screen readers changes tone when they come across that is wrapped around <em> tag. Visually it makes the text italics.

Syntax: I <em>really</em> sorry

When to use:
Use when we want to show emphasis, not just italics.

  • <b>: This tag makes our text to appear bold. It has no semantic meaning.

Syntax: <b>Hi There!</b>

When to use:
Use when we want to make text appear bold but no importance.

  • <i>: This tag makes our text to appear italics. It has no semantic meaning.

Syntax: <i>Hi There!</i>

When to use:
Use when we want to make text appear italics but no importance.

  • Comparison: strong vs b / em vs i
Tag Visual Semantic meaning Screen reader
strong Bold ✅ Yes Emphasized
b Bold ❌ No Normal
em Italic ✅ Yes Emphasized
i Italic ❌ No Normal
  • <u>: Underlines text visually.

Syntax: <u>This is underlined</u>

When to use:
<u> should NOT be used to indicate importance.
It is mainly used for annotations, misspellings, or stylistic purposes.

  • <mark>: This tag makes text highligted with yellow background

Syntax: This is a <mark>highlighted</mark> word

When to use:
Use to highlight relevant or matched text (e.g. search results).

  • <small>: This tag makes text to appear small on the screen.

Syntax: <small>Terms and conditions apply </small>

When to use:
Often used for disclaimers or legal notes.

  • <del>: This shows strikethrough in the text.

Syntax: <del>$50</del> 30

When to use:
Represent removed/obsolete content, for price reductions, version changes, corrections

  • <sup>: This raises text above line, sup means Superscript.

Syntax: x<sup>2</sup>

When to use:
Used when we want to perform math exponets.

  • <sub>: This lowers the text below baseline, sub means Subscript.

Syntax: H<sub>2</sub>O

When to use:
Used in chemical formulas or Scientific expressions.

  • <abbr>: Used for abbreviations with a full form.

Syntax:
<abbr title="HyperText Markup Language">HTML</abbr>

When to use:
Helps accessibility and shows meaning on hover.

2. Quotes in HTML

  • <blockquote>: Used for long quotes or cited section that should stand apart from the main content. This displays the content on a separate block, indented by default and starts on a new line.

Syntax:

<blockquote>
  This is a long quoted section from another source.
</blockquote>
Enter fullscreen mode Exit fullscreen mode

We can use cite attribute to specify where the quote came from.

<blockquote>
  The future belongs to those who believe in the beauty of their dreams.
</blockquote>
<cite>— Eleanor Roosevelt</cite>
Enter fullscreen mode Exit fullscreen mode

When to use:
When you want to quote something from another source.

  • <cite>: Used to reference the source of a quote or creative work.

Syntax:
<cite>— Eleanor Roosevelt</cite>

When to use:
Use it to attribute quotes, books, articles, or authors.

  • q: Used for short quotes inside a sentence, q for Inline Quote. When used browser automatically adds quotation marks.

Syntax:

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

When to use:
Use when quote is part of a line, it should not break text flow.

  • Key Differences:
Feature <blockquote> <q>
Display Block-level Inline
Usage Long quotes Short quotes
Line break Yes No
Default styling Indented Quotation marks
Semantic meaning Quoted section Quoted phrase

3. Code Formatting Tags

  • <code>: Used to represent short snippets of code inside a sentence. It keeps the code inline with surrounding text.

Syntax:

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

When to use:
Use when we want to show short commands, file names, variables etc.
When we want to show the code inline with the text.

  • <pre>: Used to display multi-line code or content exactly as written.

Syntax:

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

When to use:
Use when we want to show multi-line code, and wants to preserve spaces, preserve identation, preserve line break and display as is.

  • Using <pre> & <code> together

For real code blocks we should nest them as:

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

<pre> preserve formatting, <code> gives semantic meaning.

⚠️ Challenges / Mistakes I Faced

Initially, I used only used to know <strong>, <em>, <i>, <b> that's it. I didn't knew about the other tags that are there. Like <blockquote>, <q> and <code>, <pre>.

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.

👉 Follow me on Twitter/X:

https://x.com/_himanshubhatt1

🔜 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 👋

📘 Learning in public

📂 Repo: https://github.com/dmz-v-x/html-101
🐦 Twitter/X: https://x.com/_himanshubhatt1
💬 Feedback welcome — please comment if anything feels off
⭐ Star the repo if you find it useful

Top comments (0)