View Categories

HTML – Formatting

Table of Contents

HTML formatting allows you to structure and style text on a webpage, enhancing readability and presentation. By using various HTML formatting tags, you can control how text appears and behaves, helping users easily navigate through your site.

Types of HTML Formatting #

HTML formatting is divided into two main categories:

  1. Physical Tags: These tags affect the appearance of text, such as bolding or italicizing it.
  2. Logical Tags: These tags provide semantic meaning to text, indicating importance or emphasis. They may also enhance accessibility, improving the experience for users with screen readers.

Why is HTML Formatting Important? #

HTML formatting is crucial not just for visual appeal, but also for providing context and emphasis. Properly formatted content makes it easier for users to understand important information. It also helps search engines crawl and interpret the structure of your content, improving SEO.

For instance:

  • Bold text can emphasize important keywords.
  • Italic text may indicate technical terms or titles.
  • Headings guide readers and search engines through the content.

HTML Formatting Tags Overview #

Below are commonly used HTML formatting tags:

TagDescription
<b>Displays text in bold, used for visual emphasis.
<strong>Semantically highlights important text, also appears bold.
<i>Displays text in italics, used for stylistic emphasis.
<em>Semantically emphasizes text, displayed in italics.
<big>Enlarges text slightly. Not supported in HTML5.
<small>Reduces text size.
<sup>Displays text as superscript, slightly above the normal line.
<sub>Displays text as subscript, slightly below the normal line.
<ins>Indicates inserted text with an underline.
<del>Strikes through text to indicate deletion.
<u>Underlines text.
<mark>Highlights text with a yellow background.

HTML Formatting Tags with Examples #

Here are examples of how to use each HTML formatting tag effectively:

Bold Text (<b>)

The <b> tag is used to make text bold, purely for visual emphasis.

<!DOCTYPE html>
<html>
<head>
   <title>Bold Text Example</title>
</head>
<body>
   <p>This is an example of <b>bold text</b>.</p>
</body>
</html>

Output:
This is an example of bold text.

Strong Text (<strong>)

The <strong> tag is used for text that carries greater importance. It also appears bold.

<!DOCTYPE html>
<html>
<head>
   <title>Strong Text Example</title>
</head>
<body>
   <p>This is an example of <strong>strong text</strong>.</p>
</body>
</html>

Output:
This is an example of strong text.

Italic Text (<i>)

The <i> tag is used for italicizing text, usually for stylistic reasons.

<!DOCTYPE html>
<html>
<head>
   <title>Italic Text Example</title>
</head>
<body>
   <p>This is an example of <i>italic text</i>.</p>
</body>
</html>

Output:
This is an example of italic text.

Emphasized Text (<em>)

The <em> tag adds emphasis to text, and it is rendered in italics. It carries semantic meaning for screen readers.

<!DOCTYPE html>
<html>
<head>
   <title>Emphasized Text Example</title>
</head>
<body>
   <p>This is an example of <em>emphasized text</em>.</p>
</body>
</html>

Output:
This is an example of emphasized text.

Big Text (<big>)

The <big> tag enlarges text, making it one size larger than the surrounding text.

<!DOCTYPE html>
<html>
<head>
   <title>Big Text Example</title>
</head>
<body>
   <p>Welcome to the <big>Demo Site</big>.</p>
</body>
</html>

Output:
Welcome to the Demo Site.

Small Text (<small>)

The <small> tag reduces text size, making it appear smaller than surrounding text.

<!DOCTYPE html>
<html>
<head>
   <title>Small Text Example</title>
</head>
<body>
   <p>Welcome to <small>Coaching Wallah</small>.</p>
</body>
</html>

Output:
Welcome to Coaching Wallah.

Superscript Text (<sup>)

The <sup> tag raises text above the normal line, typically used for mathematical expressions or footnotes.

<!DOCTYPE html>
<html>
<head>
   <title>Superscript Text Example</title>
</head>
<body>
   <p>This is an example of superscript text<sup>1</sup>.</p>
</body>
</html>

Output:
This is an example of superscript text¹.

Subscript Text (<sub>)

The <sub> tag lowers text below the normal line, often used in chemical formulas.

<!DOCTYPE html>
<html>
<head>
   <title>Subscript Text Example</title>
</head>
<body>
   <p>Water's chemical formula is H<sub>2</sub>O.</p>
</body>
</html>

Output:
Water’s chemical formula is H₂O.

Inserted Text (<ins>)

The <ins> tag underlines text, indicating that it has been added.

<!DOCTYPE html>
<html>
<head>
   <title>Inserted Text Example</title>
</head>
<body>
   <p>I prefer <ins>tea</ins> over coffee.</p>
</body>
</html>

Output:
I prefer tea over coffee.

Deleted Text (<del>)

The <del> tag strikes through text, showing that it has been deleted.

<!DOCTYPE html>
<html>
<head>
   <title>Deleted Text Example</title>
</head>
<body>
   <p>I prefer <del>coffee</del> over tea.</p>
</body>
</html>

Output:
I prefer coffee over tea.

Underlined Text (<u>)

The <u> tag adds an underline to the text.

<!DOCTYPE html>
<html>
<head>
   <title>Underlined Text Example</title>
</head>
<body>
   <p>This is an example of <u>underlined text</u>.</p>
</body>
</html>

Output:
This is an example of underlined text.

Marked Text (<mark>)

The <mark> tag highlights text with a background color (yellow by default).

<!DOCTYPE html>
<html>
<head>
   <title>Marked Text Example</title>
</head>
<body>
   <p>This is an example of <mark>marked text</mark>.</p>
</body>
</html>

Output:
This is an example of marked text.

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment