HTML Text Formatting

In HTML, text formatting refers to the way in which you can use HTML tags to change the appearance of text on a webpage.

There are many different tags that can be used to format text, including:

• <b> : Renders text in bold.
• <i> : Renders text in italic.
• <u> : Renders text underlined.
• <strong> : Renders text in bold and gives it strong importance.
• <em> : Renders text in italic and gives it emphasis.
• <sup> : Renders text as superscript.
• <sub> : Renders text as subscript.
• <mark> : Renders text with a yellow background to highlight it.
• <del> : Renders text with a line through it to indicate that it has been deleted.
• <ins> : Renders text with an underline to indicate that it has been inserted.

<b> and <strong> Elements

The <b> element is used to render text in bold. It is an inline element, which means that it can be used within a block of text and will not cause a line break. To use the <b> element, you simply need to enclose the text that you want to appear in bold within opening and closing <b> tags.

Here is an example of how you can use the <b> element:

<p>This is a <b>bold</b> word.</p>

This will render the word "bold" in bold within the paragraph.

Here is an example of how you can use the <strong> element:

<p>This <strong>word</b> is bold.</p>

Note: While the <b> element can be used to bold text, it is generally recommended to use the <strong> element instead. The <strong> element indicates that the text has strong importance, and it is rendered in a similar way to the <b> element (i.e., as bold text).

Using the <strong> element conveys more semantic meaning to screen readers and other assistive technologies, whereas the <b> element is purely a presentational element.

<i> and <em> Elements

The <i> element represents a span of text that is set in an alternate, or offset, voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.

Here's an example of how you can use the <i> element:

<p>The word <i>ethereal</i> means extremely delicate and light in a way that seems too perfect for this world.</p>

In this example, the word "ethereal" is set in an alternate voice or mood, to indicate that it has a special meaning.

The <em> element represents stress emphasis of its contents. The <em> element is usually displayed in italicized text.

Here's an example of how you can use the <em> element:

<p>I <em>really</em> enjoyed the movie last night.</p>

In this example, the word "really" is emphasized, to indicate that it is an important part of the sentence.

Note that the <em> element is semantically similar to the <i> element, but with a different meaning. While the <i> element represents text that is set in an alternate, or offset, voice or mood, the <em> element represents stress emphasis.

<sup> and <sub> Elements

The <sup> element represents a superscript, which is text that is written slightly above the normal line of text.

The <sub> element represents a subscript, which is text that is written slightly below the normal line of text.

Superscripts and Subscripts are often used to indicate footnotes, or to write mathematical exponents.

Here's an example of how you can use the <sub> and <sup> elements in HTML:

<p>The chemical formula for water is H<sub>2</sub>O</p>

In this example, the "2" is written as a superscript, to indicate that it is an exponent in the chemical formula for water.

You can also use the <sup> element to create footnotes, like this:

<p>The earth orbits the sun at an average distance of about 93 million miles.<sup>1</sup></p>

<p><sup>1</sup> Source: NASA</p>

In this example, the superscript "1" is used to indicate that there is a footnote at the bottom of the page, which provides more information about the statement made in the paragraph.

<mark> Element

The <mark> element represents a run of text that is marked or highlighted for reference purposes, due to its relevance in another context.

Here's an example of how you can use the <mark> element:

<p>I have visited the following countries: <mark>Mexico</mark>, <mark>Japan</mark>, and <mark>Brazil</mark>.</p>

In this example, the <mark> element is used to highlight the names of the countries that the person has visited.

You can also use the <mark> element to highlight text that has been searched for or is otherwise relevant in the current context, like this:

<p>The quick brown fox jumps over the <mark>lazy</mark> dog.</p>

In this example, the word "lazy" is highlighted to indicate that it is relevant in the current context.

Note that the <mark> element should not be used to indicate that text is incorrect or to provide emphasis. Use the <em> element to indicate emphasis, and the <del> element to indicate that text has been deleted or is incorrect.

<del> Element

The <del> element represents a range of text that has been deleted from a document. The <del> element is usually rendered with a line through the text, to indicate that it has been deleted.

Here's an example of how you can use the <del> element in HTML:

<p>I have visited the following countries: <del>Mexico</del>, Japan, and Brazil.</p>

In this example, the <del> element is used to indicate that the person no longer considers Mexico to be a country they have visited.

You can also use the <del> element to indicate that text has been removed from a document, like this:

<p>The quick brown fox <del>jumps over the lazy dog</del>.</p>

In this example, the <del> element is used to indicate that the text "jumps over the lazy dog" has been removed from the document.

<ins> Element

The <ins> element represents a range of text that has been added to a document. The <ins> element is usually rendered with an underline, to indicate that it has been added.

Here's an example of how you can use the <ins> element:

<p>I have visited the following countries: <ins>Mexico</ins>, Japan, and Brazil.</p>

In this example, the <ins> element is used to indicate that the person has added Mexico to the list of countries they have visited.

You can also use the <ins> element to indicate that text has been added to a document, like this:

<p>The quick brown fox <ins>jumps over the lazy dog</ins>.</p>

In this example, the <ins> element is used to indicate that the text "jumps over the lazy dog" has been added to the document.

Note that the <ins> element should not be used to provide emphasis or to highlight text that is relevant in the current context. Use the <em> element to indicate emphasis, and the <mark> element to highlight text that is relevant in the current context.