HTML hr Tag | Basic syntax of the hr tag - Example of the hr tag

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.