In this section of our HTML tutorial, we will focus on the <hr> element, which is used to create horizontal rules or separators in HTML documents. Horizontal rules are handy for visually dividing content or adding a decorative element to your web pages.
Understanding Horizontal Rules
The <hr> element is used to create horizontal rules or thematic breaks in HTML. It’s a self-closing tag, meaning it does not require a closing tag, and when rendered, it typically displays as a horizontal line that spans the width of its containing element. Horizontal rules are often used to visually separate sections or content on a webpage.
Basic Syntax
Here is the basic syntax for using horizontal rules in HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <!-- Document Type Declaration (DOCTYPE) --> <html> <head> <!-- Other elements in the head section --> </head> <body> <p>This is some text above the horizontal rule.</p> <hr> <p>This is some text below the horizontal rule.</p> <!-- Content in the body section --> </body> </html> |
In this example, the <hr> element is used to create a horizontal rule between two paragraphs. As a self-closing tag, it does not require a closing tag.
XHTML-style Syntax
In XHTML, which is an earlier, more strict version of HTML, self-closing tags must have a slash before the closing angle bracket. Here’s the same example using the XHTML-style syntax for the <hr> element:
|
1 2 3 |
<p>This is some text above the horizontal rule.</p> <hr /> <p>This is some text below the horizontal rule.</p> |
The XHTML-style syntax adds the slash before the closing angle bracket to indicate that it’s a self-closing tag. While this syntax is still supported in modern HTML, it’s not always necessary. The classic <hr> syntax is more commonly used.
Code Examples
Here are examples of using the <hr> element in HTML:
Creating a Horizontal Rule:
|
1 2 3 |
<p>This is some text above the horizontal rule.</p> <hr> <p>This is some text below the horizontal rule.</p> |
Applying Attributes to <hr>:
You can also use attributes with the <hr> element to control its appearance. For example:
width: Sets the width of the horizontal rule.color: Sets the color of the rule.size: Sets the thickness of the rule.
|
1 2 3 |
<p>Text above the customized horizontal rule.</p> <hr width="50%" color="blue" size="2"> <p>Text below the customized horizontal rule.</p> |
Conclusion
The <hr> element is a straightforward yet effective tool for creating horizontal rules or thematic breaks in your HTML documents. It’s useful for visually separating sections or adding a decorative element to your web pages. By strategically using horizontal rules, you can enhance the structure and aesthetics of your content. As you continue to develop web pages, you’ll find that the <hr> element, along with other HTML and CSS techniques, contributes to an organized and visually appealing presentation of your content.