To visually separate two sections from each other, a dividing line, for example, could be a good idea. That’s why you can find out here how you can easily create a horizontal line with HTML.
How to make a horizontal line in HTML
For the separator line, you only need the following HTML element in HTML: <hr>
The “hr” stands for “horizontal ruler”. The <hr> can basically be installed anywhere in the <body> and does not require a closing element.
Example:
This is a text above the dividing line
The text below
<p>Dies ist ein Text oberhalb der Trennlinie</p>
<hr>
<p>Der Text unterhalb</p>Change the appearance of the horizontal line
Of course, the appearance of the HTML horizontal line can be changed using CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here .. As with any other HTML element, we use the style attribute to define the CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here . code.
The HTML attributes size, color, width, align and noshade should no longer be used because they are obsolete and are no longer supported in HTML5. Instead, the appearance should be defined using CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here ..
Change color
The color of the line can be changed with the CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here . instruction border-color
Example 1:
<hr style="border-color: green;">Example 2:
<hr style="border-color: #ff0000;">Change height
The height of the line can be changed with the CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here . instruction border-width
Example 1:
<hr style="border-width: 5px;">
Example 2:
<hr style="border-width: 20px;">
Change width
The width of the line can be changed with the CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here . instruction width.
Example 1:
<hr style="width: 50px;">Example 2:
<hr style="border-width: 80%;">Dieser Beitrag ist auch verfügbar auf:
Deutsch (German)
Skip to content