HTML Formatting

HTML formatting is used to style text to make it bold, italicized, emphasized, or styled in other ways. These tags help structure and emphasize content on a webpage.

Common HTML Formatting Tags

Tag Description Example
<b> Bold text (visual emphasis only) <b>Bold text</b>
<strong> Important text (semantic emphasis) <strong>Important text</strong>
<i> Italicized text (visual emphasis only) <i>Italicized text</i>
<em> Emphasized text (semantic emphasis) <em>Emphasized text</em>
<mark> Highlighted text <mark>Highlighted text</mark>
<small> Smaller text <small>Smaller text</small>
<del> Strikethrough text (deleted content) <del>Deleted text</del>
<ins> Inserted/underlined text <ins>Inserted text</ins>
<sub> Subscripted text (smaller, below baseline) H<sub>2</sub>O
<sup> Superscripted text (smaller, above baseline) x<sup>2</sup>
<q> Short inline quotation <q>Inline quote</q>
<cite> Citation of a title or reference <cite>Title of a book</cite>
<code> Code snippet (monospace font) <code>console.log('Hello!');</code>
<pre> Preformatted text (preserves spaces/line breaks) <pre>Preformatted text</pre>
<abbr> Abbreviation (adds a tooltip) <abbr title="HyperText Markup Language">HTML</abbr>

Examples of Formatting Tags

Bold and Italics

<p>This is <b>bold text</b> and this is <i>italicized text</i>.</p>

Try It Now

Strong and Emphasized

<p>This is <strong>important text</strong> and this is <em>emphasized text</em>.</p>

Try It Now

Highlighting Text

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

Try It Now

Strikethrough and Inserted Text

<p>This text is <del>removed</del> and this is <ins>added</ins>.</p>

Try It Now

Subscript and Superscript

<p>Water formula: H<sub>2</sub>O</p>
<p>Math equation: x<sup>2</sup></p>

Try It Now

Inline Quote

<p>She said, <q>This is a quote.</q></p>

Try It Now

Citation

<p>The book <cite>HTML for Beginners</cite> is a great resource.</p>

Try It Now

Preformatted Text

<pre>
This is preformatted text.
  Spaces and line breaks are preserved.
</pre>

Try It Now

Code Snippet

<p>Here is some code: <code class="h-color">console.log('Hello, world!');</code></p>

Try It Now

Abbreviation

<p>An example of <abbr title="HyperText Markup Language">HTML</abbr>.</p>

Try It Now

Combining Formatting Tags

You can combine multiple formatting tags to style your text further.
Example:

<p>
  This is <strong><em>bold and italicized</em></strong> text.
  Here is a <mark><abbr title="HyperText Markup Language">HTML</abbr></mark> abbreviation.
</p>

Try It Now

Example Webpage

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Formatting Example</title>
</head>
<body>
  <h1>HTML Formatting Tags</h1>
  <p>This is an example of <b>bold</b> and <i>italicized</i> text.</p>
  <p><strong>Important text</strong> can be combined with <em>emphasized text</em>.</p>
  <p>Use <mark>highlighting</mark> for key phrases.</p>
  <p>Deleted content: <del>Old price: $50</del></p>
  <p>Inserted content: <ins>New price: $40</ins></p>
  <p>Chemical formula: H<sub>2</sub>O</p>
  <p>Exponent: x<sup>2</sup></p>
  <p>A famous quote: <q>Practice makes perfect.</q></p>
  <p>Book title: <cite>The Art of HTML</cite></p>
  <pre>
    Preformatted text:
    Line 1
      Indented Line 2
  </pre>
  <p>Inline code: <code>&lt;h1&gt;Hello&lt;/h1&gt;</code></p>
  <p>Learn <abbr title="HyperText Markup Language">HTML</abbr> formatting!</p>
</body>
</html>

Try It Now

Best Practices

  1. Use semantic tags like <strong> and <em> for better accessibility.
  2. Avoid overusing formatting tags to maintain a clean layout.
  3. Combine tags sparingly to avoid overly complex markup.

HTML formatting is essential for emphasizing and organizing text on your webpage. By mastering these tags, you can create content that is both visually appealing and semantically meaningful.