HTML Text Formatting

❮ Previous Next ❯

HTML Text Formatting: Styling Your Content

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.

Proper text formatting not only improves the visual appeal of your content but also helps convey meaning and structure to both users and search engines.

Categories of HTML Text Formatting

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

1. Logical (Semantic) Tags

Logical tags convey the meaning or importance of the text. They tell browsers, search engines, and assistive technologies (like screen readers) about the purpose of the text, rather than just how it should look.

: Emphasizes text, which browsers typically render in italics. It implies that the text carries special importance.
: Marks text as highly important, often displayed in bold.

2. Physical Tags

Physical tags directly affect how text looks on the webpage by changing its style. They don't carry any extra semantic meaning.

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

Pro Tip: Whenever possible, prefer using logical tags (, ) over physical tags (, ). This improves accessibility and SEO because you are providing more context about your content.

Common Formatting Tags

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

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

Formatting Elements in Detail

Let's look at how to use each of these tags.

1. Bold and Strong

 is for visually bold text, while  indicates importance.

<p>This is <b>bold text</b> using the 'b' tag.</p>
<p>This is <strong>important text</strong> using the 'strong' tag.</p>

2. Italic and Emphasis

 is for visually italicized text, while  indicates emphasis.

<p>This is <i>italic text</i> using the 'i' tag.</p>
<p>This is <em>emphasized text</em> using the 'em' tag.</p>

3. Mark, Small, Inserted, and Deleted Text

<p>Use the <mark>mark tag</mark> to highlight text.</p>
<p>This is <small>smaller text</small> for fine print.</p>
<p>We have <del>deleted</del> <ins>inserted</ins> text here.</p>

4. Subscript and Superscript

Useful for formulas and footnotes.

<p>The chemical formula for water is H<sub>2</sub>O.</p>
<p>Einstein's famous equation is E = mc<sup>2</sup>.</p>

Combining Formatting Tags

You can nest formatting tags to apply multiple styles to the same piece of text.

Combining Tags Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
</body>
</html>

Exercise

Which pair of tags is considered "semantic" or "logical," meaning they add context and not just styling?

and and and