• Skip to main content
  • Skip to primary sidebar
  • Skip to secondary sidebar
  • Skip to footer

Computer Notes

Library
    • Computer Fundamental
    • Computer Memory
    • DBMS Tutorial
    • Operating System
    • Computer Networking
    • C Programming
    • C++ Programming
    • Java Programming
    • C# Programming
    • SQL Tutorial
    • Management Tutorial
    • Computer Graphics
    • Compiler Design
    • Style Sheet
    • JavaScript Tutorial
    • Html Tutorial
    • Wordpress Tutorial
    • Python Tutorial
    • PHP Tutorial
    • JSP Tutorial
    • AngularJS Tutorial
    • Data Structures
    • E Commerce Tutorial
    • Visual Basic
    • Structs2 Tutorial
    • Digital Electronics
    • Internet Terms
    • Servlet Tutorial
    • Software Engineering
    • Interviews Questions
    • Basic Terms
    • Troubleshooting
Menu

Header Right

Home » Html » Tutorial » hr tag in HTML
Next →
← Prev

The hr tag in HTML

By Dinesh Thakur

The <hr> tag in HTML stands for horizontal rule and in HTML5, the <hr> tag represents a paragraph-level thematic break of an HTML page, whether text or not, maybe employed new label: <hr>. The HTML <hr> tag name comes from the English Horizontal Rule (horizontal line). This label formed by a single instruction (empty tag) and causes the browser to insert a horizontal line it separating the two paragraphs that compared. Four attributes allow changing its appearance. These are:

We’ll be covering the following topics in this tutorial:

  • Specific Attributes
  • Browser Support
  • How do I add color to an HTML <hr> tag
  • How do I make HR thicker in HTML?
  • How do I turn off the HR tag?
  • Which attribute does not come in HR tag?

Specific Attributes

The <hr> tag in HTML supports following additional attributes

AttributeValueDescription
‘align’left
center
right
The HTML <hr> align Attribute Change the alignment of the horizontal line. It can take three values: “left”, “center” and “right” to get left-aligned, center and right respectively.
‘noshade’noshadeThe HTML <hr> noshade Attribute is the boolean value and in English means no shadow exists because some browsers graphics as Navigator or Explorer shown with horizontal lines shaded three-dimensional effect. By including this attribute eliminates this effect so that the browser will only display a solid horizontal line instead of shaded lines.
‘size’pixelsThe HTML <hr> size attribute use to control the line thickness. As the value of this attribute is must specify the desired value in pixels (screen dots).
‘width’pixelsThe HTML <hr> width attribute use to specify the horizontal line width. The value can give an absolute manner, specifying the width in pixels (e.g. width = 100) or made relative to the width of the browser window using percentages (e.g. width = “90%”). It highly recommended using the latter system, so we get a relevant result regardless of the size each user wants to give the browser window.

These attributes can be used together to combine their effects. In Our example we can see the effect each one separately in Explorer along with the values used in each case.

<html>
  <head> 
     <title>Horizontal Line </title>
  </head>
 <body>
    Line of width 150 and size 3 
    <hr width="150" size='3">
        Line center aligned, width=50% and noshade 
    <hr align="center" width="50%" noshade>
        Line right aligned, size = 4, colour Red and having no shade 
    <hr align="right" size="4" color="red" noshade>
 </body>
</html>

Browser Support

ChromeFirefoxIEOperaSafariAndroid
YesYesYesYesYesYes

How do I add color to an HTML <hr> tag

It is possible to use the CSS background-color property in conjunction with the height and border to alter the default colour a <hr> tag.
In the next example, we have changed the colour of the <hr> tag to grey. You might even increase the thickness of the line by simply raising the value of the height property.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Change the Color of <hr> Tag</title>
 <style> 
  hr{ height: 1px; background-color: #ccc; border: none;}
 </style>
 </head>
  <body>
   <p>The color to an HTML <hr> tag</p>
   <hr>
   <p>The <hr> tag in HTML</p>
 </body>
</html>

How do I make HR thicker in HTML?

If you would like to alter the height or thickness of your horizontal line, add the height property into your <hr> style. It is possible even to set the background-color property to your thick horizontal line.

How do I turn off the HR tag?

No. <hr /> should not have a closing tag. It is invalid HTML.

Which attribute does not come in HR tag?

Thickness is an attribute which does not come with an HR tag which displays the thickness.

You’ll also like:

  1. HTML Anchor Tag
  2. HTML table tag
  3. HTML button tag
  4. HTML form tag
  5. HTML Marquee Tag
Next →
← Prev
Like/Subscribe us for latest updates     

About Dinesh Thakur
Dinesh ThakurDinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular Computer Notes blog. Where he writes how-to guides around Computer fundamental , computer software, Computer programming, and web apps.

Dinesh Thakur is a Freelance Writer who helps different clients from all over the globe. Dinesh has written over 500+ blogs, 30+ eBooks, and 10000+ Posts for all types of clients.


For any type of query or something that you think is missing, please feel free to Contact us.


Primary Sidebar

HTML Tutorials

HTML Tutorials

  • HTML - Home
  • HTML - History
  • HTML - Lists
  • HTML - Unordered List
  • HTML - Ordered Lists
  • HTML - Frame Tag
  • HTML - Input Type
  • HTML - Input Type="File"
  • HTML - Input Type="Hidden"
  • HTML - Form Tag
  • HTML - Img Tag
  • HTML - Anchor Tag
  • HTML - Table Tag
  • HTML - Span Tag
  • HTML - Button Tag
  • HTML - Doctype
  • HTML - Fieldset Tag
  • HTML - Links Tag
  • HTML - Drop Down Menu
  • HTML - Accesskey
  • HTML - Cgi
  • HTML - Post Method
  • HTML - Background Image
  • HTML - Text Area
  • HTML - TabIndex
  • HTML - Align Center
  • HTML - Address Tag
  • HTML - Thumbnails
  • HTML - Marquee Tag
  • HTML - Line Break
  • HTML - Blockquote
  • HTML - HR Tag
  • HTML - Image Center
  • HTML - Center Text
  • HTML - Link CSS
  • HTML - Html Vs Html5

Other Links

  • HTML - PDF Version

Footer

Basic Course

  • Computer Fundamental
  • Computer Networking
  • Operating System
  • Database System
  • Computer Graphics
  • Management System
  • Software Engineering
  • Digital Electronics
  • Electronic Commerce
  • Compiler Design
  • Troubleshooting

Programming

  • Java Programming
  • Structured Query (SQL)
  • C Programming
  • C++ Programming
  • Visual Basic
  • Data Structures
  • Struts 2
  • Java Servlet
  • C# Programming
  • Basic Terms
  • Interviews

World Wide Web

  • Internet
  • Java Script
  • HTML Language
  • Cascading Style Sheet
  • Java Server Pages
  • Wordpress
  • PHP
  • Python Tutorial
  • AngularJS
  • Troubleshooting

 About Us |  Contact Us |  FAQ

Dinesh Thakur is a Technology Columinist and founder of Computer Notes.

Copyright © 2023. All Rights Reserved.