HTML Text Formatting Elements


Text Formatting

This text is bold

This text is italic

This is superscript

HTML Formatting Elements

In the previous chapter, you learned about HTML styling, using the HTML style attribute.

HTML also defines special elements, for defining text with a special meaning.

HTML uses elements like <b> and <i> for formatting output, like bold or italic text.

Formatting elements were designed to display special types of text:

  • Bold text
  • Important text
  • Italic text
  • Emphasized text
  • Marked text
  • Small text
  • Deleted text
  • Inserted text
  • Subscripts
  • Superscripts

HTML Bold and Strong Formatting

The HTML <b> element defines bold text, without any extra importance.

Example

<!DOCTYPE html>
<html>
<body>

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

<p><b>This text is bold.</b></p>

</body>
</html>

The HTML <strong> element defines strong text, with added semantic "strong" importance.

Example

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

HTML Italic and Emphasized Formatting

The HTML <i> element defines italic text, without any extra importance.

Example

<!DOCTYPE html>
<html>
<body>

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

<p><i>This text is italic.</i></p>

</body>
</html>

The HTML <em> element defines emphasized text, with added semantic importance.

Example

<!DOCTYPE html>
<html>
<body>

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

<p><em>This text is emphasized.</em></p>

</body>
</html>

HTML Small Formatting

The HTML <small> element defines small text:

Example

<!DOCTYPE html>
<html>
<body>

<h2>HTML <small>Small</small> Formatting</h2>

</body>
</html>

HTML Marked Formatting

The HTML <mark> element defines marked or highlighted text:

Example

<!DOCTYPE html>
<html>
<body>

<h2>HTML <mark>Marked</mark> Formatting</h2>

</body>
</html>

HTML Deleted Formatting

The HTML <del> element defines deleted (removed) text.

Example

<!DOCTYPE html>
<html>
<body>

<p>The del element represents deleted (removed) text.</p>

<p>My favorite color is <del>blue</del> red.</p>

</body>
</html>

HTML Inserted Formatting

The HTML <ins> element defines inserted (added) text.

Example

<!DOCTYPE html>
<html>
<body>

<p>The ins element represent inserted (added) text.</p>

<p>My favorite <ins>color</ins> is red.</p>

</body>
</html>

HTML Subscript Formatting

The HTML <sub> element defines subscripted text.

Example

<!DOCTYPE html>
<html>
<body>

<p>This is <sub>subscripted</sub> text.</p>

</body>
</html>

HTML Superscript Formatting

The HTML <sup> element defines superscripted text.

Example

<!DOCTYPE html>
<html>
<body>

<p>This is <sup>superscripted</sup> text.</p>

</body>
</html>


Advertisements