HTML from Scratch: How to Create a Horizontal Line in HTML. Lesson #10 Overcod.net

HTML from Scratch: How to Create a Horizontal Line in HTML. Lesson #10

We continue studying the basics of HTML. In this lesson, I will tell you how to create a horizontal line in HTML and where it can be effectively used.

A horizontal line helps visually separate content, making a page more structured and appealing. It is great for highlighting headings, menus, or simply dividing information blocks.

How to Create a Horizontal Line in HTML

In HTML, a special tag is used to create a horizontal line:

<hr>

This is a self-closing tag, so it does not require a closing tag.

Example Code:

<html>
<head>
    <title>Horizontal Line</title>
</head>
<body>
    <h1>Example of a Horizontal Line</h1>
    <hr>
    <p>Text below the line.</p>
</body>
</html>

Attributes of the `<hr>` Tag

1. Width of the Horizontal Line

You can adjust the width of the line using the width attribute, specifying the value in pixels (px) or as a percentage (%):

<hr width="300px">
<hr width="50%">

2. Thickness of the Horizontal Line

Set using the size attribute:

<hr size="8">

3. Alignment of the Horizontal Line

To change the line’s position, use the align attribute:

<hr width="300px" align="right"> <!-- Align to the right -->
<hr width="300px" align="center"> <!-- Centered -->
<hr width="300px" align="left"> <!-- Align to the left (default) -->

4. Removing Line Depth

To make the line flat, use the noshade attribute:

<hr noshade>

5. Color of the Horizontal Line

To change the color, use the color attribute:

<hr color="#cc0000"> <!-- Red line -->

However, the color attribute is deprecated, so the modern way to set color is through CSS:

<hr style="border: 2px solid blue;">

Conclusion

The <hr> tag is a simple yet useful tool for separating content. You can modify its parameters using attributes or style it with CSS.

That’s all for this lesson! See you in the next lessons!

Leave a comment(2)

I’m pretty pleased to discover this website. I need to
to thank you for your time for this fantastic read!!
I definitely enjoyed every little bit of it and I have you saved as a
favorite to check out new stuff in your website.

Reply
Posted on: 28.04.2026

Thank you

Posted on: 28.04.2026