The horizontal (<hr />) rule in HTML is also referred to as a bit break or a thematic break. A thematic break is once you resolve to say that there’s a change of subject and also you wish to visually break up the content material to mark the separation of content material.
Using this aspect must be used just for semantic functions, slightly than for purely visible or aesthetic functions. If we wish to create a separation between content material for visible functions we should always use CSS properties such because the border property.
The aspect is named an unpaired tag, which is the tag that’s single with no closing tag. An unpaired tag is also referred to as a non-container tag as a result of it doesn’t include any content material equivalent to a break tag or in our case the horizontal rule tag.
Attributes
The hr tag does include some attributes to do fundamental styling that are:
- Align: if the road is smaller in width than the mum or dad container we will set the align to left, heart or proper inside the mum or dad container
- Coloration: set the colour of the road
- Dimension: set in pixels you possibly can say what the peak is of the road
- Noshade: a real or false boolean worth the place you possibly can say whether or not there may be shade utilized or to not the default styling
- Width: set the width of the road, by default it’s 100% width of its mum or dad aspect
Nevertheless, greatest follow immediately would advocate you employ CSS for styling your horizontal guidelines slightly than via attributes. This might additionally make it simpler to take care of the styling as you possibly can replace it in your CSS as soon as and will probably be utilized to the entire tags throughout the positioning slightly than updating every attribute.
Instance of the horizontal line
The horizontal line must be positioned out of different HTML parts, for instance if we had 2 paragraphs then the horizontal line must be positioned after the closing of the primary paragraph and earlier than the opening of the second paragraph, as proven beneath.
<p>That is our first paragraph of content material speaking about one factor</p>
<hr />
<p>That is our second paragraph of content material speaking a couple of totally different factor</p>Accessibility of the horizontal rule
As now we have talked about, the part break aspect is supposed for use for greater than only a visible cue of breaking apart content material. When processed by a display reader it’s usually introduced as a horizontal splitter. Should you’re utilizing the rule as solely a visible cue that there’s a change in theme not semantically then you possibly can select to cover it from display readers utilizing the aria-hidden="true" attribute and worth.
Variations between the part aspect and the horizontal line aspect
There’s maybe a slight overlap between using the part and the horizontal line. Semantically they each imply related issues, they’re a approach to outline totally different components of content material on an internet web page. Visually the part aspect has no styling while the part break does have a visual line.
We might see the part break as a manner of breaking apart content material solely. The content material may very well be associated, however it’s a totally different theme or topic that it’s speaking about so we introduce the road break as a approach to outline that change in content material.
While the part aspect can be utilized extra freely to say not solely content material however generally we will break up totally different components of an internet web page by wrapping it in part parts. The place we wish to keep away from utilizing part parts is when now we have a greater approach to describe what’s inside that part, for instance should you had navigation hyperlinks you’d wish to use the <nav> aspect slightly than <part> aspect.
The place did the thematic break come from?
In literature the thematic break is named a dinkus. You will notice in some books an emblem is used to interrupt up sections of content material. A dinkus is used to make totally different sections or scenes clear. Reasonably than creating an entire new chapter a dinkus is a sign to the consumer {that a} transition is about to occur and may occur in each fiction and in nonfiction literature. Not like our horizontal line in HTML, a dinkus by default is commonly proven as three asterisks collectively.
Abstract
- Horizontal rule must be used for greater than an aesthetic objective solely
- We will use attributes to fashion our part break however greatest follow suggests utilizing CSS as an alternative to set colour, width, peak and different styling wants
- We will create a horizontal line utilizing the
<hr />aspect - Display screen readers usually announce a bit break and we will use the aria-hidden=”true” attribute and worth to not announce it
- In different media the thematic break is also referred to as a dinkus
Written by
Michael Gearon is a Senior Interplay Designer at Authorities Digital Service (GDS) in Cardiff. Michael Gearon is likely one of the authors of The Tiny CSS Tasks e-book, revealed by Manning Publications. Beforehand Mike was a product designer on the GoCo Group together with GoCompare, MyVoucherCodes and WeFlip. As properly working for manufacturers in South Wales like BrandContent and HEOR.
