How To Add Html Horizontal Rule Hr Break With Text Inside

Horizontal line in HTML

Horizontal line in HTML is non a hard concept to decode. Even so, before we become to that, let's examine the horizontal lines in general. You can add horizontal lines with the help of either CSS or HTML. How does it work? We are going to find the reply to that beneath.

As we all know, to carve up content we can go for horizontal lines. When it comes to CSS, you employ border rules; whereas in the instance of HTML nosotros use HR chemical element.

With the help of HTML chemical element, you volition be able to add semantic meanings to the underlines you have used. Moreover, CSS will assist y'all in dressing upward your underlines. Yous are going to acquire virtually both in this article. Moreover, nosotros intend to talk most using just CSS to add underlines to content and text.

To insert thematic interruption for content, you may utilise HTML HR tag. Every bit far as the older HTML specifications are concerned, Hr tag in HTML was meant to exist simply a horizontal rule with no semantic meaning attached to it. As of today, in that location is no visible intermission in the instance of the Hr tag. To arrive visible, you must make adjustments in CSS. This is an important aspect equally it provides better control to the designer to ensure that the theme of the site and HTML HR tag match. This way you can easily add HTML line separator.

Horizontal Line in HTML Using the 60 minutes Tag
Managing HTML HR Chemical element Size, Colour and Other Styles with CSS
Better Ways to Style HR Tag in HTML with CSSS
Transforming HTML Lines using the Hour Tag

Horizontal Line in HTML Using the 60 minutes Tag

HR tag in HTML is nothing new; it has been there since the very showtime as far every bit we can call up. We always relied on Hour tag whenever we needed to add together horizontal line in HTML or a horizontal rule. HR tag in HTML remained popular because nosotros can utilize this attribute in the following scenarios:

Easy Visual Understanding
Thematic Interruption
No Endmost Tag
Semantics

All that you have to do is to add tag to create a horizontal line. This volition draw a line beyond the whole width. Notwithstanding, it will be restricted to the container. It is piece of cake to remove underline CSS as well.

                                                                            <hr                    />

We used attributes to style the Hr element. However, thanks to HTML5, the Hr tag turned semantic. Alternatively, in other words, information technology intimates the browser that there is a paragraph-level thematic suspension. The same information can exist dispatched to an automated organisation or assistive reading engineering.

Hither we get a interruption in the menstruum of the content instead of a new page. Alternatively, in other words, it lets you know most a change in topic. For instance, y'all can introduce it at the cease of a section. You may introduce information technology right before a fresh sub-header.

Managing HTML 60 minutes Element Size, Color and Other Styles with CSS

Times have inverse; you just use CSS to mode the HTML Hr element. We no longer use attributes for the same. The beginning reward is that you utilise the right system to plant rendering rules. Moreover, it lets you reuse the rules as many times every bit you want. Your layout becomes more consistent as a effect. Last simply non least, your code becomes more than maintainable.

As far as the rendering of the line by the browser is concerned, it makes information technology possible past applying the styles to both border and groundwork styles. For the default line, border fashion is the master fashion. You cannot remove the border every bit information technology volition erase the line also.

                                                                            <hr                                                                  mode                                            ="                                              border                        :                        none;                                            "                                        >

Why is this of import?

Well, you lot are still able to send semantic information to the visual amanuensis with the assist of an invisible line. Most importantly, you can get rid of visual ataxia which may affect user experience.

Allow's take a look at the common HR tag's default styles beneath:

                                  hr                  {                  display                  :                  block;                  margin-end                  :                  auto;                  margin-start                  :                  motorcar;                  border                  :                  1px inset;                  overflow                  :                  hidden;                  margin-before                  :                  0.5em;                  margin-after                  :                  0.5em;                  }

Equally far as the width of the line is concerned, you can use the width holding to set it. Then you may utilize the following CSS dominion to position it at the middle.

                                  60 minutes                  {                  width                  :                  60%;                  margin-right                  :                  auto;                  margin-left                  :                  auto;                  }

