HTML Formatting

Specialized text elements convey both visual styling and semantic significance, establishing content hierarchy and communicating meaning to assistive technologies.

Formatting tags enhance content legibility while embedding structural meaning. These elements simultaneously modify visual presentation and communicate contextual importance to screen readers and search indexing systems.

Weighted Text - versus

Two distinct approaches create bold typography:  (conveys critical importance) and  (purely visual weighting).

Weighted Typography Demonstrations
<p>Consider this <strong>crucial information</strong> carrying semantic weight.</p>
<p>Apply <b>visual boldness</b> for stylistic distinction.</p>
<p>Explore <strong>htmlfreecodes.com</strong> for comprehensive lessons!</p>

Result:

Consider this crucial information carrying semantic weight.

Apply visual boldness for stylistic distinction.

Explore htmlfreecodes.com for comprehensive lessons!

Slanted Typography - versus

Italic rendering utilizes  (conveys vocal stress) and  (decorative slanting without emphasis).

Italic Styling Patterns
<p>Notice how <em>vocal stress</em> modifies meaning.</p>
<p>Apply <i>decorative slanting</i> for aesthetic purposes.</p>
<p>Discover resources at <em>htmlfreecodes.com</em> today!</p>

Result:

Notice how vocal stress modifies meaning.

Apply decorative slanting for aesthetic purposes.

Discover resources at htmlfreecodes.com today!

Underscored Content -

The  tag applies text underscoring, though exercise caution since underlining resembles hyperlink styling.

Underscore Application
<p>Mark content with <u>distinctive underscoring</u> requiring focus.</p>
<p>Access <u>htmlfreecodes.com</u> for educational materials.</p>

Result:

This text is underlined for special attention.

Visit htmlfreecodes.com for tutorials.

Marked/Highlighted Text -

The  element is used to highlight text, typically with a yellow background.

Highlighted Text Examples
<p>This text has <mark>highlighted content</mark> for emphasis.</p>
<p>Learn HTML at <mark>htmlfreecodes.com</mark> today!</p>

Result:

This text has highlighted content for emphasis.

Learn HTML at htmlfreecodes.com today!

Small Text -

The  element is used to make text smaller, often for fine print, disclaimers, or copyright information.

Small Text Examples
<p>This is normal text.</p>
<p><small>This is smaller text.</small></p>
<p><small>© 2024 htmlfreecodes.com - All rights reserved.</small></p>

Result:

This is normal text.

This is smaller text.

Deleted and Inserted Text - <del> and <ins>

Use <del> for deleted text (strikethrough) and <ins> for inserted text (underlined).

Deleted and Inserted Text Examples
<p>The price is <del>$50</del> <ins>$40</ins>.</p>
<p>Visit <del>oldwebsite.com</del> <ins>htmlfreecodes.com</ins> instead.</p>

Result:

The price is ~~$50~~ $40.

Visit ~~oldwebsite.com~~ htmlfreecodes.com instead.

Subscript and Superscript - and

Use  for subscript text and  for superscript text.

Subscript and Superscript Examples
<p>Water formula: H<sub>2</sub>O</p>
<p>Einstein's equation: E = mc<sup>2</sup></p>
<p>Learn more at htmlfreecodes.com<sup>TM</sup></p>

Result:

Water formula: H₂O

Einstein's equation: E = mc²

Learn more at htmlfreecodes.com^TM

Complete Formatting Example

Here's a comprehensive example that combines multiple formatting elements:

Combined Formatting Example
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Free Codes - Formatting Tutorial</title>
</head>
<body>
    <h1>Welcome to HTML Free Codes</h1>

    <p><strong>Important:</strong> This is a <em>comprehensive</em> tutorial on HTML formatting.</p>

    <p>Our website <mark>htmlfreecodes.com</mark> offers:</p>
    <ul>
        <li><b>Free</b> HTML tutorials</li>
        <li><i>Interactive</i> examples</li>
        <li><u>Practice</u> exercises</li>
    </ul>

    <p>Price: <del>$99</del> <ins>FREE</ins></p>

    <p>Formula for success: Practice<sup>2</sup> + Learning<sub>daily</sub> = Success</p>

    <p><small>© 2024 HTML Free Codes. All rights reserved.</small></p>
</body>
</html>

Try it Yourself

Create your own formatted webpage!

Try Formatting Example

HTML Formatting

Weighted Text - <strong> versus <b>

Weighted Typography Demonstrations

Result:

Slanted Typography - <em> versus <i>

Italic Styling Patterns

Result:

Underscored Content - <u>

Underscore Application

Result:

Marked/Highlighted Text - <mark>

Highlighted Text Examples

Result:

Small Text - <small>

Small Text Examples

Result:

Deleted and Inserted Text - <del> and <ins>

Deleted and Inserted Text Examples

Result:

Subscript and Superscript - <sub> and <sup>

Subscript and Superscript Examples

Result:

Complete Formatting Example

Combined Formatting Example

Try it Yourself

Test Your Knowledge