Prev Next

HTML Formatting

HTML formatting elements define how text is presented in the browser. These elements can make certain parts of text stand out or convey meaning. For example, <strong> makes text bold to indicate importance, while <em> makes text italic to emphasize it. Proper use of formatting elements can improve the readability and semantic value of your content.

Key Topics

Common Formatting Elements

Below are some commonly used formatting tags shown individually with a brief description. Each example is presented as a code snippet preceded by explanatory text.

Example: The <strong> element makes text bold, indicating strong importance.

<strong>Important text</strong>

Example: The <em> element italicizes text, indicating emphasis.

<em>Emphasized text</em>

Example: The <mark> element highlights or marks text.

<mark>Highlighted text</mark>

Example: The <small> element indicates smaller text for fine print.

<small>Small text</small>

Example: The <del> and <ins> elements show deleted and inserted text respectively.

<del>Deleted text</del> and <ins>Inserted text</ins>

Example: The <sub> and <sup> elements format text as subscript and superscript.

H<sub>2</sub>O and X<sup>2</sup>

Basic Page Structure Example

This example demonstrates how formatting tags can be used throughout a simple HTML page. Since this is a full HTML code demonstration, it is enclosed in a copy code box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formatted Text</title>
</head>
<body>
    <h1>Using Formatting Tags</h1>
    <p>Here is some <strong>important</strong> text and some <em>emphasized</em> text.</p>
    <p>We can also show <mark>highlighted</mark> text or text that is <del>removed</del> and <ins>added</ins>.</p>
    <p>Subscripts like H<sub>2</sub>O and superscripts like X<sup>2</sup> are also possible.</p>
    <p>Some text can appear <small>smaller</small> than normal.</p>
</body>
</html>

Explanation: The example above uses various formatting tags to make certain parts of the text stand out, indicate emphasis, or show scientific notation. These tags improve the semantics and readability of your content.

More Complex Example: Tables

Formatting tags can also be applied within tables to emphasize data or highlight changes. Below is another code-box demonstration.

<h2>Price List</h2>
<table border="1" style="border-collapse:collapse;">
    <tr>
        <th>Item</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Book</td>
        <td><strong>$15</strong></td>
    </tr>
    <tr>
        <td>Pen</td>
        <td><del>$2</del> <ins>$1.50</ins></td>
    </tr>
</table>

Explanation: The table cells are formatted to emphasize prices and show changes in cost by using <strong>, <del>, and <ins>. This approach helps users quickly identify important or updated information.

Key Takeaways

  • Formatting tags provide semantic meaning and visual distinction to your text.
  • Use <strong> and <em> for importance and emphasis rather than purely visual styling.
  • <mark>, <small>, <del>, <ins>, <sub>, and <sup> serve specific formatting purposes and add clarity.
  • Combine formatting tags with other elements to provide richer, more informative content.
  • Keep formatting consistent and meaningful to enhance readability and comprehension.
Prev Next