Inline Elements: <strong> and <em>

Not all elements create their own block of space. Some sit within a line of text. These are inline elements.

Block vs inline (introduction)

Block elements start on a new line and take up the full available width:

<p>First paragraph.</p>
<p>Second paragraph.</p>

Both <p> elements stack vertically — each one begins on its own line.

Inline elements flow within the surrounding text without breaking the line:

<p>This word is <strong>important</strong> and this one is <em>emphasized</em>.</p>

<strong> and <em> sit inside the paragraph without starting a new line.

<strong> — strong importance

<strong> marks text as having strong importance — something the reader must pay attention to.

<p><strong>Warning:</strong> Do not leave the oven unattended.</p>

<p>The deadline is <strong>Friday at 5 PM</strong> — no exceptions.</p>

Browsers render <strong> as bold by default. But the meaning is “this matters”, not “make it bold”. CSS handles visual styling.

<em> — emphasis

<em> marks text that should be stressed — it changes the meaning of a sentence.

<p>I <em>never</em> said she took the money.</p>
<p>I never said <em>she</em> took the money.</p>

The two sentences have completely different meanings depending on which word is stressed.

Browsers render <em> as italic by default.

Nesting inline elements

Inline elements can be nested inside each other:

<p>This is <em>really <strong>very</strong> important</em>.</p>

<b> and <i> are not preferred for meaning

<b> (bold) and <i> (italic) are visual only — they have no semantic meaning. Use them only when you need a style change with no semantic intent.

Element	Use when
<strong>	The text is genuinely important
<em>	The text should be verbally stressed
<b>	Bold styling is needed with no particular importance
<i>	Italic styling is needed — technical terms, foreign phrases, etc.

For most purposes, prefer <strong> and <em>.

Exercise

Open index.html in VS Code.

Find one of the <p> elements you have already written and rewrite it to include:

1. A <strong> element around a word or phrase that is genuinely important — not just for emphasis, but because missing it would change what the reader understands.
2. An <em> element around a word that is verbally stressed — where saying it differently would change the meaning.

For example:

<!-- Before -->
<p>Good boots and a reliable pack are the two most important pieces of gear.</p>

<!-- After -->
<p>Good boots and a <strong>reliable pack</strong> are the two most important pieces of gear — do <em>not</em> cut corners on either.</p>

Save and reload in your browser. Notice that <strong> renders bold and <em> renders italic — but remember, that is the browser’s default styling, not the reason you used them.

Recap

• Block elements start on a new line. Inline elements flow within text.
• <strong> marks text as important — not just visually bold.
• <em> marks text for verbal stress — not just visually italic.
• Both can be nested inside block elements like <p>.
• Prefer <strong> and <em> over <b> and <i> when the distinction has meaning.