Emphasis and line breaks

strong and em

Sometimes one word matters more than the rest of the sentence. Put it in <strong>: the browser shows it in bold, and a screen reader stresses it.

<em>, short for "emphasis", adds the stress you'd hear when you say it: "that's really tasty", with the stress on really. The browser puts it in italics.

They sit in the middle of a sentence, inside a <p>: the sentence just carries on, on the same line.

1<main>2  <p><strong>New:</strong> sea salt caramel.</p>3  <p>That's <em>really</em> tasty, says Maggie.</p>4</main>

Why not b?

<b> and <i> exist too, and they look the same: bold and italic. But they don't mean anything. <b> only says "make this bold", and a screen reader reads it as ordinary text.

HTML is about meaning, not looks. Is something important? <strong>. Are you stressing it? <em>. Do you only want something to look different? Then CSS is your tool, from module 2 onwards.

1<main>2  <p><strong>Important</strong> and <b>just bold</b>.</p>3  <p><em>Stressed</em> and <i>just italic</i>.</p>4</main>

A new line with br

An address takes up two lines, but it's one whole: one paragraph. A line break in your code doesn't help, it became a space, remember? That's what <br> is for: a line break.

<br> has no content, so it has no closing tag either. An element like that is called an empty element.

Don't use <br> to make space between paragraphs: that's what two <p>s are for.

1<main>2  <h2>Address</h2>3  <p>12 Marine Parade<br>Brighton BN2 1TL</p>4</main>