totn HTML

HTML: <sub> tag

This HTML tutorial explains how to use the HTML element called the <sub> tag with syntax and examples.

Description

The HTML <sub> tag defines subscript text in an HTML document. For example, in the chemical formula CO2, the number 2 is rendered as subscript which has a smaller font and appears with a lowered baseline. This tag is also commonly referred to as the <sub> element.

Syntax

In HTML, the syntax for the <sub> tag is:

<body>
  <p>People release CO<sub>2</sub> when they breathe out.</p>
</body>

Sample Output

Attributes

Only the Global Attributes apply to the <sub> tag. There are no attributes that are specific to the <sub> tag.

Note

  • The HTML <sub> element is found within the <body> tag.
  • The <sub> tag is used to comply with typographical standards or conventions.
  • The <sub> tag is generally used to specify chemical formulas such as CO2, to mark up footnote numbers such as Footnote1 and to represent variables in mathematical formulas such as xn.

Browser Compatibility

The <sub> tag has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <sub> tag below, exploring examples of how to use the <sub> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <sub> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>The chemical formula for ammonia is NH<sub>3</sub>.</p>
</body>

</html>

In this HTML5 Document example, we have defined the chemical formula for NH3 using a <sub> tag. This renders the number 3 in the formula as smaller text that is a half of a character in height lower than the other text.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <sub> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>The chemical formula for water is H<sub>2</sub>O.</p>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have defined the chemical formula for H2O using a <sub> tag. This renders the number 2 in the formula as smaller text that is a half of a character in height lower than the other text.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <sub> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>The chemical formula for latex is C<sub>5</sub>H<sub>8</sub>.</p>
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have defined the chemical formula for C5H8 using a <sub> tag. This renders the numbers 5 and 8 in the formula as smaller text that is a half of a character in height lower than the other text.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <sub> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>The chemical formula for ammonia is NH<sub>3</sub>.</p>
</body>

</html>

In this XHTML 1.0 Strict Document example, we have defined the chemical formula for NH3 using a <sub> tag. This renders the number 3 in the formula as smaller text that is a half of a character in height lower than the other text.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <sub> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p>The chemical formula for water is H<sub>2</sub>O.</p>
</body>

</html>

In this XHTML 1.1 Document example, we have defined the chemical formula for H2O using a <sub> tag. This renders the number 2 in the formula as smaller text that is a half of a character in height lower than the other text.

Share on: