Explain the HTML Formatting tags

HTML formatting tags help you define the appearance and styling of text within a webpage. These tags affect the way text is displayed, but do not add semantic meaning.

1. Bold and Strong Text

 (Bold)

Makes text bold, but not emphasized.
Use case: For styling purposes only.

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

 (Strong Importance)

Makes text bold and conveys importance (semantic meaning).
Use case: When the content is critical or important.

<p>This is a <strong>very important</strong> notice.</p>

Note:

Use  instead of  for better accessibility!

2. Italics and Emphasis

 (Italic)

Displays text in italics, but does not emphasize.
Use case: foreign words, technical terms.

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

 (Emphasized Text)

Displays italic text and provides emphasis.
Use case: Highlighting words for meaning.

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

Note: Use  instead of  for better accessibility!

3. Underline and Strikethrough

 (Underline)

Underlines text, but does not add semantic meaning.
Use case: Pointing out misspelled words.

<p>This is an <u>underlined</u> word.</p>

<s> (Strikethrough / Deleted Text)

Displays text with a strikethrough, indicating incorrect or out-of-date content.

<p>This price is <s>$100</s> now only $80!</p>

<del> (Deleted Text)

Similar to <s>, but denotes a deletion.

<p>Old version: <del>Outdated text</del></p>

Note: Use <del> instead of <s> for meaningful changes.

4. Superscript and Subscript

 (superscript)

Raises text above the baseline.
Use case: mathematical exponents, footnotes.

<p>Water formula: H<sub>2</sub>O</p>
<p>Math equation: x<sup>2</sup> + y<sup>2</sup></p>

 (subscript)

Moves text below the baseline.
Use case: chemical formulas, footnotes.

<p>Chemistry formula: CO<sub>2</sub></p>

5. Marked and Highlighted Text

 (highlighted text)

Highlights text with a yellow background.
Use case: Important information.

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

Styling can be done using CSS:

mark { background-color: lightblue; }

6. Small and Monospace Text

 (small text)

Displays text in a smaller size.

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

<code> (Monospace Code)

Displays programming code in monospace font.

<p>Inline code: <code>console.log("Hello World");</code></p>

Use <pre> tag for multiple-line code blocks.

<pre>
function hello() {
   console.log("Hello World");
}
</pre>

7. Quote and Citation Tags

<blockquote> (Block Quote)

Used for long quotes.
Use case: Citing references.

<blockquote>
   "The only way to do great work is to love what you do." - Steve Jobs
</blockquote>

<q> (Inline Quote)

Used for short quotes.

<p>Steve Jobs once said, <q>Stay hungry, stay foolish.</q></p>

<cite> (Citation)

Defines the title of a creative work.

<p>The book <cite>Harry Potter</cite> is amazing.</p>

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML Formatting Tags</title>
</head>
<body>
   <h2>Text Formatting Example</h2>
   <p><b>Bold text</b> vs. <strong>Strong text</strong></p>
   <p><i>Italic text</i> vs. <em>Emphasized text</em></p>
   <p><u>Underlined text</u> and <s>Strikethrough text</s></p>
   <p>H<sub>2</sub>O and E=mc<sup>2</sup></p>
   <p>This is a <mark>highlighted</mark> text.</p>
   <h2>Code Example</h2>
   <pre>
 function hello() {
     console.log("Hello, World!");
 }
   </pre>
   <h2>Quotes</h2>
   <blockquote>
       "Success is not final, failure is not fatal: it is the courage to continue that counts."
   </blockquote>
   <p>As Churchill said, <q>Never give up!</q></p>
</body>
</html>

Also, read: HTML Graphics tags: map tag, picture tag, and figure tag

articles

Explain the HTML Formatting tags

Leave a Comment