HTML Course 4.3 Emphasis and highlighting (strong, em, b, i)

HTML Emphasis and Highlighting

This section explores four inline elements used to emphasize or highlight text in HTML: <em>, <strong>, <i>, and <b>. We will examine their semantic meanings, default rendering, accessibility impact, and provide detailed examples.

1. The <em> Element

The <em> element represents stressed emphasis. Screen readers commonly adjust voice inflection when encountering this tag.

• Semantic Role: Indicate subtle emphasis or stress.
• Default Styling: Italic.
• Accessibility: Announced with emphasis in assistive technologies.

  Please do not touch the equipment while it is running.

2. The <strong> Element

The <strong> element conveys strong importance. Screen readers often use a stronger tone or announce it as important.

• Semantic Role: Highlight importance or urgency.
• Default Styling: Bold.
• Accessibility: Announced as important; may use ARIA live regions.

  Warning: Always backup your files before updating the system.

3. The <i> Element

The <i> element represents a span of text in an alternate voice or mood, such as technical terms, foreign words, or thoughts. It is largely presentational but carries a slight semantic hint.

• Semantic Role: Denote a different quality of text (e.g., foreign terms).
• Default Styling: Italic.
• Accessibility: Treated as normal text by many screen readers.

  The term déjà vu originates from French and means 'already seen.'

4. The <b> Element

The <b> element represents a span of text offset from the normal prose without conveying extra importance. It is purely stylistic.

• Semantic Role: Highlight key words (e.g., product names).
• Default Styling: Bold.
• Accessibility: Generally silent to assistive technologies.

  Our new model ZX-3000 features a high-resolution display.

5. Semantic vs Presentational

6. Nesting and Combination

These elements can be nested to combine emphasis levels. The following example shows nested emphasis and importance:

  Please read the manual carefully before operating the device.

7. Accessibility Considerations

• Use <em> and <strong> for true emphasis or importance to aid screen-reader users.
• Avoid using <b> and <i> solely for styling; prefer semantic tags first.
• ARIA roles (e.g., role='alert') can supplement <strong> for live updates.

8. Common Use Cases

• Technical documentation: <code>, <em> for variable names.
• Legal notices: <strong> to highlight critical clauses.
• Product pages: <b> for product names, <i> for model numbers.
• Multilingual text: <i> for foreign phrases.

9. Key Takeaways

• Use <em> and <strong> to convey meaning, not just styling.
• Prefer semantic elements for accessibility and SEO benefits.
• <i> and <b> remain available for presentational needs.