Text Formatting Tags

Yaser Rahmati | یاسر رحمتی

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 <b> tag to make text bold. This tag doesn’t add emphasis but makes the text bold visually.

  • Use the <strong> 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 <i> tag to italicize text. It is mainly used for stylistic purposes.

  • Use the <em> 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 <u> 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 <sub> tag to display text as a subscript (below the normal text).

  • Use the <sup> 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 <mark> 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 <small> 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

External Links

🌐 Personal Website 📄 Resume 🎥 Video Archive 💼 Finance Blog 🔐 Network & Security Notebook 🎬 Aparat Channel

PreviousHeadings and ParagraphsNextWorking with Links

Last updated