Now, coming to the thickness of the line, you can adjust it by setting the value of summit. You may set the color with the help of the property named background-colour. Moreover, if yous wish to make the line semi-transparent, then you lot may use the property named opacity.

                                  hr                  {                  opcaity                  :                  0.six;                  width                  :                  350px;                  height                  :                  150px;                  margin-correct                  :                  auto;                  margin-left                  :                  motorcar;                  groundwork-color                  :#666;                  }

When information technology comes to a typical browser, it goes for a margin which is virtually half the width of a character. However, you can alter this value according to your preference. Every bit a result, your layout will be enriched with quality white infinite. This style you can easily distinguish content break.

                                  hour                  {                  width                  :                  80%;                  height                  :                  10px;                  edge                  :                  0 none;                  margin-correct                  :                  automobile;                  margin-left                  :                  car;                  margin-peak                  :                  80px;                  margin-bottom                  :90px;                  background-color                  :#555;                  }

This is merely the beginning. You lot tin play with a variety of style choices for your horizontal line in HTML likewise width and colour. Equally you tin can see, we have opted for an epitome of 5 xanthous stars for the background style for the horizontal line. We also made certain that it repeats on the x-axis.

Pro-tip: Nosotros recommend setting the background color to transparent. This will preclude you from accidentally revealing the color.

                                  .star-line                  {                  width                  :                  50%;                  acme                  :                  20px;                  border                  :                  none;                  margin                  :                  motorcar;                  margin-tiptop                  :                  5%;                  margin-bottom                  :                  5%;                  background-repeat                  :                  echo-x;                  background-position                  :                  centre;                  background-color                  :                  transparent;                  background-epitome                  :                  url(images/star.svg)                  ;                  }

When y'all play with the edge style, color and size, you brand the line look different. You lot will see a consistent effect in all the modernistic browsers out there. As you can see in this instance, you will find the edge as dashed, blood-red and 1px broad:

Meliorate Ways to Mode Hr Tag in HTML with CSSS

CSS gives you lot much flexibility, the possibilities are immense. All those groundwork rules tin can be practical on a horizontal line in HTML. It's an exciting proposition to play with the style.

Still, before we explore all those, allow's attempt a few unproblematic tricks in CSS. Hither in this example, we are going to turn the line into a dashed line.

Create Dashed Horizontal Line in HTML with CSS

                                  .dashed-border                  {                  width                  :                  50%;                  margin                  :                  auto;                  margin-elevation                  :                  5%;                  margin-bottom                  :                  five%;                  edge                  :                  3px dashed #1A85FD;                  }

Create Zig-Zag Line with HTML HR tag using CSS

Next upwardly, we are going to apply the stripe technique to the Zig-Zag line using HR tag. We will exist using linear-gradients here. First, we have cleared the border of the horizontal line HTML; also have fix 30px as size.

Yous can go for any value as per your requirement. However, yous need to keep in mind that the first 2 linear gradients should have half the elevation of the CSS horizontal line. Last but not least, you demand to set the size of the background.

Run into the Pen
Create Zig Zag Line with HTML HR Tag by Digamber (@singhdigamber)
on CodePen.

Transforming HTML Lines using the Hr Element

If y'all wish to play with your lines in HTML, then yous can turn to CSS3. Cheers to the CSS 3 transform holding, yous can change the look significantly. Equally far every bit a transformation on the HTML line element is considered, our pick is a rotation.

By choosing this transformation, you can make the HTML tag line slightly diagonal.

Create Slant Line in HTML using CSS3

See the Pen
Camber Line in HTML using CSS3 by Digamber (@singhdigamber)
on CodePen.

You tin can also turn the describe the slant line completely vertical using the same transformation.

Create Perpendicular or Up Line in HTML using CSS3

See the Pen
Perpendicular Line in HTML using CSS3 past Digamber (@singhdigamber)
on CodePen.

All the same, it is non recommended as information technology might lead to unnecessary disruptions to the layout. But, yes, it is interesting to learn that such transformations are possible.

Concluding Idea

Well, if you lot wish to add value to your web layouts, then lines can exist used for the same. The page layout enjoys the semantic pregnant provided by the HR Tag.

You lot can make all the customization in CSS. Moreover, you lot volition be quite impressed by the variety of crazy styles which can consequence in an bonny layout.