HTML formatting elements provide a way to enhance the visual appeal of your web pages. By using these formatting elements, you can make certain text stand out, indicate changes, or emphasize important information. In this article, we will explore some of the most commonly used HTML formatting elements and their respective functions.
<b> – Bold text
The <b> tag is used to make text bold. This formatting element is often used to highlight keywords, headings, or important pieces of information. The <b> tag does not add any semantic meaning to the text but is only used for visual formatting.
<strong> – Important text
Similar to <b>, the <strong> tag is used to make text bold. However, unlike <b>, <strong> is used to indicate that the text is important or critical to understanding the content. By using the <strong> tag, search engines and screen readers can recognize the importance of the text and convey it to the user.
<i> – Italic text
The <i> tag is used to make text italicized. This formatting element is often used to emphasize words or phrases that need to stand out from the rest of the text. Like the <b> tag, the <i> tag does not add any semantic meaning to the text.
<em> – Emphasized text
Similar to the <i> tag, the <em> tag is used to emphasize text. However, the <em> tag is used to indicate that the text has a higher level of importance or emphasis than other text in the document. Like the <strong> tag, search engines and screen readers can recognize the importance of the text and convey it to the user.
<mark> – Marked text
The <mark> tag is used to highlight or mark certain text within the document. This formatting element is often used to indicate changes, additions, or omissions in a document. The <mark> tag is especially useful in collaborative editing scenarios where multiple people are making changes to a document.
<small> – Smaller text
The <small> tag is used to make text smaller. This formatting element is often used to display fine print, legal disclaimers, or other text that is not as important as the rest of the content on the page.
<del> – Deleted text
The <del> tag is used to indicate that certain text has been deleted or removed from the document. This formatting element is often used to indicate changes or updates to a document.
<ins> – Inserted text
The <ins> tag is used to indicate that certain text has been added or inserted into the document. This formatting element is often used to indicate changes or updates to a document.
<sub> – Subscript text
The <sub> tag is used to create subscript text. This formatting element is often used to display mathematical or chemical formulas, as well as footnotes or references.
<sup> – Superscript text
The <sup> tag is used to create superscript text. This formatting element is often used to display mathematical or chemical formulas, as well as exponents or other notations.
HTML Formatting Elements Summary
HTML formatting elements provide a way to enhance the visual appeal and readability of your web pages. By using these formatting elements appropriately, you can make your content more accessible and easier to understand for your audience. Whether you need to highlight important text, emphasize certain words or phrases, or indicate changes to a document, there is an HTML formatting element that can help you achieve your goals.
The following HTML document demonstrates and explains the use of all of the mentioned HTML formatting elements:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <title>HTML Formatting Elements Example Document</title> </head> <body> <h1>HTML Formatting Elements Example Document</h1> <p> This is an example of using HTML formatting elements to make text stand out, indicate changes, or emphasize important information. <br><br> <b>Bold text:</b> This text is bold using the <b> tag. <br><br> <strong>Important text:</strong> This text is important and bold using the <strong> tag. <br><br> <i>Italic text:</i> This text is italicized using the <i> tag. <br><br> <em>Emphasized text:</em> This text is emphasized and italicized using the <em> tag. <br><br> <mark>Marked text:</mark> This text is marked using the <mark> tag. <br><br> <small>Smaller text:</small> This text is smaller using the <small> tag. <br><br> <del>Deleted text:</del> This text is deleted using the <del> tag. <br><br> <ins>Inserted text:</ins> This text is inserted using the <ins> tag. <br><br> H<sub>2</sub>O: This is an example of subscript text using the <sub> tag. <br><br> 2<sup>3</sup>: This is an example of superscript text using the <sup> tag. </p> </body> </html> |