
- HTML Home
- HTML Roadmap
- HTML Introduction
- HTML History & Evolution
- HTML Editors
- HTML Basic Tags
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- HTML Fonts
- HTML Blocks
- HTML Style Sheet
- HTML Formatting
- HTML Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Frames
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Code Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Table Headers & Captions
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB & RGBA Colors
- HTML - HEX Colors
- HTML - HSL & HSLA Colors
- HTML - HSL Color Picker
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - Document Object Model (DOM)
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Character Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <hr> Tag
Introduction to <hr> Tag
The HTML <hr> tag is used to create a horizontal line on a web page. This <hr> element signifies a thematic break between paragraph-level elements, such as a change of scene in a story or a shift of topic within a section.
The <hr> element accepts a color attribute, which is used to color the horizontal line. Additionally, this tag supports both global attributes and event attributes in HTML.
Syntax
Following is the syntax of <hr> tag −
<hr>
Attributes
The HTML <hr> tag supports both Global and Event attributes of HTML. Additionally, it accepts some specific attribute, which are listed bellow.
Attribute | Values | Description |
---|---|---|
align | left center right |
This attribute is used to align the <hr> element. |
size | Numeric Value | This attribute is used to set the height of <hr> element. |
width | Numeric Value | This attribute is used to set the width of the <hr> element. |
color | color code or name | This attribute is used to set the color of the <hr> element. |
noshade | No Value | This attribute is used to specify a solid horizontal line instead of shaded lines. |
Example: Defining an <hr> Element
Let's consider the following example, where we create an HTML document to demonstrate the behavior of the <hr> tag. In the examples below, we will use all the additional attributes on the HTML <hr> element to understand the effect of each attribute. We will also use CSS to style our <hr>
<!DOCTYPE html> <html> <body> <h2> Tutorialspoint </h2> <hr /> <p> Simply Easy Learning with Tutorialspoint </p> </body> </html>
Example: <hr> with Attributes
Let's Consider the following example, where we create an HTML document to demonstrate by using the <hr> tag. This HTML code generates a web page with a heading "Tutorialspoint", a horizontal line, and a paragraph states "Simply Easy Learning with Tutorialspoint".
<!DOCTYPE html> <html> <body> <p> This is a normal hr Element </p> <hr> <p> This is a noshade hr Element </p> <hr noshade> <p> This is size set to 10 & green hr Element </p> <hr size="10" color="green"> <p> This is width set to 100 & right aligned hr Element </p> <hr width="100" align="right"> </body>
Example: <hr> tag with Styles
In the following example, we create an HTML document and modify the <hr> tag using the following CSS properties −
<!DOCTYPE html> <html> <head> <style> hr { border: none; border-top: 3px solid #333; overflow: visible; text-align: center; height: 5px; } hr:after { background: #fff; content: 'HTML'; padding: 4px; position: relative; top: -13px; } </style> </head> <body> <h2>TutorialsPoint</h2> <p>Simply Easy Learning </p> <hr> <h3>HTML hr Tag</h3> <p>It's creates a horizontal line.</p> </body> </html>
Supported Browsers
Tag | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
hr | Yes | Yes | Yes | Yes | Yes |