✨ HTML Text Formatting – Add Meaning and Emphasis to Your Content
Welcome to GoNimbus! In this section, you’ll learn how to format text in HTML to highlight important content, add emphasis, show corrections, and more.
HTML offers a wide range of text formatting elements that help you create rich, readable, and accessible content.
🛠️ What Is Text Formatting in HTML?
Text formatting tags are used to:
- Bold or italicize text
- Emphasize or highlight important content
- Show inserted, deleted, subscript, or superscript text
- Add meaning or style to specific parts of your document
These tags are semantic in nature—meaning they also help screen readers and search engines understand the structure and purpose of your content.
🔡 Basic Formatting Tags
🅱️ <b> – Bold Text
Used to make text bold without indicating importance.
<p>This is a <b>bold</b> word.</p>
🔷 <strong> – Important Text
Used for important content. Visually similar to <b>, but also conveys importance to assistive technologies like screen readers.
<p>This is <strong>very important</strong> to note.</p>
*️⃣ <i> – Italic Text
Used to display text in an alternate voice or style, like foreign words, technical terms, or thoughts.
<p><i>C'est la vie</i> means "That's life."</p>
🔊 <em> – Emphasized Text
Adds emphasis, both visually (italic) and semantically (verbal stress for screen readers).
<p>Please <em>do not forget</em> your password!</p>
📐 More Formatting Tags
🔸 <small> – Smaller Text
Displays text in a smaller font, often used for footnotes or secondary information.
<p>This is a <small>fine print</small> notice.</p>
🟨 <mark> – Highlighted/Marked Text
Highlights or draws attention to text—just like using a highlighter pen.
<p>Don’t forget to buy <mark>groceries</mark> today!</p>
❌ <del> – Deleted Text
Represents content that has been removed or replaced. Browsers usually strike a line through it.
<p>Our old price was <del>$50</del> now only $30!</p>
➕ <ins> – Inserted Text
Represents new or added text. Browsers typically underline it.
<p>Your new balance is <ins>$100</ins>.</p>
🧪 Scientific Formatting
🧬 <sub> – Subscript Text
Used for subscript, where the text is displayed slightly below the normal line. Ideal for chemical formulas or mathematical expressions.
<p>Water formula is H<sub>2</sub>O.</p>
📈 <sup> – Superscript Text
Used for superscript, where text appears above the normal line. Useful for footnotes or exponents.
<p>5<sup>2</sup> = 25</p>
<p>Visit us at GoNimbus<sup>TM</sup></p>
💡 Pro Tips from GoNimbus
✅ Use <strong> and <em> when meaning matters (e.g., for accessibility and SEO).
✅ Use <b> and <i> when style matters but meaning doesn’t change.
✅ Combine formatting tags with CSS for even more control over your layout.
✅ Avoid overusing formatting tags—use them meaningfully for clarity and impact.
📘 Summary – Know Your Tags
| Tag | Purpose |
|---|---|
<b> | Bold (visual) |
<strong> | Important (semantic + visual) |
<i> | Italic (visual tone/style) |
<em> | Emphasis (semantic + visual) |
<small> | Smaller text |
<mark> | Highlighted/marked text |
<del> | Deleted (strikethrough) text |
<ins> | Inserted (underlined) text |
<sub> | Subscript text |
<sup> | Superscript text |