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.
<mark> highlights a word; the visitor's eye lands there. <hr> draws a horizontal line marking a topic change. <br> breaks a line within the same paragraph; useful for addresses or poems.
mark and br: highlighting and line breaks
<mark> and <br> serve different purposes. <mark> highlights a word or phrase; browsers paint its background yellow. Ideal for marking the key point.
<br> 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 <p> with one word marked using mark (e.g. light). Finally add one more <p> 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