HTML Formatting


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
  • Italic Text
  • Emphasized Text
  • Underlined Text
  • Strike Text
  • Monospaced Font
  • Superscripts Text
  • Subscripts Text
  • Inserted Text
  • Deleted Text
  • Larger Text
  • Small Text
  • Marked Text
  • Important Text

Bold Text

<b>...</b> element, is displayed in bold.

Example

Welcome to <b> HTML </b>Tutorial
Output
Welcome to  HTML Tutorial

Italic Text

<i>...</i> element is displayed in italicized.

Example

Welcome to <i> HTML </i>Tutorial
Output
Welcome to  HTML Tutorial

Emphasized Text

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

Example

Welcome to <em> HTML </em>Tutorial
Output
Welcome to  HTML  Tutorial

Underlined Text

<u>...</u> element, is displayed with underline.

Example

Welcome to <u> HTML </u>Tutorial
Output
Welcome to  HTML Tutorial

Strike Text

<strike>...</strike> element is displayed with strikethrough, which is a thin line through the text.

Example

Welcome to <strike> HTML </strike>Tutorial
Output
Welcome to  HTML Tutorial

Monospaced Font

The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths. In a monospaced font, however, each letter has the same width.

Example

Welcome to <tt> HTML </tt>Tutorial
Output
Welcome to  HTML Tutorial

Superscript Text

The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters.

Example

Welcome to <sup> HTML </sup>Tutorial
Output
Welcome to  HTML Tutorial

Subscript Text

The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters.

Example

Welcome to <sub> HTML </sub>Tutorial
Output
Welcome to  HTML Tutorial

Inserted Text

<ins>...</ins> element is displayed as inserted text.

Example

Welcome to <del> CSS </del> <ins> HTML </ins>Tutorial
Output
Welcome to  CSS   HTML Tutorial

Deleted Text

<del>...</del> element, is displayed as deleted text.

Example

Welcome to <del> CSS </del> <ins> HTML </ins>Tutorial
Output
Welcome to  CSS   HTML Tutorial

Larger Text

<big>...</big> element is displayed one font size larger than the rest of the text surrounding it.

Example

Welcome to <big> HTML </big>Tutorial
Output
Welcome to  HTML Tutorial

Smaller Text

<small>...</small> element is displayed one font size smaller than the rest of the text surrounding it.

Example

Welcome to <small> HTML </small>Tutorial
Output
Welcome to  HTML Tutorial

HTML Marked Formatting

The HTML <mark>...</mark> element defines marked or highlighted text.

Example

Welcome to <mark> HTML </mark>Tutorial
Output
Welcome to  HTML  Tutorial

Important Text

The <strong>...</strong> tag is a phrase tag. It defines important text.

Example

Welcome to <strong> HTML </strong>Tutorial
Output
Welcome to  HTML  Tutorial

Share this article on