HTML Text Formatting

Last Updated : 17 Oct, 2024

HTML text formatting refers to the use of specific HTML tags to modify the appearance and structure of text on a webpage. It allows you to style text in different ways, such as making it bold, italic, underlined, highlighted, or struck-through.

Table of Content

Categories of HTML Text Formatting

Logical Tags
Physical Tags

HTML Formatting Elements
Examples of HTML Text Formatting

Basic Text Formatting
Combining Logical and Physical Tags

Categories of HTML Text Formatting

HTML text formatting can be divided into two main categories: Logical Tags and Physical Tags.

1. Logical Tags

Logical tags convey the meaning or importance of the text without necessarily altering its visual appearance. These tags help browsers, search engines, and assistive technologies understand the purpose of the text.

: Emphasizes text, typically rendered in italics. It implies that the text carries special importance or requires emphasis.
: Marks text as important, often displayed in bold. It implies the content is of strong importance.

2. Physical Tags

Physical tags directly affect how text looks on the webpage by changing the font, size, or style.

: Displays text in bold without implying importance.
: Italicizes text without any implied emphasis.

Here’s a list of commonly used HTML text formatting tags and their description:

Tags	Description
<i>	Showcases italicized text.
<small>	Renders text in a smaller font size.
<ins>	Highlights added or inserted text.
<sub>	Creates subscript text.
<strong>	Emphasizes text with importance, often in bold.
<b>	Displays text in a bold format.
<mark>	Accentuates text with a background highlight.
<del>	Strikes through text to signify deletion.
<em>	Adds emphasis to text, commonly styled as italic.
<sup>	Formats text as superscript.

HTML Formatting Elements

1. – Italicizes text

Use the tag to display text in italics without implying emphasis.

<i>This is italic text.</i>

2. – Reduces the font size of the text

The tag renders text in a smaller font than the surrounding text.

<small>This text is smaller than the rest.</small>

3. <ins> – Highlights inserted text

The <ins> tag marks text as newly added or inserted, often displayed with an underline.

<ins>This is inserted text.</ins>

4. – Displays subscript text

Use the tag for subscripted text, often used in chemical formulas or footnotes.

H<sub>2</sub>O

5. – Emphasizes important text, often rendered in bold

The tag is semantically meaningful and indicates that the text is of high importance.

<strong>This text is bold and important.</strong>

6. – Makes text bold

The tag visually makes the text bold but does not imply any special significance.

<b>This is bold text.</b>

7. – Highlights text with a background color

The tag highlights text with a background color, similar to using a highlighter on paper.

<mark>This text is highlighted.</mark>

8. <del> – Strikes through text

The <del> tag is used to show that text has been deleted or is no longer relevant.

<del>This text is crossed out.</del>

9. – Emphasizes text, typically italicized

The tag is used for emphasized text and is usually rendered in italics to highlight importance.

<em>This text is emphasized.</em>

10. – Displays superscript text

Use the tag to show superscripted text, commonly used in exponents or footnotes.

E = mc<sup>2</sup>

Examples of HTML Text Formatting

Example 1: Basic Text Formatting

In this example we demonstrates various text formatting tags: for important and bold text, for emphasized and italic text, for bold text, for italic text, and for highlighted text.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Text Formatting Example</title>
</head>

<body>
    <p>
        <strong>Strong:</strong> 
        This text is important and bold.
    </p>
    <p>
        <em>Emphasized:</em> 
        This text is emphasized and italic.
    </p>
    <p>
        <b>Bold:</b> 
        This text is bold.
    </p>
    <p>
        <i>Italic:</i> 
        This text is italic.
    </p>
    <p>
        <mark>Marked:</mark> 
        This text is highlighted.
    </p>
</body>

</html>

Output:

HTML Text Formatting Example Output

Example 2: Combining Logical and Physical Tags

This example shows how logical and physical tags can be combined for enhanced text formatting:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Advanced Text Formatting</title>
</head>

<body>
    <p>This is a 
        <strong><em>very important</em></strong> message.
    </p>
    <p>The chemical formula of water is H
        <sub>2</sub>O.
    </p>
    <p>
        <del>Deleted text</del> and 
        <ins>inserted text</ins> 
        are shown here.
    </p>
    <p><small>Smaller text</small> 
        can be used for disclaimers.
    </p>
    <p>E = mc<sup>2</sup></p>
</body>

</html>

Output:

Combining Logical and Physical Tags