A number of html elements are designed to format textual content, such as bold, italic, etc. Consider these elements:
- <b>: makes text bold
- <del>: cross out the text
- <i>: make text italic
- <em>: makes the text italic, unlike the tag, it <i>has a boolean meaning, gives the highlighted text a shade of importance
- <s>: strike out the text
- <small>: makes the text slightly smaller than the surrounding
- <strong>: Make text bold. Unlike a tag, it is <b>intended for logical highlighting to show the importance of the text. And it <b>does not have the character of a logical selection, it performs the functions of only formatting
- <sub>: Places text below the line
- <sup>: Places text above the line
- <u>: underlines text
- <ins>: defines inserted (or appended) text
- <mark>: Highlights text with color, giving it a touch of importance
Let’s apply all these elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text formatting In HTML5</title>
</head>
<body>
<p>Text formatting in <mark>HTML5</mark></p>
<p>It is <b>dedicated</b> text</p>
<p>It is <strong>important</strong> text</p>
<p>It <del>crossed out</del> text</p>
<p>It <s>not valid</s> text</p>
<p>It is <em>important</em> text</p>
<p>It is <i>in italics</i> </p>
<p>It is<ins>added</ins> text</p>
<p>It <u>underlined</u> text</p>
<p>X<sub>i</sub> = Y<sup><small>2</small></sup> + Z<sup><small>2</small></sup></p>
</body>
</html>