• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Formatting

← Previous Next →

When you create a webpage, plain text is often not enough. Sometimes you need to highlight important words, show emphasis, mark quotations, display code, or make text stand out. HTML provides a set of formatting elements that help you add meaning and style to your content. These elements do not change the structure of the page, but they add extra emphasis or context to specific parts of your text.

Formatting tags are very common in everyday web pages. News websites use bold and italics to highlight important points. Blogs use quotes and citations to show references. Educational websites use code formatting to teach programming. When you understand how these tags work, you can present information more clearly and make your content easier to read.

Why HTML Formatting Matters

Formatting adds meaning to your content. For example:

  • Bold text makes something stand out

  • Italics show emphasis or tone

  • Highlighted text draws attention

  • Subscript and superscript help in maths and science

  • Code formatting is essential for technical tutorials

  • Quotes make your content feel real and credible

Formatting elements help readers navigate your content comfortably. When used properly, they make your webpage clean, readable and professional.

Bold Text

Bold text is useful when you want to highlight a name, keyword or an important phrase. HTML provides two tags for bold text:

<b> tag

This tag makes text bold visually but does not add meaning.

<strong> tag

This tag makes text bold and indicates that the content is important.

Example:

<p>Aarohi visited <b>Mumbai</b> for a training event.</p>
<p><strong>Important:</strong> Submit your assignment by Friday.</p>

In most cases, <strong> is preferred because it gives meaning and helps with accessibility.

Italic Text

Italic text is useful for emphasis, expressing thoughts, writing quotes or referring to titles.

HTML provides two tags:

<i> tag

Visual italics without adding extra meaning.

<em> tag

Italic text with emphasis meaning. Screen readers understand it as stressed text.

Example:

<p>Meera said, <em>I will reach Jaipur tomorrow morning.</em></p>
<p><i>Chai Break</i> is a popular café in Kolkata.</p>

Underlined Text

The <u> tag underlines text. It should be used carefully because links are usually underlined.

Example:

<p><u>Important Notice:</u> The seminar in Delhi starts at 9 AM sharp.</p>

Highlighted Text

The <mark> tag highlights text with a background color, usually yellow. This helps draw instant attention.

Example:

<p>Aditi marked the date <mark>15 January</mark> for her trip to Bengaluru.</p>

Highlighting is great for revision notes, reminders and key points.

Smaller Text

The <small> tag displays text in a slightly reduced size. It's useful for disclaimers, side notes or quiet details.

Example:

<p>Registration closes soon. <small>Terms and conditions apply.</small></p>

Deleted and Inserted Text

These tags help show modifications in content.

<del> tag

Shows deleted text with a strike-through.

<ins> tag

Shows inserted text with an underline.

Example:

<p>Riya booked a ticket to <del>Hyderabad</del> <ins>Pune</ins>.</p>

This is useful for edits, corrections, version history or collaborative writing.

Superscript and Subscript

These tags help in mathematical expressions, chemical formulas, footnotes and scientific writing.

Superscript: <sup>

Displayed slightly above the normal line.

Example:

<p>Area of a square: side<sup>2</sup></p>

Subscript: <sub>

Displayed slightly below the normal line.

Example:

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

Monospace and Code Formatting

When writing code tutorials or technical notes, plain text is not enough. Code must look different so readers can easily identify it. HTML provides:

<code> tag

Displays text in a monospace font.

Example:

<p>Use the command <code>npm install</code> to install packages.</p>

<pre> tag

Displays text exactly as written, preserving spaces and line breaks. Best for longer code blocks.

Example:

<pre>
for (let i = 0; i < 5; i++) {
    console.log(i);
}
</pre>

When <pre> and <code> are used together, the code looks structured and easy to read.

Quotations

HTML provides tags to include quotes and references.

<q> tag

For short inline quotations.

<p>Aarohi said, <q>I love the weather in Bengaluru during winter.</q></p>

<blockquote> tag

For longer quotes, displayed as a block with indentation.

<blockquote>
  Travelling across India helps you understand different cultures, traditions,
  languages and lifestyles. Every state has its own identity.
</blockquote>

<cite> tag

Used for citing titles or sources.

<p>The story was inspired by <cite>A Journey Through India</cite>.</p>

Using <br> for Line Breaks

The <br> tag creates a line break without starting a new paragraph. It’s useful for addresses or poems.

Example:

<p>
  Flat 12, Rose Apartment<br>
  Juhu Road<br>
  Mumbai
</p>

Avoid overusing it for spacing. Use paragraphs instead.

Combining Formatting Elements

Formatting becomes powerful when combined. Here’s an example:

<p>
  <strong>Aarohi</strong> visited <em>Delhi</em> last week for a workshop on
  <mark>web development</mark>. She noted that the session was held on
  12<sup>th</sup> floor of the building and included practical sessions on
  <code>HTML</code> and <code>CSS</code>.
</p>

This makes your content expressive and clear.

A Complete Practical Example

Below is a small webpage that uses multiple formatting tags together:

<!DOCTYPE html>
<html>
<head>
    <title>Formatting Example</title>
</head>
<body>

<h1>Travel Journal</h1>

<p>
  <strong>Meera</strong> recently travelled to <em>Udaipur</em> and shared her
  experience. She wrote, <q>The lakes of the city look beautiful during
  sunset.</q>
</p>

<p>
  Her flight was scheduled for 20<sup>th</sup> December, but due to weather
  issues, the timing changed from <del>9 AM</del> to <ins>11 AM</ins>.
</p>

<p>
  Here is a short list of items she carried:
</p>

<pre><code>
- Camera
- Travel diary
- Power bank
- Snacks
</code></pre>

<p>
  She also highlighted <mark>Lake Pichola</mark> as her favorite spot.
</p>

<blockquote>
  Udaipur is known as the City of Lakes. It offers a blend of royalty,
  architecture and calm surroundings.
</blockquote>

</body>
</html>

This example demonstrates how formatting adds clarity and dimension to ordinary text.

Practice Task

Create a webpage that includes:

  1. One paragraph with bold, italic and highlighted text

  2. A quote using both <q> and <blockquote>

  3. One line using superscript and one using subscript

  4. A short code sample using <pre> and <code>

  5. A sentence showing deleted and inserted text

This will help you practice all common formatting elements in one place.

Summary of HTML Formatting

HTML formatting tags help you emphasize text, highlight important words, quote sources, show corrections, display code, and write scientific expressions. You learned how to use bold, italics, underline, mark, small text, superscript, subscript, inserted and deleted text, and code formatting. These tags add clarity and improve reader experience. With consistent practice, you’ll begin using them naturally while creating web pages.

Practice Questions

Q1. Make a word bold using the <b> tag.

Q2. Create a paragraph with a <strong> warning.

Q3. Italicize a sentence using the <i> tag.

Q4. Emphasize the word “important” using <em>.

Q5. Highlight a phrase using the <mark> tag.

Q6. Use <u> to underline a sentence.

Q7. Display a note in smaller font using <small>.

Q8. Strike through the text “Old Price” with <del>.

Q9. Write a subscript formula for H₂O using <sub>.

Q10. Write "E = mc²" using <sup> for the 2.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top