How to create a horizontal line in HTML with the hr tag
The HTML horizontal line is a line that divides content on a website into two sections. The corresponding HTML <hr> tag does not require a closing element.
What is an HTML horizontal line?
An HTML horizontal line is used to draw a visible and continuous dividing line between two paragraphs or other meaningful sections in an HTML document. It is defined with the HTML <hr> tag and is used to improve the structure and readability of a web page. <hr> is not only a visual dividing line, but also has semantic significance because the element indicates that there is a change of topic or a thematic break.
The HTML tag can theoretically be used anywhere within the body element and does not require a closing tag. The abbreviation ‘hr’ stands for ‘horizontal ruler’. HTML <hr> supports all HTML attributes and is supported by all common browsers.
- Loading 3x faster for happier customers
- Rock-solid 99.99% uptime and advanced protection
- Only at IONOS: up to 500 GB included
What is the syntax of HTML <hr> and how is it used?
You don’t need any attributes or parameters to implement the horizontal line element in HTML, making the syntax for HTML <hr> simple:
<hr>We’ll illustrate how this element works with a simple example. Below, we’re going to take a paragraph (<p>) and a quoted text (<blockquote>) and separate them in our HTML document using a horizontal line. The corresponding code looks like this:
<!DOCTYPE html>
<html>
<body>
<h1>HTML horizontal line</h1>
<p>HTML is the standard markup language used to create documents for display on the web. It outlines the structure of a web page and enables the definition of text, images, links and various other elements.</p>
<hr>
<blockquote>“HTML is easy to learn and provides a solid foundation for creating websites.”</blockquote>
</body>
</html>
How to customise horizontal lines in HTML
Before HTML5 was introduced, the attributes align, color, noshade, size and width were used to customise horizontal lines in HTML. Since, however, they are no longer supported, you can use the CSS attribute style to make changes to horizontal lines in HTML.
Use this code instead of align:
<!DOCTYPE html>
<html>
<body>
<h1>HTML horizontal line</h1>
<p>HTML is the standard markup language for documents that are to be displayed on the web. It describes the structure of a website and makes it possible to define text, images, links and other elements.</p>
<hr style="width:50%;text-align:left;margin-left:0">
<blockquote>“HTML is easy to learn and provides a solid foundation for creating websites.”</blockquote>
</body>
</html>You can change the colour of a horizontal HTML line with the color property:
<!DOCTYPE html>
<html>
<body>
<h1>HTML horizontal line</h1>
<p>HTML is the standard markup language for documents that are to be displayed on the web. It describes the structure of a website and makes it possible to define text, images, links and other elements.</p>
<hr style="color:yellow;background-color:gray">
<blockquote>‘HTML is easy to learn and provides a solid foundation for creating websites’.</blockquote>
</body>
</html>Instead of noshade, use the following code to include a horizontal line without a shadow:
<!DOCTYPE html>
<html>
<body>
<p>A normal horizontal line:</p>
<hr>
<p>With CSS:</p>
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
</body>
</html>You can change the height with height:
<!DOCTYPE html>
<html>
<body>
<p>A normal horizontal line:</p>
<hr>
<p>A horizontal line with a height of 50 pixels:</p>
<hr style="height:50px">
</body>
</html>You can set the width of an HTML horizontal line with the width parameter:
<!DOCTYPE html>
<html>
<body>
<p>A normal horizontal line:</p>
<hr>
<p>A horizontal line with a width of 30 percent:</p>
<hr style="width:30%">
</body>
</html>- Free WordPress with .co.uk
- Free website protection with one Wildcard SSL
- Free Domain Connect for easy DNS setup