HTML Text Formatting
HTML has several elements for giving text a special meaning, such as bold, italic, or highlighted text.
Example
Bold, italic, and subscript/superscript text.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formatting Intro</title>
</head>
<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>
HTML Formatting Elements
Formatting elements show special types of text: <b> for bold, <strong> for important text, <i> for italic, <em> for emphasized text, <mark> for marked text, <small> for smaller text, <del> for deleted text, <ins> for inserted text, <sub> for subscript, and <sup> for superscript.
HTML <b> and <strong> Elements
The <b> element makes text bold without giving it any extra importance. The <strong> element marks text as important, and its content is usually shown in bold too.
Bold text
Bold text with <b>.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bold</title>
</head>
<body>
<b>This text is bold</b>
</body>
</html>
Important text
Important text with <strong>.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strong</title>
</head>
<body>
<strong>This text is important!</strong>
</body>
</html>
HTML <i> and <em> Elements
The <i> element marks text in an alternate voice or mood, usually shown in italic; it is often used for a technical term, a phrase in another language, a thought, or a ship name. The <em> element marks emphasized text, also usually italic; a screen reader will say <em> text with verbal stress.
Italic text
Italic text with <i>.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Italic</title>
</head>
<body>
<i>This text is italic</i>
</body>
</html>
Emphasized text
Emphasized text with <em>.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emphasized</title>
</head>
<body>
<em>This text is emphasized</em>
</body>
</html>
HTML <small> Element
The <small> element makes text smaller.
Example
Smaller text with <small>.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Small</title>
</head>
<body>
<small>This is some smaller text.</small>
</body>
</html>
HTML <mark> Element
The <mark> element marks or highlights text.
Example
A highlighted word with <mark>.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mark</title>
</head>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>
HTML <del> Element
The <del> element marks text that has been deleted from a document. Browsers usually strike a line through it.
Example
Deleted text with <del>.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Del</title>
</head>
<body>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>
HTML <ins> Element
The <ins> element marks text that has been inserted into a document. Browsers usually underline it.
Example
Deleted and inserted text together.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ins</title>
</head>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
</body>
</html>
HTML <sub> Element
The <sub> element makes subscript text, which sits half a character below the normal line and is sometimes smaller. It is useful for things like chemical formulas, such as H2O.
Example
Subscript text with <sub>.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sub</title>
</head>
<body>
<p>This is <sub>subscripted</sub> text.</p>
</body>
</html>
HTML <sup> Element
The <sup> element makes superscript text, which sits half a character above the normal line and is sometimes smaller. It is useful for things like footnotes.
Example
Superscript text with <sup>.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sup</title>
</head>
<body>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
HTML Text Formatting Elements
A quick reference of the formatting tags: <b> bold text, <em> emphasized text, <i> alternate voice or mood, <small> smaller text, <strong> important text, <sub> subscript, <sup> superscript, <ins> inserted text, <del> deleted text, and <mark> marked or highlighted text.