How to use the horizontal line element in HTML
Last updated on
The horizontal (<hr />) rule in HTML is also known as a section break or a thematic break. A thematic break is when you decide to say that there is a change of topic and you want to visually break up the content to mark the separation of content.
The use of this element should be used only for semantic purposes, rather than for purely visual or aesthetic purposes. If we want to create a separation between content for visual purposes we should use CSS properties such as the border property.
The element is known as an unpaired tag, which is the tag that is single with no closing tag. An unpaired tag is also known as a non-container tag because it does not contain any content such as a break tag or in our case the horizontal rule tag.
Attributes
The hr tag does come with some attributes to do basic styling which are:
- Align: if the line is smaller in width than the parent container we can set the align to left, center or right within the parent container
- Color: set the color of the line
- Size: set in pixels you can say what the height is of the line
- Noshade: a true or false boolean value where you can say whether there is shade applied or not to the default styling
- Width: set the width of the line, by default it is 100% width of its parent element
However, best practice today would recommend you use CSS for styling your horizontal rules rather than through attributes. This would also make it easier to maintain the styling as you can update it in your CSS once and it will be applied to all of the tags across the site rather than updating each attribute.
Example of the horizontal line
The horizontal line should be placed out of other HTML elements, for example if we had 2 paragraphs then the horizontal line should be placed after the closing of the first paragraph and before the opening of the second paragraph, as shown below.
<p>This is our first paragraph of content talking about one thing</p>
<hr />
<p>This is our second paragraph of content talking about a different thing</p>Accessibility of the horizontal rule
As we have talked about, the section break element is meant to be used for more than just a visual cue of breaking up content. When processed by a screen reader it is often announced as a horizontal splitter. If you’re using the rule as only a visual cue that there is a change in theme not semantically then you can choose to hide it from screen readers using the aria-hidden="true" attribute and value.
Differences between the section element and the horizontal line element
There is perhaps a slight overlap between the use of the section and the horizontal line. Semantically they both mean similar things, they are a way to define different parts of content on a web page. Visually the section element has no styling whilst the section break does have a visible line.
We could see the section break as a way of breaking up content only. The content could be related, but it is a different theme or subject that it is talking about so we introduce the line break as a way to define that change in content.
Whilst the section element can be used more freely to say not only content but in general we can break up different parts of a web page by wrapping it in section elements. Where we want to avoid using section elements is when we have a better way to describe what is within that section, for example if you had navigation links you would want to use the <nav> element rather than <section> element.
Where did the thematic break come from?
In literature the thematic break is known as a dinkus. You will see in some books a symbol is used to break up sections of content. A dinkus is used to make different sections or scenes clear. Rather than creating a whole new chapter a dinkus is a signal to the user that a transition is about to happen and can happen in both fiction and in nonfiction literature. Unlike our horizontal line in HTML, a dinkus by default is often shown as three asterisks together.
Summary
- Horizontal rule should be used for more than an aesthetic purpose only
- We can use attributes to style our section break but best practice suggests using CSS instead to set color, width, height and other styling needs
- We can create a horizontal line using the
<hr />element - Screen readers often announce a section break and we can use the aria-hidden=”true” attribute and value to not announce it
- In other media the thematic break is also known as a dinkus
Written by
Senior Interaction Designer and Co-Author to Tiny CSS Projects