Horizontal dividers visually divide a document into different sections. This gives the viewer a neat and clear visual indication that one part of the document is over and another is about to begin. Horizontal dividers effectively divide text into smaller pieces, define the header and footer of the document, and also highlight the display of headings within the document.
<hr> tag:
This tag tells the browser to insert a horizontal divider that spans the entire window. Notice:
①The tag does not have an end tag
②A simple line break is enforced like the <br> tag
③ Causes paragraph alignment to revert to left alignment
The detailed properties are as follows:
Property description:
align property: Create left-aligned or right-aligned dividers. There are three possible property values: left\center\right. Note: those with a width smaller than the current text
The divider for this flow width is positioned relative to the window boundaries. The default alignment method is center.
color property: Set the color of the divider. By default, the color of the divider is the same as the background color of the document, just the background color of the recessed edge part
slightly deeper or slightly shallower. This concave 3D effect is lost when specifying colors.
n oshade attribute: make the horizontal line not appear shadow. The attribute value is noshade.
size and width properties: Set the height (up and down direction) and width (left and right direction) of the divider respectively.
Code example:
<body>
<title>Here is the title of the text</title>
<hr align="center" width="650" size="4" color="#006699" noshade="noshade"/>
</body>
Running results show:
