Text Formatting Tags

HTML provides several tags to format and style text. Here’s an overview of the most commonly used text formatting tags.

1. Bold Text

Use the  tag to make text bold. This tag doesn’t add emphasis but makes the text bold visually.
Use the  tag to indicate that the text is important, which also makes the text bold but has a semantic meaning.
Syntax:

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

Example:

<p>This is <b>bold</b> text, and this is <strong>important bold</strong> text.</p>

2. Italic Text

Use the  tag to italicize text. It is mainly used for stylistic purposes.
Use the  tag to emphasize text, which also italicizes it but conveys importance.
Syntax:

<i>This is italic text</i>
<em>This is emphasized text</em>

Example:

<p>This is <i>italic</i> text, and this is <em>emphasized</em> text.</p>

3. Underlined Text

The  tag is used to underline text.
Syntax:

<u>This is underlined text</u>

Example:

<p>This is <u>underlined</u> text.</p>

4. Strikethrough Text

The <s> tag creates strikethrough text, meaning the text will appear with a line through it, indicating it is incorrect or no longer relevant.
Syntax:

<s>This text has been struck through</s>

Example:

<p>This is <s>strikethrough</s> text.</p>

5. Subscript and Superscript

Use the  tag to display text as a subscript (below the normal text).
Use the  tag to display text as a superscript (above the normal text).
Syntax:

H<sub>2</sub>O (Water)
x<sup>2</sup> (Superscript)

Example:

<p>Water is written as H<sub>2</sub>O, and x squared is written as x<sup>2</sup>.</p>

6. Monospaced Text

Use the <code> tag for displaying code in a monospaced font, often used in programming examples.
Use the <pre> tag to preserve both spaces and line breaks, which is useful for preformatted text.
Syntax:

<code>console.log('Hello, World!');</code>
<pre>
Line 1
Line 2
Line 3
</pre>

Example:

<p>This is some code: <code>console.log('Hello, World!');</code></p>
<pre>
This is preformatted text
that preserves spaces and
line breaks.
</pre>

7. Highlighted Text

The  tag highlights text, typically with a yellow background.
Syntax:

<mark>This text is highlighted</mark>

Example:

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

8. Small Text

The  tag reduces the size of the text, often used for fine print.
Syntax:

<small>This is small text</small>

Example:

<p>This is <small>small</small> text.</p>

9. Quotation and Citation

Use the <q> tag to create inline quotes.
Use the <blockquote> tag for longer, block-level quotations.
Use the <cite> tag to reference the source of a quotation.
Syntax:

<q>This is an inline quote.</q>
<blockquote>This is a block-level quotation.</blockquote>
<cite>— Author Name</cite>

Example:

<p>She said, <q>This is an inline quote</q>.</p>
<blockquote>This is a block-level quote, often used for long quotations from a book or article.</blockquote>
<cite>— Famous Author</cite>

Full Example Using Formatting Tags

<!DOCTYPE html>
<html>
<head>
    <title>Text Formatting in HTML</title>
</head>
<body>
    <p>This is <b>bold</b>, <strong>strong</strong>, <i>italic</i>, and <em>emphasized</em> text.</p>
    <p>This is <u>underlined</u> and <s>strikethrough</s> text.</p>
    <p>Water is written as H<sub>2</sub>O, and x squared is written as x<sup>2</sup>.</p>
    <p>Some code: <code>console.log('Hello, World!');</code></p>
    <pre>
    This is preformatted text
    that preserves spaces and
    line breaks.
    </pre>
    <p>This is <mark>highlighted</mark> text and <small>small</small> text.</p>
    <p>She said, <q>This is an inline quote</q>.</p>
    <blockquote>This is a block-level quote for long quotes.</blockquote>
    <cite>— Author Name</cite>
</body>
</html>

This guide introduces the essential text formatting tags in HTML, allowing you to control the appearance of your content.

Keywords

HTML, Hypertext Markup Language, Tags, Elements, Attributes, Head, Body, Paragraph, Heading, Title, Meta, Link, Image, Anchor, Hyperlink, List, Table, Form, Input, Button, CSS, Class, ID, Inline, Block, Div, Span, Script, Styles, Font, Color, Background, Margin, Padding, Border, Doctype, HTML5, Video, Audio, Canvas, SVG

PreviousHeadings and Paragraphs NextWorking with Links

Last updated 10 months ago