To start practicing this, first understand what exactly it is: HTML5: Understanding Elements.
Continuation of Understanding Element:
Horizontal rules are used to create horizontal lines in the browser window. It divides an HTML page into horizontal segments. Horizontal rules are required when different types of content must be displayed separately on the same HTML page. The HR element represents the horizontal rule. It is an empty tag, which means it contains no content.
| Attribute | Purpose |
| class | Defines the name of the class |
| lang | Defines the language for the rule |
| dir | Defines the direction of the rule, that is from left to right or right to left |
| id | Defines the value of the id |
| onClick | Opens an HTML document on a mouse click |
| onDblClick | Opens an HTML document on a double-click |
| onKeyDown | Opens an HTML document on pressing a key |
| onKeyPress | Opens an HTML document on pressing and releasing the mouse button |
| onKeyUp | Opens an HTML document when a key is released |
| onMouseDown | Opens an HTML document on clicking of a mouse button |
| onMouseMove | Opens an HTML document on moving the mouse pointer |
| onMouseOut | Opens an HTML document when the mouse pointer moves out of the element |
| onMouseOver | Opens an HTML document when the mouse pointer moves over the element |
| onMouseUp | Opens an HTML document on releasing the mouse button |
| style | Defines inline style of the element |
| title | Provides extra information about the element |
Working with Horizontal Rules
As previously described in the IN-DEPTH section, horizontal lines are used to divide an HTML page. Horizontal rules are also used to separate the content of an HTML page. To further understand how to use the horizontal rule tag, let’s construct an HTML file called hor-rule.html. Below is the code for the hor-rule.html.
<!DOCTYPE>
<HTML>
<HEAD>
<TITLE>Horizontal rule</TITLE>
</HEAD>
<BODY>
Line 1.<HR/>
Line 2.<HR size="20" style="background-color:yellow;"/>
Line 3.
</BODY>
</HTML>In the above code, the horizontal rule separates the HTML page into three portions. The sections are separated by a horizontal line or rule.
Figure 7.1 – Displaying the Output of Using the Horizontal Rules