Introduction
Good morning, students! Today, we will learn about the <hr> tag in HTML. This tag is simple but very useful for creating visual breaks in your web pages. Let’s dive in!
What is the <hr> Tag?
The <hr> tag stands for “horizontal rule.” It is used to create a horizontal line across the web page. This line is used to separate content and create a visual break. It is an empty tag, which means it does not have a closing tag.
Syntax:
<hr>OUTPUT :
<!DOCTYPE html>
<html>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph separated by a horizontal line. </p>
</body>
</html>
OUTPUT: –
This is a heading
This is a paragraph.
This is another paragraph separated by a horizontal line.
In this example, the <hr> tag creates a horizontal line between two paragraphs.
Attributes of the <hr> Tag
The <hr> tag has several attributes that allow you to customize its appearance:
- Width: Specifies the width of the horizontal line.
- Size: Specifies the height (thickness) of the horizontal line.
- Color: Specifies the color of the horizontal line.
- Align: Specifies the alignment of the horizontal line.
Width Attribute
The width attribute can be set in pixels or percentage.
Example:
<hr width="50%">
<hr width="200px">Size Attribute
The size attribute sets the height of the line in pixels.
Example:
<hr size="5">
Color Attribute
The color attribute sets the color of the line. Note: This attribute is not supported in HTML5. Use CSS for coloring.
Example:
<hr color="red">
Align Attribute
The align attribute aligns the line left, center, or right. Note: This attribute is not supported in HTML5. Use CSS for alignment.
Example:
<hr align="center">Using CSS with the <hr> Tag
In modern HTML, it is better to use CSS to style the <hr> tag. Here is how you can do it:
CSS Example
<!DOCTYPE html>
<html>
<head>
<style>
hr {
border: 1px solid black; /* Border style */
width: 50%; /* Width */
height: 5px; /* Height */
background-color: blue; /* Background color */
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph separated by a styled horizontal line.</p>
</body>
</html>In this example, we use CSS to set the border, width, height, and background color of the <hr> tag.
Conclusion
The <hr> tag is a simple and effective way to separate content in your web pages. You can customize it using attributes or CSS to fit the design of your site.
Important Notes <HR> :
- The
<hr>tag creates a horizontal line for content separation. - Syntax:
<hr> - Attributes:
width,size,color,align(Note: Use CSS for modern styling) - Example:
<hr width="50%"> - CSS Example: Use
border,width,height, andbackground-colorto style.
By understanding and using the <hr> tag effectively, you can enhance the readability and structure of your web pages.
That’s all for today, students! Practice using the <hr> tag in your HTML projects. If you have any questions, feel free to ask.
summary of the <hr> tag in table format:
| Feature | Description | Example Code |
|---|---|---|
| Tag | Creates a horizontal line for content separation | <hr> |
| Syntax | Basic usage | <hr> |
| Width | Specifies the width of the line in pixels or percentage | <hr width="50%"> <br> <hr width="200px"> |
| Size | Specifies the height (thickness) of the line in pixels | <hr size="5"> |
| Color | Specifies the color of the line (not supported in HTML5) | <hr color="blue"> |
| Align | Aligns the line left, center, or right (not supported in HTML5) | <hr align="center"> |
| CSS Styling | Modern way to style using CSS | “`html |
| <style> hr { | ||
| border: 1px solid black; /* Border style */ | ||
| width: 50%; /* Width */ | ||
| height: 5px; /* Height */ | ||
| background-color: blue; /* Background color */ | ||
| } </style> | ||
| “` |
