In this blog, we will cover what the HTML hr tag is used for, how to use it, and some real-world scenarios that you can try for yourself. Semantic tags are an integral part of modern web development, and it is essential to understand why they are used. Let’s get started.
Table of Contents
What is hr tag in HTML?
The <hr> tag is an HTML tag used to separate sections of content on a webpage. It renders a gray horizontal line across
the page. While the <hr> was a thematic tag in previous versions, like HTML4, which treated it as a visual element. Since the update to HTML5, it is now redefined as a semantic tag. This means that in addition to forming a visual line on the page, it also conveys the meaning of the content to the web browser and search engine crawlers. Using the <hr> tag improves SEO, overall document structure, and helps both users and machines understand the content better.
What is the use of hr tag in HTML?
The <hr> tag essentially creates a horizontal line across a webpage. It improves the readability and structure of your website by separating different elements and sections so as not to overwhelm the user.
The <hr> tag in HTML may seem like an easy concept, but the way you apply it can make or break the user experience of your website. So read on.
Syntax of the hr HTML Tag
The <hr> tag, like all tags in HTML, follows an easy syntax.
Syntax:
Because this tag is self-closing, this one line is all you need to make the horizontal line across your webpage.
hr Tag in HTML Example
Now that we are familiar with the syntax, let’s have a look at what the <hr> tag looks like on the front-end before we discuss specific use cases.
In this example, the <hr> tag is used to separate the webpage into two. You can use it as many times as you want and reposition, resize, and redesign it using CSS, which we will get to in a minute.
When to Use the hr HTML Tag in Web Development
Now that we have a fundamental understanding of what the <hr> tag does in HTML5 and how it is different from HTML4, let’s move on to some real-world scenarios to get an even better understanding of the use of the <hr> tag in HTML.
1. Separating Sections in Content
The main use of the <hr> in HTML is to break your content into clearly defined sections. Imagine that you are working on a blog page and you want to visually split the introduction from the rest of the content. The <hr> tag works perfectly for this scenario, guiding the user from section to section without overwhelming them.
Example:
2. Dividing Quotes or Thematic Blocks
If you’re writing content that includes multiple quotes, testimonials, or poetic stanzas, a horizontal rule can be used to mark the shift between voices or themes subtly.
Example:
3. Using hr for UI and Aesthetic Separation
In modern UI designs, horizontal lines can be used to break up different parts of a webpage, like separating a form from the footer or dividing card components in a dashboard layout. While CSS is the go-to tool for styling, the <hr> tag provides a semantic and accessible way to implement such breaks.
Example:
By using the <hr> tag thoughtfully, you can guide your visitors through your content smoothly.
hr Tag Attributes in HTML
In older versions like HTML4, the <hr> tag was primarily used as a visual element to create a line across the page. Developers often styled it using outdated hr tag attributes in HTML like:
All that changed with the release of HTML5, in which the <hr> tag carries semantic meaning. It now represents a thematic shift in the content, something like a pause, a scene change, or a transition to a new topic.
Using <hr> properly not only improves visual flow but also enhances accessibility and semantic clarity, an important part of modern, SEO-friendly web development.
Styling the hr HTML Tag with CSS
The default <hr> tag renders a simple grey horizontal line in the browser, which is not always the best look for your website. Let’s add some styling to it using CSS.
1. Changing Color, Width, and Height
The quickest way to make the <hr> stand out is by adjusting its basic appearance using inline CSS.
Example:
Explanation:
- height: Controls the thickness of the line.
- background-color: Defines the color.
- border: none: Removes the browser’s default styling.
2. Using Border Styling for Creative Effects
You can use CSS to turn the <hr> into a dashed line, which feels softer and can be used to signal section breaks with a more decorative touch.
Example:
Here are some additional values that you can try out on your own:
- border-top: dotted
- border-top: double
- border-top: solid
3. Responsive and Center-Aligned <hr> Lines
Responsiveness is crucial in web development. Let’s learn how to style the <hr> tag so it looks good across all screen sizes.
Example:
This keeps the line fluid and consistent across mobile, tablet, and desktop views.
4. Animated and Interactive Horizontal Rules
You can even animate <hr> elements using CSS. While it is not a typical approach, it’s good to have a little fun with.
Example:
This is great for use under headings, buttons, or call-to-action blocks, adding a sleek, modern touch.
Conclusion
Semantic tags in HTML are an important topic that most beginner HTML developers seem to forget. Efficiently using the <hr> tag in your webpage can not only enhance the user experience but also provide SEO advantages. Have a look at our complete HTML and CSS training to gain a deeper understanding of how to make your own modern webpage.
hr Tag in HTML – FAQs
1. Can I style the hr tag without CSS?
You can style and <hr> tag without CSS, but it is no longer recommended since the HTML5 update. All modern, SEO friendly sites use CSS to style the HTML document. It also provides more flexibility than the previously used attributes.
2. Is the hr tag still used in modern HTML5?
Yes, but it has been redefined as a semantic element in HTML5. It now conveys the meaning of sections to both machines and users by separating them. It renders a visual break by forming a horizontal line on the page.
3. Can I animate a horizontal rule using CSS?
Using CSS, you can add animations and transitions and everything else you can do with any other HTML tag. This helps the page look more modern and interactive.
4. Does hr affect screen readers or accessibility?
Screen readers interpret the hr tag as a thematic break, which helps guide users across sections seamlessly. But it is not recommended that you use it merely for decorative purposes.
5. What is the difference between the hr and br tags in HTML?
- Use
<hr> when you want to separate sections or indicate a topic change.
- Use
<br> when you just want to move text to a new line.
- Use
<hr> when you’re changing topics or sections.
- Use
<br> when you’re breaking a line within the same paragraph or block of text.