Skip to main content

Line Breaks and Horizontal Line

In this tutorial, we'll be exploring two fundamental elements of HTML formatting: Line Breaks and Horizontal Lines. We will learn how to use these elements to structure and organize content on your web pages.

What is a Line Break in HTML?​

In HTML, a line break is a point where the text will break to the next line. You can create line breaks using the <br> tag. This is an empty tag, meaning it does not require a closing tag.

Here's an example:

<p>This is a paragraph.<br>And this is a new line in the same paragraph.</p>

In the above example, the text after the <br> tag will start from a new line, but it will remain within the same paragraph.

What is a Horizontal line in HTML?​

A Horizontal line, also known as a horizontal rule, is a line that goes across the width of your web page or a section of the page. It is useful to create visual breaks in your content. To create a horizontal line, we use the <hr> tag. Like the <br> tag, the <hr> tag is also an empty tag.

Here's an example:

<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph, separated by a horizontal line.</p>

In the above example, a horizontal line is drawn between two paragraphs, providing a clear visual separation.

Styling Line Breaks and Horizontal Lines​

While <br> and <hr> tags are very straightforward to use, these tags can also be styled using CSS to fit the design needs of your page.

For instance, you can change the color, height, width, and style of a horizontal line using CSS like this:

<style>
hr {
  border: none;
  height: 2px;
  color: #333; 
  background-color: #333;
}
</style>
<hr>

In the above example, the horizontal line will be 2 pixels high and have a black color.

Remember, the <br> and <hr> tags are a great way to improve the readability of your web pages by breaking up large blocks of text and creating clear sections. They are simple to use, but if used wisely, can greatly enhance the structure and design of your web pages.

That's all for this tutorial. Keep practicing and happy coding!

Conclusion​

HTML provides us with simple yet powerful tools to structure and format our content. The <br> and <hr> tags are two such tools that allow us to create line breaks and horizontal lines respectively, offering ways to organize the content in a more readable and aesthetically pleasing manner. As we've seen, these tags can also be styled using CSS to better suit the design of your web pages. Keep experimenting with these tags and styles to find what works best for your needs.