Formatting Tags in HTML: How to Format Text for Better Readability

When creating web content, text formatting enhances readability and visual appeal. HTML provides multiple tags to style text—bold, italic, underlined, and more—without needing CSS.

In this guide, you’ll learn:
✔ Essential HTML text formatting tags
✔ How to apply them correctly
✔ When to use semantic vs. presentational tags
✔ Best practices for text styling

1. Basic Text Formatting Tags

1. Bold Text: <b> vs. <strong>

TagPurposeExample
<b>Visual bold (no semantic importance)<b>Important Note</b>
<strong>Semantic importance (SEO-friendly)<strong>Warning!</strong>

Best Practice:

  • Use <strong> for key phrases (better for accessibility & SEO).

  • Use <b> only for styling without meaning.

2. Italic Text: <i> vs. <em>

TagPurposeExample
<i>Visual italic (e.g., technical terms)<i>Homo sapiens</i>
<em>Emphasized text (semantic stress)<em>Do not skip this step.</em>

Best Practice:

  • Use <em> for emphasis in sentences.

  • Use <i> for foreign words or icons (e.g., <i class="fa fa-user"></i>).

3. Underlined Text: <u>

  • Rarely used (can confuse users—underlined text often indicates links).

  • Example:

				
					<u>Misspelled word</u>

4. Strikethrough Text: <s> vs. <del>

TagPurpose
<s>No longer relevant (e.g., old price: ~~$99~~)
<del>Deleted text (shows edits in documents)

Example:

				
					<s>Was $99</s> Now $59  
<del>Old paragraph</del> <ins>New text</ins>

2. Advanced Formatting Tags

1. Highlight Text: <mark>

  • Highlights text in yellow (like a marker pen).

  • Example:

				
					<mark>Search keywords</mark> appear highlighted.

2. Superscript & Subscript: <sup>, <sub>

  • <sup> → E = mc<sup>2</sup>

  • <sub> → H<sub>2</sub>O

3. Code & Keyboard Input: <code>, <kbd>

  • <code> → Inline code: <code>print("Hello")</code>

  • <kbd> → Keyboard keys: Press <kbd>Ctrl</kbd> + <kbd>C</kbd>`

4. Preformatted Text: <pre>

  • Preserves spaces and line breaks (for code blocks).

  • Example:

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

3. Semantic vs. Presentational Tags

Semantic Tags (Better for SEO & Accessibility)

TagPurpose
<strong>Important text
<em>Emphasized text
<blockquote>Long quotations

Presentational Tags (Use Sparingly)

TagPurpose
<b>Bold (no meaning)
<i>Italic (no meaning)
<u>Underline (avoid)

Best Practice:
✅ Prefer semantic tags for better SEO.
✅ Use CSS for advanced styling (e.g., colors, fonts).

4. Common Mistakes to Avoid

❌ Overusing <b>/<i> (use <strong>/<em> instead).
❌ Underlining non-links (confuses users).
❌ Nesting tags incorrectly (e.g., <strong><em>Text</strong></em>).

5. Practical Examples

Formatted Article Snippet

				
					<p>
  <strong>HTML formatting</strong> is <em>essential</em> for readability.  
  Use <code><mark><strong></mark></code> for key points, and  
  <kbd>Ctrl</kbd>+<kbd>B</kbd> to bold text in editors.
</p>

Output:

HTML formatting is essential for readability. Use <strong> for key points, and Ctrl+B to bold text in editors.

Final Thoughts

HTML formatting tags help structure and emphasize text, but:
✅ Use semantic tags (<strong>, <em>) for SEO.
✅ Combine with CSS for advanced styling.
✅ Keep accessibility in mind (screen readers rely on proper tags).

Scroll to Top