HTML Text Formatting

🔠 HTML Text Formatting Tags

HTML provides several tags to format text on your webpages. Here's a breakdown of some essential text formatting elements:

💪 <b> and <strong>

• <b>: The <b> tag makes text bold but without any added importance.

  Example:

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

• <strong>: The <strong> tag also makes text bold, but it indicates that the text has strong importance or emphasis.

  Example:

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

🤔 <i> and <em>

• <i>: The <i> tag makes text italic. It is often used for things like technical terms, foreign words, or product names.

  Example:

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

• <em>: The <em> tag also makes text italic, but it emphasizes the meaning of the text, making it semantically more important.

  Example:

  <em>This is emphasized italic text.</em>

✍️ <u>

• <u>: The <u> tag underlines text. It’s commonly used for hyperlinks or to indicate a special meaning.

  Example:

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

✨ <mark>

• <mark>: The <mark> tag highlights text. This is usually used to mark important parts of the text or search results.

  Example:

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

🔍 <small>

• <small>: The <small> tag makes the text smaller, often used for footnotes or less important information.

  Example:

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

🚫 <del> and ✔️ <ins>

• <del>: The <del> tag strikes through text, typically indicating deleted or obsolete content.

  Example:

  <del>This text has been deleted.</del>

• <ins>: The <ins> tag underlines text, typically used to show inserted or updated content.

  Example:

  <ins>This text has been inserted.</ins>

🔢 <sup> and <sub>

• <sup>: The <sup> tag is used for superscript text, often used for exponents or footnotes.

  Example:

  2<sup>3</sup> = 8

• <sub>: The <sub> tag is used for subscript text, often used for chemical formulas or mathematical equations.

  Example:

  H<sub>2</sub>O

🧪 Try Yourself

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

✅ Conclusion

These are some of the most commonly used HTML tags for formatting text. You can combine them to style your content in many different ways, whether it's for emphasis, importance, or just for visual appeal.

📚 Resources