Formatting Elements in HTML

HTML (HyperText Markup Language) provides a set of formatting elements that allow developers to structure and style text content efficiently. These elements help improve the readability and visual appeal of web pages.

Bold and Strong Text

<b>: Displays text in bold but does not convey any extra importance.
<strong>: Displays text in bold and indicates that the content is of strong importance.
Example:

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

Italic and Emphasized Text

<i>: Renders text in italics for stylistic purposes.
<em>: Renders text in italics and emphasizes its importance.
Example:

<p>This is <i>italicized</i> text.</p>
<p>This is <em>emphasized</em> text.</p>
            
This is italicized text.
This is emphasized text.
            

Underlined and Strikethrough Text

<u>: Underlines the text, typically used for stylistic reasons.
<s>: Strikes through text to indicate that it is no longer relevant.
Example:

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

Marked and Highlighted Text

<mark>: Highlights text with a yellow background.
Example:

<p>This is a <mark>highlighted</mark> word.</p>
            

This is a highlighted word.

Subscript and Superscript Text

<sub>: Lowers text to the baseline, often used for chemical formulas.
<sup>: Raises text above the baseline, commonly used for exponents.
Example:

<p>H<sub>2</sub>O (Water)</p>
<p>3<sup>2</sup> = 9</p>
            
H2O (Water)
32 = 9
            

Abbreviation

<abbr>: Defines an abbreviation or acronym, providing a tooltip with its full meaning.
Example:

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

The WHO was founded in 1948.

Blockquote, Quote, and Citation

<blockquote>: Defines a block-level quotation.
<q>: Represents inline short quotations.
<cite>: Represents the source of a citation.
Example:

 <blockquote>
            "The only way to do great work is to love what you do." – Steve Jobs
</blockquote>
<p><cite>Steve Jobs</cite></p>
<p>He said, <q>Success is not final, failure is not fatal.</q></p>
            
"The only way to do great work is to love what you do." – Steve Jobs

Steve Jobs

He said, Success is not final, failure is not fatal.

Address

<address>: Provides contact information, typically displayed in italics followed by line break at the start and the end.
Example:

<address>
    123 Web Street, HTML City, CodeLand 45678
</address>
            
        
123 Web Street, HTML City, CodeLand 45678

Bi-Directional Override

<bdo>: Overrides the default text direction, useful for multilingual content.
Example:

<p>Normal text: Hello World</p>
<p>Reversed text: <bdo dir="rtl">Hello World</bdo></p>
            

Normal text: Hello World

Reversed text: Hello World

Conclusion

HTML formatting elements help structure text content for better presentation and readability. By using these elements effectively, developers can enhance the user experience and improve content accessibility on web pages.