HTML Formatting

HTML Formatting Elements

 

<!DOCTYPE html>

<html>

<body>

 

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

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

<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

 

</body>

</html>

 

This text is bold

This text is italic

This is subscript and superscript

In the previous chapter, you learned about 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:

  • <b> – Bold text
  • <strong> – Important text
  • <i> – Italic text
  • <em> – Emphasized text
  • <mark> – Marked text
  • <small> – Small text
  • <del> – Deleted text
  • <ins> – Inserted text
  • <sub> – Subscript text
  • <sup> – Superscript text

 

HTML <b> and <strong> Elements

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

<!DOCTYPE html>

<html>

<body>

 

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

 

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

 

</body>

</html>

 

This text is normal.

This text is bold.

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

<!DOCTYPE html>

<html>

<body>

 

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

 

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

 

</body>

</html>

 

This text is normal.

This text is strong.

HTML <i> and <em> Elements

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

<!DOCTYPE html>

<html>

<body>

 

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

 

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

 

</body>

</html>

This text is normal.

This text is italic.

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

<!DOCTYPE html>

<html>

<body>

 

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

 

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

 

</body>

</html>

 

This text is normal.

This text is emphasized.

Note: Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is “important”.


HTML <small> Element

The HTML <small> element defines smaller text:

<!DOCTYPE html>

<html>

<body>

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

</body>

</html>

HTML Small Formatting

HTML <mark> Element

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

<!DOCTYPE html>

<html>

<body>

 

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

 

</body>

</html>

HTML Marked Formatting

HTML <del> Element

The HTML <del> element defines deleted/removed text.

<!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>

 

The del element represents deleted (removed) text.

My favorite color is blue red.

HTML <ins> Element

The HTML <ins> element defines inserted/added text.

<!DOCTYPE html>

<html>

<body>

 

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

 

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

 

</body>

</html>

 

The ins element represent inserted (added) text.

My favorite color is red.

HTML <sub> Element

The HTML <sub> element defines subscripted text.

<!DOCTYPE html>

<html>

<body>

 

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

 

</body>

</html>

 

This is subscripted text.

HTML <sup> Element

The HTML <sup> element defines superscripted text.

<!DOCTYPE html>

<html>

<body>

 

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

 

</body>

</html>

 

This is superscripted text.