Emphasis and separation

Highlight key parts and separate sections with a horizontal rule.

Emphasis and separation: mark, hr, br

The intro text is ready. Now you'll mark key words and separate sections. Three tags will help.

 highlights a word; the visitor's eye lands there. <hr> draws a horizontal line marking a topic change.   breaks a line within the same paragraph; useful for addresses or poems.

mark and br: highlighting and line breaks

 and   serve different purposes.  highlights a word or phrase; browsers paint its background yellow. Ideal for marking the key point.

  breaks a line; it moves to a new line inside a paragraph. It's a void tag, so no closing tag. Useful when writing an address or a poem.

Exercise Add highlights and separation with hr, mark, and br

Take the body with the intro text from the previous lesson. After the second paragraph, add an <hr>. After hr, add a  with one word marked using mark (e.g. light). Finally add one more  and break a line inside it with br (e.g. your hobbies).

Show example solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alex York - About me</title>
  </head>
  <body>
    <h1>Alex York</h1>
    <h2>Photographer</h2>
    <p>Hi! I'm Alex. I shoot <strong>street and portrait</strong> photography and love <em>travel</em>.</p>
    <p>This page is a short introduction to who I am.</p>
    <hr>
    <p>My favorite subject is <mark>light</mark>.</p>
    <p>My hobbies:<br>reading and hiking.</p>
  </body>
</html>

Test yourself

Where is the best place for the <hr> tag in this project?
- At the very top, before h1
- After every paragraph
- Inside the title element
- Between the intro paragraphs and the highlights
Show answer

Between the intro paragraphs and the highlights — Correct. hr signals a topic change; the move from intro to highlights fits this.

Complete the tag for section separation

<p>First section</p>
<____>
<p>Second section</p>

Show answer

<p>First section</p>
<hr>
<p>Second section</p>

Match each tag to its meaning

mark

Highlighted word
hr

Topic break
br

Line break
strong

Important text
em

Emphasized text

Next lesson: Project final - About me

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies