Adding Page Breaks with the Horizontal Rule Tag
This guide shows you how to add a horizontal rule to a web page that separate page components with a horizontal line.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
  • Complete the Exercise
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

In this guide, we' are implementing the horizontal rule tag. This tag presents a line break as well as a visible horizontal line that you can see on the browser.

This is particularly useful when you have a multitude of paragraphs, and you don't want them to distract from each other. It's commonly used in blogs, especially when a separation is required between the content and information about the author.

To include it, all that you have to add is the tag <hr>. It does not require a closing tag as you will not be putting content inside it.

If you refresh the browser, you can see the horizontal line.

large

However, this line that comes by default, is not aesthetically pleasing. This is why tools such as Bootstrap and Foundation offer different styles. They may be thicker, more subtle, or, have a different color. Through these, you have more options for designing your web page.