Inline Text Styles & Formatting
What is Inline Formatting?
Imagine highlighting a text book. You don't highlight the whole page; you only bold specific key terms, italicize book titles, or use a yellow highlighter to mark a quote.In HTML, Inline Formatting Tags let you style and emphasize specific words *inside* a paragraph without breaking them onto a new line:
<strong>: Makes text bold, indicating it has strong importance.<em>: Makes text italic, indicating emphasis.<mark>: Highlights text with a background color (like a highlighter pen).<sub> and <sup>: Renders text as subscript (lowered, like H₂O) or superscript (raised, like x²).Why does it matter?
Inline formatting helps guide the reader's eye to the most important words. It also helps screen readers: when they encounter<strong> or <em>, they read those words with a different tone of voice to express importance.
How to write it
Wrap the specific words you want to format in their opening and closing tags, inside your paragraph:<p>Baking cakes is <strong>very</strong> easy!</p>
Bold Tag
Italics Tag
Highlighted
Normalsubsup
Common Mistakes
<strong> and <em> when the words are actually important. If you just want to make text bold or italic for style, use CSS properties.<p><strong>text</strong></p> is correct; <p><strong>text</p></strong> is broken).Quick Reference
<strong> — Bolds text (importance).<em> — Italicizes text (emphasis).<mark> — Highlights text.<sub> — Subscript.<sup> — Superscript.Your Task
Inside the paragraph:
1. Wrap the word 'very' with `<strong>` tags.
2. Wrap 'easy' with `<em>` tags.
index.html
Type code above to start the lesson.
Live Preview