What is Hr Tag in HTML? | Usage of Hr Tag. The HR tag is a simple HTML element used for creating horizontal lines within web pages. You can customize the HR tag with CSS and style it according to your wishes. Learn all about Hr Tag in detail.
Introduction:
HR tags in HTML add horizontal lines to a webpage to visually separate content or sections on a webpage. CSS can be used to style them to match a website’s design. As well as explaining the basics of the HR tag, this article also discusses some advanced styling techniques.
HyperText Markup Language
Content is created and structured using HyperText Markup Language on the World Wide Web.
Using this markup language, web pages can be structured, arranged, and edited, as well as images, videos, and text can be added.
There are elements, or tags, that define the parts of an HTML document
- Headings,
- Paragraphs
- links.
With a basic understanding of HTML, you will be able to create, customize, and enhance your websites, and prepare you for further web design and development. CSS (Cascading Style Sheets) can also be used to style and format a webpage, and JavaScript can be used to add interactive and dynamic functionality.
What is the HR Tag in HTML?
HTML documents are rendered by displaying a horizontal line across their width. Since it is a standalone HTML element, it does not require any opening or closing tags.
In a webpage, HR typically serves to visually distinguish different sections or sections of content. It occupies the entire width of its parent container and creates a new line before and after it.
HTML HR Tag usage:
A few basic attributes can be used to customize the HR tag’s appearance. Some of these attributes include:
Size:
By setting this attribute, you can set the thickness of a horizontal line. The default value of “1” can be replaced with any integer value.
For example:
If the horizontal line is set to “3”, then it will be thicker than if the horizontal line is set to “1”.
Width:
This attribute specifies the width of a horizontal line as a percentage or pixel value.
For example
A horizontal line will be drawn spanning 50% of an hr tag’s width since the width of an hr tag is set to 50%
A horizontal 300-pixel line would be created by the container with width=”300px.”>.
Align:
An attribute with this name can align horizontal lines with its parent containers. The values are “Left”, “Center”, or “Right”.
For example:
<hr align=”center”> would center the horizontal line within its parent container.
Example of using Attributes:
An example of an HR tag using all three attributes is provided below:
Copy code
<hr size=”3″ width=”50%” align=”center”>.
Styling the HR Tag with CSS
Additionally, you can use CSS to style the horizontal line according to the design of your website, in addition to the basic HR attributes.
CSS properties used to style HR tags include:
Border:
Horizontal lines can be specified using this property, as well as their width, color, and style.
For example:
In this example, the border would be solid red, with a thickness of 2 pixels, and the color would be red.
Margin:
HR tag space can be specified with this property.
For example:
The horizontal line’s margin will be 20 pixels, along with the space between the top and bottom of the line.
Width:
A horizontal line’s width can be specified as a percentage or pixel value.
For example:
With a width of 50%, the horizontal line spans 50% of the parent container’s width, while the width: is 300 pixels.
FAQS:
What is the purpose of the hr tag in HTML?
Including the hr element in your HTML document will enable you to use the HR tag.
For example: <hr>
Can I style the hr tag in HTML?
It is possible to style the HR tag using CSS in HTML.
To control the appearance of the horizontal line, you can adjust its height, width, color, and border properties.
Has HTML deprecated the HR tag?
HTML5 has not deprecated the hr element. It is a valid and widely used element for creating horizontal lines.HTML5 has not deprecated the hr element. It is a valid and widely used element for creating horizontal lines.
Can I use the hr tag to create a vertical line in HTML?
It is designed specifically to create a horizontal line, not a vertical line.
Vertical lines can be created by using HTML elements such as div elements with height and border sets.
Conclusion:
HTML HR tags are useful and versatile HTML elements that create horizontal lines and visually separate content.
If you know how to style and use the HR tag, your website can look professional and visually appealing. You can customize the HR tag with a few basic attributes, as well as use CSS to fully style the HR tag.