`<p>`, `<strong>`, `<em>`, and a Handful of Friends
Paragraphs & Inline Formatting
Most page text lives in `<p>` paragraphs. A small set of inline tags — `<strong>`, `<em>`, `<code>`, `<mark>` — adds emphasis and meaning.
What you'll learn
- Wrap text in `<p>`
- Use semantic emphasis tags
- Choose `<b>`/`<i>` vs `<strong>`/`<em>`
A paragraph of body text goes in <p>. Inline emphasis and meaning
go in a small set of inline tags — and the semantic ones beat
their visual-only counterparts.
Paragraphs
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>The browser adds vertical spacing between paragraphs by default.
Don’t use <br><br> to fake paragraph breaks — use real <p>s.
Strong vs Bold
Both render bold by default. The difference is meaning.
| Tag | Meaning |
|---|---|
<strong> | This content has strong importance |
<b> | Just visually bold (no implied meaning) |
<p>Press <strong>Cmd-S</strong> to save.</p>
<p>The <b>FBI</b> investigates federal crimes.</p>Default to <strong> for actual emphasis. <b> is for “stylistic
bold” — like a name or a keyword that’s bold by convention without
being emphasized.
Emphasis vs Italics
| Tag | Meaning |
|---|---|
<em> | Emphasized — usually voiced louder |
<i> | Stylistic italics (foreign words, ship names) |
<p>Don't <em>ever</em> commit to main directly.</p>
<p>The Spanish word <i>amigo</i> means "friend".</p>Other Inline Tags Worth Knowing
| Tag | Use |
|---|---|
<code> | A snippet of inline code |
<kbd> | A keyboard key (<kbd>Cmd</kbd>+<kbd>S</kbd>) |
<mark> | Highlighted text (yellow by default) |
<small> | Side comments, copyright, fine print |
<s> | Strikethrough — no longer accurate |
<del> / <ins> | Removed and inserted content (semantic diff) |
<sub> / <sup> | Subscript and superscript |
<q> | Inline quote (adds quotation marks) |
<cite> | Title of a work |
<time> | A machine-readable date or time |
When To Use Which
Ask “is this tag describing the meaning, or the look?”:
- If meaning →
<strong>,<em>,<code>,<mark>, etc. - If purely visual → use CSS (
<span class="brand-bold">)
Semantic tags help screen readers, search engines, and future-you reading the code.
Up Next
Lists — ordered, unordered, and definition.
Lists →