CodeBlanks Logo Icon CodeBlanks

Line break and horizontal rule

HTML course · Beginner · Lesson 9/68

Learn when to use <br> and <hr>.

What is the br tag?

The <br> tag (line break) creates a line break in the text — it moves the next piece to a new line. Use it when you want a new line inside a paragraph. For example, when writing an address or a poem you separate lines with <br> instead of putting each line in a new <p>.

Important: <br> is a void element. It takes no content; that is why it has no closing tag. </br> is not written.

What is the hr tag?

The <hr> tag (horizontal rule) draws a horizontal line on the page. Its real job is to mark a change of topic — for example to separate one section from the next.

Like <br>, <hr> is also a void element. It has no closing tag and takes no content. It is used only as a divider. Its visual style can be changed with CSS.

What is a void element?

A void element is one that takes no content and has no closing tag. <br> and <hr> are examples. The opening tag is enough on its own — you do not write anything after it.

In HTML5 you can write void elements as <br> or <br/>. Both are valid; it is a matter of habit. We will use the <br> form in this course.

Exercise Write an address card

Add an address card to body. In the first <p>, separate Alex Carter and 5 Park Street with <br>. Then draw an <hr> rule. Finally, open another <p> and write London.

Show example solution
<body>
  <p>Alex Carter<br>5 Park Street</p>
  <hr>
  <p>London</p>
</body>

Test yourself

  1. Does <br> have a closing tag (</br>)?

    • <br> is a void element, it has no closing tag
    • </br> must always be written
    • Only <br/> needs a closing tag
    • Only old browsers need a closing tag
    Show answer

    <br> is a void element, it has no closing tag — Correct. <br> is a void element; it has no closing tag.

  2. Add a line break

    Name: Alex____Surname: Carter
    Show answer
    Name: Alex<br>Surname: Carter
  3. Match each tag to its role

    <br>
    Line break
    <hr>
    Horizontal rule
    <p>
    Paragraph
    <h1>
    Main heading

All lessons in Beginner