HTML5 Text Formatting
HTML5 Text Formatting
HTML5 text formatting is used to make our text visually appealing to the readers. In this tutorial, we’ll teach you how to use text formatting in HTML with examples.
HTML5 text formatting allows us to bold, italicize, underline, and perform many other operations with the text using its text formatting tags.
<b> - Bold text<strong> - Significant text<i> - Italicized text<em> - Emphasized text<mark> - marked text<small> - Small text<del> - Deleted text<ins> - Inserted text<sub> - Subscript text<sup> - Superscript text
HTML5 <b> and <strong> tag
HTML 5 <b> tag makes our tag bold without giving it any extra importance.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Text Formatting </title>
</head>
<body>
<b> This is a bold text </b>
</body>
</html>
The output of this code will be
HTML5 <strong> element bolds the text and gives its extra importance.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Text Formatting </title>
</head>
<body>
<strong> This text is more significant than the rest of the text <strong>
</body>
</html>
The output of this code will be
HTML <i> and <em> tag
HTML <i> element displays the text in an alternative mood. The content within it is italicized.
Note: <i> represents technical jargon, a phrase extracted from another language.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Text Formatting </title>
</head>
<body>
<i> This is an italic text </i>
</body>
</html>
The output of this code will be
<em> element emphasizes the text and makes it stand out. The content enclosed in this tag will be rendered in italic format by the browser.
Your website viewer will pronounce the word enclosed in <em> with verbal stress.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Text Formatting </title>
</head>
<body>
<em> This is an emphasized text </em>
</body>
</html>
HTML <small> tag
<small> element will reduce the text size.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Text Formatting </title>
</head>
<body>
<small> This text is smaller than the rest of the text </small>
</body>
</html>
The output of this code will be
HTML <mark> tag
<mark> element highlights or marks the text.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> Take one glass of milk <mark> regularly </mark> </p>
</body>
</html>
HTML <del> tag
Del element tells the readers that text is no longer part of the document. Therefore, users will ignore the text enclosed in the del tag.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> The price of our web development course is: <del> $60 </del> 10 </p>
</body>
</html>
HTML <ins> tag
<ins> element tells the readers that the old text has been replaced by the new one. Generally, the browser underlines the inserted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Text Formatting </title>
</head>
<body>
<p> My favorite food is <del> Pizza </del> <ins> boiled vegetables </ins> </p>
</body>
</html>
HTML <sub> tag
<sub> element subscripts our text. Subscript text appears below the normal text and will be rendered in a smaller font by the browser. Generally, we use subscript text to display chemical formulas like H20.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> The formula for water is H <sub> 2 </sub> O </p>
</body>
</html>
HTML <sup> tag
<sup> creates superscript text. Superscript text appears above the normal character and will be rendered in a smaller font by the browser.
Generally, it is used to display mathematical expressions.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> 2 <sup> 4 </sup> = 16 </p>
</body>
</html>
To learn more about the text formatting, visit its documentation.
