DEV Community

Cover image for Formatting Text: Bold, Italic, Underline, and More
Deepak Kumar
Deepak Kumar

Posted on • Originally published at thecampuscoders.com

Formatting Text: Bold, Italic, Underline, and More

Introduction

Text formatting plays a crucial role in emphasizing important information, improving readability, and guiding the reader's attention across your webpage.

In HTML, you have various tags specifically designed to format text without relying on CSS initially.

In this blog, we’ll explore how to make text bold, italic, underlined, and introduce other formatting tags realistically used in modern web development.


1. Why Formatting Matters in HTML

  • Emphasizes Key Points: Important phrases or actions stand out.
  • Enhances Readability: Well-formatted content is easier to scan.
  • Improves Accessibility: Screen readers can identify emphasized text when proper semantic tags are used.
  • Adds Semantic Meaning: Helps search engines understand the significance of content.

2. Common Text Formatting Tags in HTMLa

Tag Purpose Example Use Case
<b> Bold text (visual only) Highlight keywords
<strong> Important text (semantic bold) Emphasizing critical warnings
<i> Italic text (visual only) Styling foreign words
<em> Emphasized text (semantic italic) Emphasizing an important phrase
<u> Underlined text Denoting links or special text
<mark> Highlighted text Highlight search terms
<small> Smaller text size Fine print or disclaimers
<del> Deleted text (strikethrough) Show old price in pricing tables
<ins> Inserted text (underlined) Track changes or edits
<sub> Subscript text Chemical formulas
<sup> Superscript text Footnotes, exponents

3. Detailed Breakdown: With Syntax and Example

3.1 Bold Text

Syntax using <b>:

<p>This is a <b>bold</b> word in a sentence.</p>
Enter fullscreen mode Exit fullscreen mode
  • Purely visual. No semantic importance.

Syntax using <strong>:

<p>This is a <strong>very important</strong> announcement.</p>
Enter fullscreen mode Exit fullscreen mode
  • Has semantic meaning: Screen readers announce this more strongly.

3.2 Italic Text

Syntax using <i>:

<p>He said it was a <i>fait accompli</i>.</p>
Enter fullscreen mode Exit fullscreen mode
  • Pure styling, usually for foreign words or phrases.

Syntax using <em>:

<p>You <em>must</em> complete the project on time.</p>
Enter fullscreen mode Exit fullscreen mode
  • Has semantic meaning: Emphasis on "must".

🔗 👉 Click here to read the full Blog on TheCampusCoders

Top comments (1)

Collapse
 
willy_david profile image
Willy David

Formatting text using bold, italic, and underline might seem simple, but it's a powerful way to enhance clarity and emphasis in any document or online content. Proper formatting helps guide the reader's attention, highlight key points, and improve overall readability.
If anyone want to know about Freecine mod visit here