HTML Formatting Elements
Formatting elements were designed to display special types of text:
- <b> - Bold text
- <strong> - Important text
- <i> - Italic text
- <em> - Emphasized text
- <mark> - Marked text
- <small> - Smaller text
- <del> - Deleted text
- <ins> - Inserted text
- <sub> - Subscript text
- <sup> - Superscript text
1) <b> - Bold text
The HTML 'b' element, also known as the bold element, is used to apply bold formatting to text. When you wrap text with the 'b' tag, the text will be displayed in a bold font weight, which makes it stand out more prominently.
Here's an example of how to use the 'b' tag:
<p>This is some <b>bold text</b> in a paragraph.</p>
In the example above, the phrase "bold text" will be displayed in bold font weight, while the rest of the text in the paragraph will be displayed normally.
It's important to note that the 'b' element is a presentational element, meaning it's used to control the appearance of text on a webpage. In modern HTML, it's generally recommended to use CSS to style text rather than presentational elements like 'b'. This is because CSS provides more precise control over the appearance of text and allows you to separate presentation from content.
2) <strong> - Important text
The HTML 'strong' element is used to indicate that text is of strong importance or emphasis. It's similar to the 'b' element in that it's used to apply bold formatting to text, but it has a semantic meaning that goes beyond just visual styling.
When you wrap text with the 'strong' tag, the text will be displayed in bold font weight, just like the 'b' tag. However, the 'strong' tag has a more meaningful purpose, indicating that the text is of strong importance or emphasis.
Here's an example of how to use the 'strong' tag:
<p>This is <strong>important</strong> text in a paragraph.</p>
In the example above, the word "important" will be displayed in bold font weight, indicating that it's of strong importance or emphasis.
It's worth noting that the 'strong' element is a semantic element, meaning it has a meaningful purpose beyond just controlling the appearance of text on a webpage. Using semantic elements like 'strong' can improve the accessibility and SEO (search engine optimization) of your webpage by providing more meaningful information to assistive technologies and search engines.
3) <i> - Italic text
The HTML 'i' element, also known as the italic element, is used to apply italic formatting to text. When you wrap text with the 'i' tag, the text will be displayed in an italic font style, which can help to emphasize it or set it apart from other text.
Here's an example of how to use the 'i' tag:
<p>This is some <i>italic text</i> in a paragraph.</p>
In the example above, the phrase "italic text" will be displayed in an italic font style, while the rest of the text in the paragraph will be displayed normally.
It's important to note that the 'i' element is a presentational element, meaning it's used to control the appearance of text on a webpage. In modern HTML, it's generally recommended to use CSS to style text rather than presentational elements like 'i'. This is because CSS provides more precise control over the appearance of text and allows you to separate presentation from content.
4) <em> - Emphasized text
The HTML 'em' element, short for emphasis, is used to indicate emphasis or importance of text. It typically renders as italic text, but its actual rendering is left up to the browser and may vary depending on the CSS styling applied to the page.
When you wrap text with the 'em' tag, the text will be displayed in a way that conveys emphasis or importance to the reader, helping to draw their attention to the key points you want to make.
Here's an example of how to use the 'em' tag:
<p>This is an <em>important</em> message.</p>
In the example above, the word "important" will be displayed in a way that conveys emphasis, helping to draw the reader's attention to the fact that the message is important.
It's worth noting that the 'em' element is a semantic element, meaning it has a meaningful purpose beyond just controlling the appearance of text on a webpage. Using semantic elements like 'em' can improve the accessibility and SEO (search engine optimization) of your webpage by providing more meaningful information to assistive technologies and search engines.
5) <mark> - Marked text
The HTML 'mark' element is used to highlight or mark a section of text on a webpage. When you wrap text with the 'mark' tag, the text will be visually highlighted using a yellow background color, making it stand out from the rest of the text.
Here's an example of how to use the 'mark' tag:
<p>This is a <mark>highlighted</mark> section of text.</p>
In the example above, the word "highlighted" will be displayed with a yellow background color, indicating that it's been marked or highlighted.
The 'mark' element is a relatively new addition to HTML, having been introduced in HTML5. It's commonly used to indicate search results or to highlight important information on a webpage.
It's important to note that the 'mark' element is a presentational element, meaning it's used to control the appearance of text on a webpage. In modern HTML, it's generally recommended to use CSS to style text rather than presentational elements like 'mark'. This is because CSS provides more precise control over the appearance of text and allows you to separate presentation from content.
6) <small> - Smaller text
The HTML 'small' element is used to indicate that text is smaller in size and less important than surrounding text. When you wrap text with the 'small' tag, the text will be displayed in a smaller font size, making it appear less important or significant than the surrounding text.
Here's an example of how to use the 'small' tag:
<p>This is some <small>less important text</small> in a paragraph.</p>
In the example above, the phrase "less important text" will be displayed in a smaller font size than the rest of the text in the paragraph, indicating that it's less significant or important.
It's worth noting that the 'small' element is a semantic element, meaning it has a meaningful purpose beyond just controlling the appearance of text on a webpage. Using semantic elements like 'small' can improve the accessibility and SEO (search engine optimization) of your webpage by providing more meaningful information to assistive technologies and search engines.
However, it's important to use the 'small' element sparingly and only in cases where the text is truly less important or significant than surrounding text. Overuse of the 'small' element can make a webpage difficult to read and may have a negative impact on the user experience.
7) <del> - Deleted text
The HTML 'del' element is used to indicate that text has been deleted or removed from a document. When you wrap text with the 'del' tag, the text will be displayed with a strikethrough, indicating that it has been deleted or removed.
Here's an example of how to use the 'del' tag:
<p>This sentence contains some <del>deleted text</del>.</p>
In the example above, the phrase "deleted text" will be displayed with a strikethrough, indicating that it has been deleted from the sentence.
It's worth noting that the 'del' element is a semantic element, meaning it has a meaningful purpose beyond just controlling the appearance of text on a webpage. Using semantic elements like 'del' can improve the accessibility and SEO (search engine optimization) of your webpage by providing more meaningful information to assistive technologies and search engines.
In addition to its visual appearance, the 'del' element can also be used in combination with the 'cite' attribute to provide a citation for the source of the deleted text. For example:
<p>The original quote was: <del cite="https://example.com/quote">Lorem ipsum dolor sit amet.</del></p>
In the example above, the 'cite' attribute provides a URL for the original source of the deleted text, allowing readers to see the context in which it was originally used. This can be useful for providing transparency and context when quoting sources in a document.
8) <ins> - Inserted text
The HTML 'ins' element is used to indicate that text has been inserted or added to a document. When you wrap text with the 'ins' tag, the text will be displayed with an underline, indicating that it has been inserted or added to the document.
Here's an example of how to use the 'ins' tag:
<p>This sentence contains some <ins>inserted text</ins>.</p>
In the example above, the phrase "inserted text" will be displayed with an underline, indicating that it has been added to the sentence.
It's worth noting that the 'ins' element is a semantic element, meaning it has a meaningful purpose beyond just controlling the appearance of text on a webpage. Using semantic elements like 'ins' can improve the accessibility and SEO (search engine optimization) of your webpage by providing more meaningful information to assistive technologies and search engines.
In addition to its visual appearance, the 'ins' element can also be used in combination with the 'cite' attribute to provide a citation for the source of the inserted text. For example:
<p>The revised quote is: <ins cite="https://example.com/quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ins></p>
In the example above, the 'cite' attribute provides a URL for the source of the inserted text, allowing readers to see the context in which it was added. This can be useful for providing transparency and context when revising or updating documents.
9) <sub> - Subscript text
The HTML 'sub' element is used to indicate that text should be displayed as subscript, meaning it should be displayed below the baseline of the surrounding text. When you wrap text with the 'sub' tag, the text will be displayed in a smaller font size and lowered below the baseline, indicating that it's a subscript.
Here's an example of how to use the 'sub' tag:
<p>The chemical formula for water is H<sub>2</sub>O.</p>
In the example above, the "2" in the chemical formula for water is displayed as a subscript using the 'sub' tag.
It's worth noting that the 'sub' element is a semantic element, meaning it has a meaningful purpose beyond just controlling the appearance of text on a webpage. Using semantic elements like 'sub' can improve the accessibility and SEO (search engine optimization) of your webpage by providing more meaningful information to assistive technologies and search engines.
However, it's important to use the 'sub' element sparingly and only in cases where it's necessary to convey meaning. Overuse of the 'sub' element can make a webpage difficult to read and may have a negative impact on the user experience.
10) <sup> - Superscript text
The HTML 'sup' element is used to indicate that text should be displayed as superscript, meaning it should be displayed above the baseline of the surrounding text. When you wrap text with the 'sup' tag, the text will be displayed in a smaller font size and raised above the baseline, indicating that it's a superscript.
Here's an example of how to use the 'sup' tag:
<p>The boiling point of water is 100<sup>o</sup>C.</p>
In the example above, the symbol for degrees Celsius is displayed as a superscript using the 'sup' tag.
It's worth noting that the 'sup' element is a semantic element, meaning it has a meaningful purpose beyond just controlling the appearance of text on a webpage. Using semantic elements like 'sup' can improve the accessibility and SEO (search engine optimization) of your webpage by providing more meaningful information to assistive technologies and search engines.
However, it's important to use the 'sup' element sparingly and only in cases where it's necessary to convey meaning. Overuse of the 'sup' element can make a webpage difficult to read and may have a negative impact on the user experience.
