HTML <hr> Tag:
The `<hr>` tag in HTML is used to create a horizontal rule, also known as a horizontal line or a divider. It is a self-closing tag, meaning it doesn't have a closing tag. The `<hr>` tag is often used to separate content within a page or to indicate a change in topic or section.
Here is the basic syntax of the `<hr>` tag:
html
<p>This is some text.</p>
<hr>
<p>This is more text after the horizontal rule.</p>
Example:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML hr Tag Example</title>
</head>
<body>
<h1>Document Title</h1>
<p>This is the first paragraph of text.</p>
<hr>
<p>This is the second paragraph of text, separated by a horizontal rule.</p>
</body>
</html>
HTML hr Tag |
In this example, the `<hr>` tag is used to create a horizontal line between the two paragraphs, visually separating them. The horizontal rule can be styled using CSS to change its appearance, such as its color, width, and style.
css
hr {
color: #333; /* Change the color of the horizontal rule */
margin-top: 20px; /* Add space above the horizontal rule */
margin-bottom: 20px; /* Add space below the horizontal rule */
border-style: dotted; /* Change the style of the border */
}
The `<hr>` tag is a simple and effective way to visually break up content and provide a clear visual separation between sections on a webpage.