Bold, Emphasis & Line Breaks · HTML

Ch 1 · Your First Web Page — card 4 of 4.

Browsers collapse whitespace: pressing Enter five times or typing ten spaces in your code still shows a single space on the page. To control how text looks and where it breaks, you use tags instead.

• 💪 Marking important words with <strong>
• 🗣️ Adding stress to a word with <em>
• ↩️ Forcing a new line with <br> and drawing a divider with <hr>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Page</title>
  </head>
  <body>
    <h1>Weekend Plans</h1>
    <p>The match starts at <strong>2pm sharp</strong>, so please <em>don't</em> be late.</p>
    <p>Meet at:<br>12 Park Road<br>Leeds</p>
    <hr>
    <p>This    line   has   lots   of   spaces,
       but the browser shows just one between each word.</p>
  </body>
</html>

<strong> means the words are important, and browsers show them in bold. <em> means emphasis, like stressing a word when you speak, and browsers show it slanted. <br> and <hr> are empty elements: they have no content inside them, so they have no closing tag.

• Extra spaces and new lines in your code are squashed into one space
• Use <strong> and <em> for meaning, not just for looks
• <br> is for line breaks inside a paragraph, such as an address or a poem; do not use it to space out a page