Text formatting tags in HTML are used to style and structure text on a web page, providing ways to emphasize, highlight, or organize content. These tags help convey meaning and improve readability by altering the appearance of text through bolding, italicizing, underlining, and more. Below is an overview of some of the most commonly used text formatting tags in HTML:

Common Text Formatting Tags

1. <b> (Bold Text)

   • Description: The <b> tag is used to make text bold. This tag typically indicates that the text is stylistically different from normal text, but it doesn't carry any extra importance or emphasis.
   • Usage: To highlight words or phrases visually.
   • Example:

     <p>This is <b>bold</b> text.</p>
     

2. <strong> (Strong Emphasis)

   • Description: The <strong> tag is used to emphasize text with strong importance. By default, browsers display the content in bold, but this tag also conveys meaning to assistive technologies, indicating that the content is of high importance.
   • Usage: To emphasize critical or important text.
   • Example:

     <p>This is <strong>very important</strong> text.</p>
     

3. <i> (Italic Text)

   • Description: The <i> tag is used to italicize text. It is often used for stylistic purposes, such as marking up book titles, foreign words, or technical terms.
   • Usage: For text that should be presented differently for emphasis, such as a book title or a foreign word.
   • Example:

     <p>This is <i>italic</i> text.</p>
     

4. <em> (Emphasis)

   • Description: The <em> tag is used to emphasize text with a stress emphasis. By default, it renders text in italics, but it also provides meaning to assistive technologies by indicating that the text is emphasized.
   • Usage: To emphasize a word or phrase within a sentence.
   • Example:

     <p>This is <em>important</em> information.</p>
     

5. <u> (Underline Text)

   • Description: The <u> tag is used to underline text. While it can be used for stylistic purposes, underlining text is often reserved for hyperlinks to avoid confusion.
   • Usage: To underline text that is not a hyperlink, such as headings or special terms.
   • Example:

     <p>This is <u>underlined</u> text.</p>
     

6. <mark> (Highlighted Text)

   • Description: The <mark> tag is used to highlight text. The text inside <mark> is usually rendered with a yellow background by default, making it stand out.
   • Usage: To highlight important information or keywords.
   • Example:

     <p>This is <mark>highlighted</mark> text.</p>
     

7. <small> (Smaller Text)

   • Description: The <small> tag is used to decrease the font size of text, typically to indicate fine print or legal disclaimers.
   • Usage: For footnotes, disclaimers, or secondary information.
   • Example:

     <p>This is <small>small</small> text.</p>
     

8. <del> (Deleted Text)

   • Description: The <del> tag is used to represent text that has been deleted or marked as incorrect. The text inside this tag is usually displayed with a strikethrough.
   • Usage: To show text that has been removed or replaced.
   • Example:

     <p>This is <del>deleted</del> text.</p>
     

9. <ins> (Inserted Text)

   • Description: The <ins> tag is used to represent text that has been added or inserted into a document. It is often displayed with an underline.
   • Usage: To highlight newly added content.
   • Example:

     <p>This is <ins>inserted</ins> text.</p>
     

10. <sup> (Superscript Text)

    • Description: The <sup> tag is used to display text as superscript, which is text that appears slightly above the normal line of text. This is commonly used for footnotes, ordinal numbers, and mathematical exponents.
    • Usage: For footnotes, references, or mathematical equations.
    • Example:

      <p>This is an example of superscript: x<sup>2</sup>.</p>
      

11. <sub> (Subscript Text)

    • Description: The <sub> tag is used to display text as subscript, which is text that appears slightly below the normal line of text. This is commonly used in chemical formulas and mathematical notation.
    • Usage: For chemical formulas or mathematical indices.
    • Example:

      <p>This is an example of subscript: H<sub>2</sub>O.</p>
      

12. <code> (Code Text)

    • Description: The <code> tag is used to display a piece of code or a snippet of programming. It renders text in a monospaced font, making it easier to read in the context of code.
    • Usage: For inline code snippets or references to code elements.
    • Example:

      <p>To print "Hello, World!" in Python, use <code>print("Hello, World!")</code>.</p>
      

13. <pre> (Preformatted Text)

    • Description: The <pre> tag preserves whitespace and line breaks in the text, displaying it exactly as it is written in the HTML code. It is typically used for displaying code blocks or text that requires specific formatting.
    • Usage: For code blocks, ASCII art, or any text where whitespace should be preserved.
    • Example:

      <pre>
      Line 1
      Line 2
          Line 3 (indented)
      </pre>
      

14. <blockquote> (Block Quotation)

    • Description: The <blockquote> tag is used for quoting a large section of text from another source. The text inside this tag is typically indented from the rest of the text on the page.
    • Usage: For long quotes or citations from other sources.
    • Example:

      <blockquote>
          "The only limit to our realization of tomorrow is our doubts of today."
          — Franklin D. Roosevelt
      </blockquote>
      

15. <abbr> (Abbreviation)

    • Description: The <abbr> tag is used to represent an abbreviation or acronym. It often includes a title attribute to provide the full expansion of the abbreviation when the user hovers over it.
    • Usage: For abbreviations that may need further clarification.
    • Example:

      <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>