HTML <hr> Tag
Today we will cover Tag hr examples. By using examples, we anticipate meeting the learning objectives.
The HTML <hr> tag is a self-closing tag that creates a horizontal line or rule in a web page. The <hr> tag is typically used to visually separate content, such as paragraphs or sections, within a web page.
Whenever thematic changes are being made to the content, insert the <hr> tag:
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
</head>
<body>
<h1>The Languages used for the making of the Applications</h1>
<p>Kotlin is a cross-platform, statically typed, general-purpose programming language with type inference. Kotlin is designed to interoperate fully with Java, and the JVM version of Kotlin's standard library depends on the Java Class Library. Still, type inference allows its syntax to be more concise.</p>
<hr>
<p>Objective-C is a general-purpose, object-oriented programming language that adds Smalltalk-style messaging to the C programming language. Initially developed by Brad Cox and Tom Love in the early 1980s, NeXT selected it for its NeXTSTEP operating system.</p>
<hr>
<p>Ruby is an interpreted, high-level, general-purpose programming language which supports multiple programming paradigms. It was designed with an emphasis on programming productivity and simplicity. In Ruby, everything is an object, including primitive data types.</p>
</body>
</html>
Using CSS, align the <hr> element as follows:
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
</head>
<body>
<hr style="width:80%; text-align:right; margin-right:2px">
</body>
</html>
Here is an example of a noshaded using CSS:
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
</head>
<body>
<hr style="height:3px; border-width:0; color:black; background-color:black">
</body>
</html>
How to configure the height of a <hr> tag using CSS:
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
</head>
<body>
<hr style="height:45px">
</body>
</html>
How to configure the width of an <hr> element using CSS:
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
</head>
<body>
<hr style="width:30%">
</body>
</html>
Here is the complete example of the <hr> tag with <form> and <header> tag as well:
<!DOCTYPE html>
<html>
<head>
<title>Mr Examples</title>
<style>
hr{
width: 50%;
border: 2px solid purple;
border-radius: 50px;
}
</style>
</head>
<body>
<header>
<h1>Mr Examples</h1>
</header>
<main>
<h2>Welcome to Mr Examples</h2>
<p>This is the content of Mr Examples.</p>
<hr>
<h2>My Services</h2>
<p>Here are the services that we offer:</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<hr>
<h2>Contact Me</h2>
<p>If you're interested in working with us, please contact me at
[email protected] or fill out the form below.</p>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<br>
<input type="submit" value="Submit">
</form>
</main>
</body>
</html>
HTML <hr> Tag Usage
In HTML, the Tag hr <hr> specifies a thematic break (for example, a change in topic).
The <hr> element is usually presented as a horizontal rule employed to divide content (or indicate a change) on an HTML page.
HTML <hr> Tag Advantages
The HTML <hr> tag provides several advantages when used properly in web page design and development:
- By visually separating content with a horizontal line, the <hr> tag can help improve the readability and scannability of a web page. It makes it easier for users to distinguish between different sections of content.
- The <hr> tag is a simple and easy-to-use HTML element that doesn’t require any complex coding or styling. It’s a quick way to add a horizontal line to a web page.
- The <hr> tag can help improve accessibility for users with disabilities by providing a visual indicator of the structure of the content on a web page.
- The <hr> tag is supported by all major web browsers, making it a reliable and widely used HTML element.
- The <hr> tag can be customized with attributes such as size, width, color, and align to fit the design and style of a web page. This allows web designers and developers to create a unique and visually appealing separator for their web pages.
Browser Compatibility
| Element |  | |  | | |
|---|
| <hr> | Yes | Yes | Yes | Yes | Yes |
Attributes
Global
The Tag hr <hr> similarly handles Global Attributes in HTML.
Event
The Tag hr <hr> as well carries Event Attributes in HTML.
Predefined CSS
The <hr> element is frequently generated with the given default values:
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}If this article was informative enough to meet your educational goals, then do subscribe to our Newsletter below in order to be in touch with the latest technical information on this site.
