Menu
Text & Formatting
<strong>, <em>, <b>, <i>
Bold and italic — semantic vs purely visual.
1Semantic vs Visual
<strong> means "important" (screen readers stress it), <em> means "stress emphasis". <b> and <i> are visual-only fallbacks — prefer the semantic ones.
Example Code
css
<p><strong>Warning:</strong> this is permanent.</p>
<p>This is <em>really</em> important.</p>
<p>The <b>HMS Beagle</b> set sail in 1831.</p>
<p>The Latin name is <i>Felis catus</i>.</p>2Put the element in context
Emphasis and importance convey meaning rather than only appearance. A browser’s default italic or bold style is presentation that you can change with CSS. Choose em for emphasis and strong for importance when those meanings fit the passage.
3Practice with a small page
Write a sentence where emphasizing different words changes its meaning. Mark the intended word with em, then create a separate important warning using strong. Remove visual styles and check that the markup still expresses the intended relationship.
Finished reading?
Mark this topic as complete to track progress.