See the complete list of tags for Cambridge IGCSE.
The <hr> (horizontal rule) tag creates a horizontal line across the browser portal. In older versions of HTML, you will see <hr /> quite frequently. The HTML5 version of the tag is <hr>, however, HTML5 offers so many alternatives that it is now seldom seen. The <hr> tag is one of the very few tags that does not work as a pair.
In this post:
Required knowledge:
Syntax
A block-level element that fills 100% of the width of its container by default.
<hr>
Use
“The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).” [1]
Codepen
The <hr> tag can be styled in HTML, or (preferably) in CSS. See the Codepen below:
See the Pen HTML’s horizontal rule by David Fox (@foxbeefly) on CodePen.
Read about the dinkus for more!
Alternatives
You could employ almost any decorative element to do the job.
❧
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
✁———————————————-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
And even fancier ideas
Have a look at this post: Creating fancy Horizontal Rule lines – Share & showcase – Obsidian Forum [4]
References:
- W3schools. (no date) HTML <hr> Tag. Available at: https://www.w3schools.com/tags/tag_hr.asp (Accessed: 13 November 2023).
- W3schools. (No date) CSS Border Width. Available at: https://www.w3schools.com/css/css_border_width.asp (Accessed: 13 November 2023).
- W3schools. (no date) HTML Unicode Dingbats. Available at: https://www.w3schools.com/charsets/ref_utf_dingbats.asp (Accessed: 15 November 2023).
- FireIsGood, JimK, Obsidian Forum. (2023) Creating fancy Horizontal Rule lines. Available at: https://forum.obsidian.md/t/creating-fancy-horizontal-rule-lines/63700 (Accessed: 28 June 2024).