HTML Text Formatting
In this tutorial, we will learn to format text using different tags in HTML with the help of examples.
Text Formatting
HTML provides us with the ability for formatting text without using CSS, just like we do it in MS Word or any text editor software.Text Formatting is a process of formatting text for a better look.
HTML contains several elements for defining text with a special meaning.
Text Formatting Elements
Formatting elements are used to designed the text inside it.
Various formatting elements
<b> and <strong> Elements
- Bold tag is used to display bold text, without any extra importance.
- The <b> tag has both opening and closing tags.
- Strong tag is used to display text strong with semantic importance.
- The <strong> tag also have both opening and closing tags.
- There is no big difference between <b> tag and <strong> tags.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML Bold and Strong Elements</title>
</head>
<body>
<b>This is the Bold Text.</b>
<strong>This is the Strong Text.</strong>
</body>
</html>Output
This is the Bold Text.
This is the Strong Text.
<i> and <em> Elements
- Italic tag is used to display italicize text., without any extra importance.
- The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, etc.
- The<i> tag has both opening and closing tags.
- Emphasized tag is used to display Emphasized text, with semantic importance.
- The<em> tag also have both opening and closing tags.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML Italic and Emphasized Elements</title>
</head>
<body>
<i>This is a italic text.</i>
<em>This is Emphasized text.</em>
</body>
</html>Output
This is a italic text.
This is Emphasized text.
<small> and <big> Elements
- Small tag is used to display smaller text.
- The <small> tag has both opening and closing tags.
- Big tag is used to display a bigger text.
- The <big> tag also have both opening and closing tags.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML small and big Elements</title>
</head>
<body>
<small>This is a smaller text.</small>
<big>This is the Bigger Text.</big>
</body>
</html>Output
This is a smaller text.
This is the Bigger Text.
<sub> and <sup> Elements
- <sub> tag defines subscript text. Subscript text is displayed half a character’s below the normal line.
- The <sub> can be used for chemical formulas, like H2O, C6H12C6 , etc.
- The <sup> tag defines superscript text. Superscript text is displayed half a character’s above the normal line.
- The <sup> tag can be used for mathematics (square, cube), footnotes (www[1]).
- The <sub> and <sup> tag both have opening and closing tags.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML Superscript and Subscript Elements</title>
</head>
<body>
<p>This is a <sup>superscript</sup> text.</p>
<p>This is a <sub>subscript</sub> text.</p>
</body>
</html>Output
This is a superscript text.
This is the subscript text.
<ins> and <del> Elements
- <ins> tag is used to display inserted text. Browser will automatically add underline inserted text.
- The <ins> tag has both opening and closing tags.
- <del> tag is used to display deleted text from a document. Browser will automatically strike a line through deleted text.
- The <del> tag also have both opening and closing tags.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML Insert and Delete Elements</title>
</head>
<body>
<p>This is a <ins>inserted</ins> text.</p>
<p>This is a <del>deleted</del> text.</p>
</body>
</html>Output
This is a inserted text.
This is a
deletedtext.
<u> and <mark> Elements
- HTML <u> is used to display underline text.
- The <u> tag has both opening and closing tags.
- HTML <mark> tag is used to display marked or highlighted text.
- The <mark> tag also have both opening and closing tags.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML Underline and mark Elements</title>
</head>
<body>
<p>This is a <u>Underline</u> text.</p>
<p>This is a <mark>highlighted</mark> text.</p>
</body>
</html>Output
This is a Underline text.
This is a highlighted text.
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of text-formatting tag in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML Meta.