Home » HTML » HTML Formatting Tags

HTML Formatting Tags

HTML Formatting Tags are used to change appearance of text for better look and feel than the default text. The formatting tags can make text bold, italic, underlined, etc.

All the formatting tags are paired tags. Anything written between any formatting tag will be displayed according to the tag in the browser. For example, anything written between <i> and </i> will display as italic text in the browser.


There are different tags for various formatting tags. Each Tag has its own type of formatting associated with it.

Some HTML Formatting tags are:

  • Bold Tag <b>
  • Italic Tag <i>
  • Underline Tag <u>
  • Strong Tag <strong>
  • Small Tag <small>
  • Big Tag <big>
  • Mark Tag <mark>
  • Emphasized Tag <em>
  • Deleted Tag <del>
  • Inserted Tag <ins>
  • Subscripted Tag <sub>
  • Superscripted Tag <sup>

HTML Bold Tag

The HTML <b> Tag defines bold text. Bold text is wider and darker text than the default text, without any extra importance to the browser. Look at the example below.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Bold Text </title>
</head>
<body>
<p> This is Normal text. </p>
<b> This is Bold Text. </b>
</body>
</html>

Output

HTML Bold Text Example

This is normal text.

This is Bold Text.

HTML Strong Text

The HTML <strong> Tag displays same formatting like a <b> tag. But the Strong text has some importance to the browser and search engines. It is always recommended to write keywords within <strong> Tag to give them extra importance.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Strong Text </title>
</head>
<body>
<p> This is Normal text </p>
<strong> This Text is Strong </strong>
</body>
</html>

Output

HTML Strong Tag Example

This is Normal text

This Text is Strong

HTML Italic Text

The HTML <i> Tag defines italic text. This type of formatting displays cursive font based text that slant slightly to the right.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Italic Text </title>
</head>
<body>
<p> This is normal text </p>
<i> This is italic Text </i>
</body>
</html>

Output

HTML Italic Text Example

This is normal text

This is italic Text

HTML Underlined Text

The HTML <u> Tag defines Underlined text. All the text within the <u> and </u> tags will have an underline throughout.

Underlined Text is used to draw attention of the user and is a default formatting for a hyperlinked text.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Underlined Text </title>
</head>
<body>
<p> This is Normal text </p>
<u> This is Underlined Text </u>
</body>
</html>

Output

Underlined Text

This is Normal text

This is Underlined Text

HTML Small Text

The HTML <small> Tag defines small text. This text is used for some side commenting or to write some copyright information.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Small Text </title>
</head>
<body>
This text is <small> small </small>.
</body>
</html>

Output

HTML Small Tag Example This text is small .

HTML Big Text

The HTML <big> element defines BIG text.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Big Tag </title>
</head>
<body>
This text is <big> BIG </big>
</body>
</html>

Output

HTML Big Tag Example This text is BIG

HTML Marked Text

The HTML <mark> Tag defines Highlighted text. The text will have a background color and represent relevancy in an HTML document.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Mark Tag </title>
</head>
<body>
This text is <mark> Marked. </mark>
</body>
</html>

Output

HTML Mark Tag Example This text is Marked.

HTML Emphasized Text

The HTML <em> element defines Emphasized text. It will give the text the same Italic formatting. This tag is important for screen readers. The screen readers give extra emphasize on this type of text and read it with verbal stress.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Emphasize Text </title>
</head>
<body>
This text is Normal.
This text is <em> Emphasized. </em>
</body>
</html>

Output

HTML Emphasize Tag Example This text is Normal.
This text is Emphasized.

HTML Deleted Text

The HTML <del> element defines Deleted text. This displays Text with a line strike.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Delete Text </title>
</head>
<body>
<p> This text is Normal. </p>
This text is <del> Deleted. </del>
</body>
</html>

Output

HTML Delete Tag Example

This text is Normal.

This text is Deleted.

HTML Inserted Text

The HTML <ins> element defines inserted (added) text. It gives the underlined formatting to the text. It is used in combination with deleted text.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Insert Text </title>
</head>
<body>
This text is <ins> inserted. </ins>
</body>
</html>

Output

Insert Text This text is inserted.

HTML Subscripted Text

The HTML <sub> element defines subscripted text. This type of text is small in size and is placed slightly below the normal line of text.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Subscript Text </title>
</head>
<body>
This text is <b> bold. </b>
This text is <i> italic. </i>
This text is <sup> Subscripted. </sup>
</body>
</html>

Output

HTML Subscript Tag Example This text is bold.
This text is italic.
This text is Subscripted.

HTML Superscripted Text

The HTML <sup> element defines superscripted text. It also dispalys very small text like subscript, but here, the text is placed slightly above the normal line of text.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Superscript Tag </title>
</head>
<body>
This text is <b> bold. </b>
This text is <i> italic. </i>
This text is <sup> Superscripted.
</body>
</html>

Output

HTML Superscript Tag Example This text is bold.
This text is italic.
This text is Superscripted.

















Follow Us: