Cover Image for HTML hr Tag
64 views

HTML hr Tag

The <hr> tag is an HTML element used to represent a thematic break or a horizontal rule within a document. It is a self-closing tag, which means it doesn’t require a closing tag.

Here’s an example of how the <hr> tag is used:

HTML<span role="button" tabindex="0" data-code="<!DOCTYPE html> <html> <head> <title>My Web Page</title> </head> <body> <h1>Heading 1</h1> <p>This is a paragraph of text.</p> <hr> <p>This is another paragraph after the horizontal rule.</p> </body>
<!DOCTYPE html>
<html>
     <head>
          <title>My Web Page</title>
     </head>
     <body>
          <h1>Heading 1</h1>
          <p>This is a paragraph of text.</p>
          <hr>
          <p>This is another paragraph after the horizontal rule.</p>
     </body>
</html>

In this example, the <hr> tag is placed between two paragraphs. When rendered in a browser, it creates a horizontal line or divider, visually separating the content before and after it.

The <hr> tag can also accept attributes like color, size, and width to customize its appearance. For example:

HTML<span role="button" tabindex="0" data-code="
<hr color="red" size="3" width="50%">

In this case, the <hr> tag will have a red color, a size of 3 pixels, and a width of 50% of the available space.

While the <hr> tag is still supported in HTML5, its usage has become less common in modern web design. Instead, developers often use CSS to create decorative lines or separators within their designs. However, the <hr> tag can still be useful for creating simple and straightforward horizontal rules or thematic breaks in HTML documents.

YOU MAY ALSO LIKE...

The Tech Thunder

The Tech Thunder

The Tech Thunder


COMMENTS