<hr> Tag in HTML
Introduction
This guide explains the syntax of the HTML hr element and its application to add styled horizontal separators within HTML content. When developing websites, it is advisable to incorporate horizontal lines to indicate visual breaks between different sections. The HTML hr tag is essential for generating horizontal lines in HTML documents. An HTML element known as HR, being a block-level element, moves all succeeding elements onto a new line. This tutorial will illustrate the process of including a line break using an HTML horizontal rule on a webpage.
What is <hr> Tag in HTML?
A block-level element within HTML, the hr tag shifts all content following it to a new line. The appearance of the horizontal line created by this tag varies based on the browser in use, usually displaying with a border that creates a three-dimensional effect.
A logical progression from one section to another in an HTML document is established by the HTML5 <hr> tag. In previous versions of HTML, this tag was employed to visually separate content by displaying a horizontal line on the page. However, in HTML5, it carries a semantic significance.
As a block element in HTML, the <hr> tag fills the whole width of the page and begins a new line. Line breaks are present both before and after block elements. The <hr> element doesn't require a closing tag in HTML. However, the (<hr>) tag in XHTML has to be closed (<hr/>).
HTML <hr> Tag syntax
<hr> ...
Why is the <hr> Tag Important?
Inserting horizontal rules or HR components on web pages is a great strategy to improve the visual appeal of page designs. The hr element functioned as a styling feature in earlier HTML versions. This tag in HTML5 provides a more meaningful structure to a page's layout. Various layout effects can be incorporated and personalized with CSS styling.
When We Utilize the HTML <hr> Tag?
We can utilize the <hr> label in HTML if we need to:
- Take a topical break.
- Separate various themes on a page.
Example
<html>
<body>
<h1>An example of the hr tag in HTML</h1>
<p>Welcome to the page.</p>
<hr>
<p>Below are the contents.</p>
</body>
</html>
Output:
Attributes of the <hr> Tag
The hr element supports various options, allowing for the horizontal line to be tailored in a visually appealing manner to improve user interaction. It includes WIDTH, ALIGN, COLOUR, NOSHADE, and SIZE as parameters. Let's delve into the ways we can design our HTML page using these attributes in conjunction with the hr tag.
1. WIDTH Attribute
The width of a horizontal line can be adjusted by utilizing the WIDTH attribute. It is possible to specify the width in pixels or percentages. The percentage values are relative to the width of the containing element.
For example, if the parent element's width is 300 pixels, 50% would translate to 150 pixels. Below is a visual representation demonstrating the application of the WIDTH attribute in the HTML HR element:
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
<p>A horizontal line without using the width attribute:</p>
<hr>
<p>A horizontal line using a width attribute of 40%:</p>
<hr width="40%">
</body>
</html>
Output:
To generate horizontal lines of varying lengths to meet specific requirements, the <hr> tag is utilized. Nonetheless, the horizontal line will automatically span the entire width of the page.
2. COLOR Attribute
The hue of the horizontal line in HTML can be adjusted using the COLOR attribute. There are three choices available to specify a color: the name of the color, the hexadecimal code, or the RGB values. Nonetheless, the default color of the horizontal line is black. To gain a clearer insight, let's analyze a visual representation:
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
<p>A horizontal line with red color</p>
<hr color="red" />
<p>A horizontal line with blue color</p>
<hr color="blue"/>
</body>
</html>
Output:
Therefore, the <hr> tag is utilized to produce horizontal lines in different colors to meet our design needs.
3. SIZE attribute
The SIZE property has the ability to modify the height or thickness of a horizontal line in HTML. This adjustment is specified exclusively in pixels. To enhance comprehension, an example will be presented:
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
<p>A horizontal line with red color</p>
<hr size="10px" color="red" />
<p>A horizontal line with blue color</p>
<hr size="40px" color="blue"/>
</body>
</html>
Output:
4. ALIGN attribute
The horizontal line on an HTML page can be positioned to the left, right, or center by utilizing the ALIGN attribute. However, the ALIGN attribute will have no impact on the horizontal line if its width is set to 100%. This concept is best illustrated as follows:
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
<p>A horizontal line with red color</p>
<hr align="left" width="70%" color="red">
<p>A horizontal line with blue color</p>
<hr align="right" width="70%" color="blue">
<p>A horizontal line with orange color</p>
<hr align="left" width="70%" color="orange">
</body>
</html>
Output:
To adjust the horizontal lines to the left, right, or center according to our requirements, we utilize the <hr> tag.
6. NOSHADE attribute
The shadow underneath the horizontal line on an HTML page can be removed by employing the NOSHADE attribute. This attribute functions as a boolean, meaning that when applied to the HR tag, a solid horizontal line will be displayed on the webpage; otherwise, a shaded line will be shown. To enhance our understanding, let's utilize an example for clarification:
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
<p>A horizontal line with noshade </p>
<hr noshade>
<p>A horizontal line without noshade</p>
<hr>
<p>A horizontal line with orange color</p>
<hr align="left" width="70%" color="orange">
</body>
</html>
Output:
Support for Browsers
The following browsers are capable of using the hr tag:
- Chrome
- Firefox
- Opera
- Safari
- Microsoft Edge
Style Guidelines for Horizontal Lines
A horizontal rule is frequently used to split the content into sections. The <hr> element is used to represent a horizontal rule. The <hr> element was first styled using attributes. Nowadays, the browser is informed of a paragraph-level thematic break via the <hr> element in HTML5. Look at the CSS styling for the <hr> element below.
Change the Size and Position of a Horizontal Rule
The dimensions and positioning of a horizontal rule should be customized. Instead of relying on attributes, CSS rules are employed to style the <hr> element, steering away from attribute-based styling for the <hr> element. Adjust the width property to modify the horizontal line's breadth, followed by utilizing the margin attribute to align it centrally.
Adjusting the position and dimensions of a horizontal rule, such as:
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
<style>
hr {
width: 100%;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>Horizontal line</h1>
<hr />
</body>
</html>
Output:
Include the height property in your <hr> style to adjust the vertical size or thickness of your horizontal rule. You can also specify the background color for the thick horizontal line using this attribute.
An example of changing the background color and height of the horizontal rule is demonstrated below:
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
<style>
hr {
width: 100%;
height: 50px;
margin-left: auto;
margin-right: auto;
background-color: pink;
}
</style>
</head>
<body>
<h1>Horizontal Line with Background Colour and Height</h1>
<hr />
</body>
</html>
Output:
Border Property for CSS
The CSS border property serves as a convenient way to set the border-width, border-style, and border-color for all four sides of an element simultaneously. It does not accept negative values.
When aiming for uniformity on all sides, you can make use of the border shorthand property. The border-width, border-style, and border-color properties, each capable of setting different values for individual sides, are employed to adjust borders.
By defining the color and adjusting the border-top property, we can modify the color of the horizontal line. Refer to the demonstration below to observe this in action.
Example: Introducing a horizontal divider using the border-top attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
<style>
hr {
border-top: 7px solid pink;
}
</style>
</head>
<body>
<h1>Horizontal Line with Background Color and Height</h1>
<hr />
</body>
</html>
Output:
Conclusion
- The <hr> tag is utilized to add an even line in the middle between the items on a page.
- The <hr> tag makes topical breaks between the items on a page.
- It is a self-closing tag.
- It is utilized with many attributes like the Width, Size, Variety, NOSHADE, and Align attributes in HTML.
- The Width attribute can be determined in pixels as well as in rate.
- The Size attribute can be determined exclusively in pixels.
- We can adjust the flat line to the left or right or focus using the Adjust characteristic.
- On the off chance that the width of the flat line is 100 percent, the Adjust quality doesn't influence the line.