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
<b> (Bold)
- Makes text bold, but not emphasized.
- Use case: For styling purposes only.
<p>This is a <b>bold</b> text.</p>
<strong> (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 <strong> instead of <b> for better accessibility!
2. Italics and Emphasis
<i> (Italic)
- Displays text in italics, but does not emphasize.
- Use case: foreign words, technical terms.
<p>This is an <i>italic</i> text.</p>
<em> (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 <em> instead of <i> for better accessibility!
3. Underline and Strikethrough
<u> (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
<sup> (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><sub> (subscript)
- Moves text below the baseline.
- Use case: chemical formulas, footnotes.
<p>Chemistry formula: CO<sub>2</sub></p>
5. Marked and Highlighted Text
<mark> (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> (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
Leave Comment