Skip to main content

Text Formatting in HTML

Text formatting in HTML allows you to emphasize, style, and structure text content on a webpage. HTML provides a variety of tags for bolding, italicizing, underlining, and more. Proper text formatting enhances readability, accessibility, and user engagement.

What is Text Formatting in HTML?​

Text formatting refers to applying specific styles or emphasis to text elements using HTML tags. These tags are semantic, which means they convey meaning to both browsers and users (including screen readers).

Common Use Cases:​

  1. Emphasizing important text.
  2. Defining document structure (e.g., headings, paragraphs).
  3. Improving readability through visual cues.

Text Formatting Tags Overview​

Below are the most commonly used HTML tags for text formatting:

TagPurposeExample
<b>Bolds text (without semantic meaning)<b>Bold Text</b>
<strong>Bolds text with semantic emphasis<strong>Important Text</strong>
<i>Italics text (without semantic meaning)<i>Italicized Text</i>
<em>Italics text with semantic emphasis<em>Emphasized Text</em>
<u>Underlines text<u>Underlined Text</u>
<mark>Highlights text<mark>Highlighted Text</mark>
<small>Reduces font size<small>Smaller Text</small>
<del>Strikethrough text (deleted content)<del>Deleted Text</del>
<ins>Underlined text (inserted content)<ins>Inserted Text</ins>
<sup>Superscript textx<sup>2</sup>
<sub>Subscript textH<sub>2</sub>O
<code>Displays inline code<code>let x = 5;</code>
<pre>Preserves whitespace formatting<pre>Preformatted Text</pre>

Syntax and Examples​

1. Bold Text​

The <b> tag makes text bold but does not convey semantic importance.

index.html
<p>This is <b>bold text</b>.</p>
http://.../index.html

This is bold text.

2. Emphasized Text​

The <strong> tag conveys importance and renders text in bold.

index.html
<p>This is <strong>important text</strong>.</p>
http://.../index.html

This is important text.

3. Italic Text​

The <i> tag italicizes text without semantic emphasis.

index.html
<p>This is <i>italicized text</i>.</p>
http://.../index.html

This is italicized text.

4. Underlined Text​

The <u> tag underlines text.

index.html
<p>This is <u>underlined text</u>.</p>
http://.../index.html

This is underlined text.

5. Highlighted Text​

The <mark> tag highlights text.

index.html
<p>This is <mark>highlighted text</mark>.</p>
http://.../index.html

This is highlighted text.

6. Strikethrough Text​

The <del> tag strikes through text, often used to indicate deleted content.

index.html
<p>This is <del>struck-through text</del>.</p>
http://.../index.html

This is struck-through text.

7. Superscript and Subscript​

Use <sup> for superscript and <sub> for subscript.

index.html
<p>Superscript: E = mc<sup>2</sup></p>
<p>Subscript: H<sub>2</sub>O</p>
http://.../index.html

Superscript: E = mc2

Subscript: H2O

8. Code and Preformatted Text​

The <code> tag displays inline code, while <pre> preserves whitespace formatting.

index.html
<p>
  Inline Code: <code>let x = 10;</code>
</p>
<pre>
  Preformatted Text
  Line 2
</pre>
http://.../index.html

Inline Code: let x = 10;

Preformatted Text
Line 2

Example: Combining Formatting Tags​

index.html
<!DOCTYPE html>
<html>
<head>
  <title>HTML Text Formatting</title>
</head>
<body>
  <h1>Text Formatting Example</h1>
  <p><b>This text is bold.</b></p>
  <p><strong>This text is bold and important.</strong></p>
  <p><i>This text is italicized.</i></p>
  <p><em>This text is italicized and emphasized.</em></p>
  <p><u>This text is underlined.</u></p>
  <p><mark>This text is highlighted.</mark></p>
  <p>Superscript: x<sup>2</sup></p>
  <p>Subscript: H<sub>2</sub>O</p>
  <p>Inline Code: <code>let x = 5;</code></p>
</body>
</html>
http://127.0.0.1:5500/index.html

Text Formatting Example

This text is bold.

This text is bold and important.

This text is italicized.

This text is italicized and emphasized.

This text is underlined.

This text is highlighted.

Superscript: x2

Subscript: H2O

Inline Code: let x = 5;

Styling Formatted Text with CSS​

HTML formatting tags can be styled further using CSS. For example:

index.html
<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      font-family: Arial, sans-serif;
    }
    mark {
      background-color: yellow;
      font-weight: bold;
    }
    code {
      font-family: "Courier New", monospace;
      background-color: #f4f4f4;
      padding: 2px 4px;
    }
  </style>
</head>
<body>
  <h1>Formatted Text with CSS</h1>
  <p>This is <mark>highlighted</mark> and <code>inline code</code>.</p>
</body>
</html>
http://127.0.0.1:5500/index.html

Formatted Text with CSS

This is highlighted and inline code.

Conclusion​

Text formatting in HTML enhances the readability and structure of your content. By using semantic tags like <strong>, <em>, and <mark>, you can make your content more accessible and engaging. Combined with CSS, text formatting allows for visually appealing designs tailored to your audience's needs.