HTML – FORMATTING
HTML – Formatting
HTML formatting refers to how we style or emphasize text and content within an HTML document. HTML provides several tags for basic formatting, such as making text bold, italic, underlined, or superscript. These tags help structure and display content in a visually appealing way.
Yes, in HTML and XHTML, there are several tags available to control the appearance of text, much like the bold, italic, or underlined options you would find in a word processor. Below is a list of ten common text formatting options in HTML and XHTML, which can be used to modify how text appears on a webpage:
| Tag | Description | Example | Rendered Output |
|---|---|---|---|
| <b> | Makes text bold.. | <b>Bold Text</b> | Bold Text |
| <strong> | Emphasizes strong importance; bold by default. | <strong>Important Text</strong> | Important Text. |
| <i> | Makes text italic. | <i>Italic Text</i> | Italic Text |
| <em> | Emphasizes text (italic by default). | <em>Emphasized Text</em> | Emphasized Text |
| <u> | Underlines text. | <u>Underlined Text</u> | Underlined Text |
| <mark> | Highlights text. | <mark<Highlighted Text</mark> | Highlighted Text |
| <small> | Makes text smaller than surrounding text. | <small>Smaller Text</small> | Smaller Text |
| <del> | Strikes out text (used for deletions). | <del>Deleted Text</del> | |
| <ins> | Underlines inserted text (used for additions). | <ins>Inserted Text</ins> | Inserted Text |
| <sub> | Displays text as subscript. | H<sub>2</sub>O | H2O |
| <sup> | Displays text as superscript. | E = mc<sup>2</sup> | E = mc2 |
| <code> | Displays text in monospace font (used for code snippets). | <code>print("Hello")</code> | print("Hello") |
| <pre> | Preserves whitespace and line breaks (preformatted text). | <pre> Line 1 Line 2 </pre> | Line 1 Line 2 |
| <q> | Displays short inline quotations. | <q> Quote here</q> | Quote here |
| <blockquote> | Displays long block quotations. | <blockquote>This is a long quote.</blockquote> | This is a long quote. |
| <abbr> | Displays long block quotations. | <blockquote>This is a long quote.</blockquote>> | This is a long quote. |
| <cite> | Marks a title or reference to a work. | <cite>Web Development Basics</cite> | Web Development Basics |
| <bdo> | Overrides text direction. | <bdo dir="rtl">Text</bdo> | Text |
1. Bold Text (<b> and <strong>)
* <b>: This tag is used to make text bold, but it doesn't indicate importance. It's mainly used for visual styling.
* <strong>: This tag also makes text bold, but it indicates that the text is of strong importance, adding semantic meaning to the content.
Example
<b>This is bold text.</b>
<strong> This is bold and important text.</strong>
This will produce the following result:
2. Italicized Text (<i> and <em>)
* <i>: Used for italicizing text without emphasizing its meaning.
* <em*gt;: Used to emphasize text, usually displayed in italics, and it has semantic meaning, suggesting that the text should be stressed in pronunciation
Example
<i>This is italicized text.</i>
<em>This is emphasized and italicized text.</em>
This will produce the following result:
3. Underlined Text
*Tag: <u>
Purpose: Underlines text.
Example
<p>This is <u>underlined </u> text. </p>
This will produce the following result:
4. Strikethrough Text
Tag: <del> or <s>
Purpose: Crosses out text to indicate deletion or irrelevance.
Example
<p>This is <del> removed </del> text.</p>
<p> This is <s> irrelevant</s> text. </p>
This will produce the following result:
5. Highlighted Text
Tag: <mark>
Purpose: Highlights text for emphasis.
Example
<p>This is <mark> important </mark> text.</p>
This will produce the following result:
E6. Subscript Text
Tag: <sub>
Purpose: Displays text as subscript (e.g., chemical formulas).
Example
<p>Water is represented as H<sub>2</sub>O.</p>
This will produce the following result:
/>
7. Superscript Text
Tag: <sup>
Purpose: Displays text as superscript (e.g., mathematical notations).
Example
<p>Einstein's equation is E = mc<sup>2</sup>.</p>
This will produce the following result:
8. Smaller Text
Tag: <small>
Purpose: Reduces the size of the text.
Example
<p> This is <small> smaller </small> text.</p>
This will produce the following result:
9. Quoted Text
Tag: <q> (inline) or <blockquote> (block-level).
Purpose: Displays text as a quotation.
Example
<p>He said, <q>HTML is awesome</q>.</p>
<blockquote>This is a block-level quotation.</blockquote>
This will produce the following result:
10. Monospace (Code) Text
Tag: <code>
Purpose: Displays text in a monospace font (used for code snippets).
Example
<p>To print "Hello, World!" in Python, use <code>print("Hello, World!")</code>.</p>
This will produce the following result:
