Attributen
De attributen van dit element omvatten de globale attributen.
align Verouderd Niet-standaard | Stelt de uitlijning van de lijn op de pagina in. Als er geen waarde is opgegeven, is de standaardwaarde left. |
|---|---|
color Verouderd Niet-standaard | Stelt de kleur van de lijn in via een kleurnaam of hexadecimale waarde. |
noshade Verouderd Niet-standaard | Stelt de lijn zo in dat deze geen schaduw heeft. |
size Verouderd Niet-standaard | Stelt de hoogte van de lijn in pixels in. |
width Verouderd Niet-standaard | Stelt de lengte van de lijn op de pagina in via een pixel- of percentagewaarde. |
Voorbeeld
Thematische scheiding tussen paragrafen
Het volgende voorbeeld voegt een thematische scheiding toe tussen elementen op paragraafniveau.
HTML
HTML
<article>
<p>
This is the first paragraph of text. This is the first paragraph of text.
This is the first paragraph of text. This is the first paragraph of text.
</p>
<hr />
<p>
This is the second paragraph of text. This is the second paragraph of text.
This is the second paragraph of text. This is the second paragraph of text.
</p>
</article>Resultaat
Resultaat in de browser
Thematische scheiding tussen lijstitems
De <hr>-tag kan binnen een lijstitem worden geplaatst voor visuele scheiding, om een scheiding tussen secties van een lijst te creëren.
HTML
HTML
<ul>
<li>Cut</li>
<li>Copy</li>
<li>Paste</li>
<li role="presentation"><hr /></li>
<li>Delete</li>
</ul>CSS
ul {
list-style-type: none;
display: flex;
flex-direction: column;
gap: 0.25rem;
width: 100px;
margin: 0.75rem;
padding: 0.75rem;
border: 1px solid lightgrey;
}
hr {
margin-block: 0.2rem;
color: lightgrey;
}Resultaat
Resultaat in de browser
Thematische scheiding tussen select-opties
Het <hr>-element is toegestaan binnen een <select>-element om een visuele scheiding te creëren tussen <option>-elementen.
HTML
HTML
<select>
<option value="">--Choose an option--</option>
<hr />
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<hr />
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
</select>Resultaat
Resultaat in de browser
Technische samenvatting
| Content categories | Flow content. |
|---|---|
| Toegestane inhoud | Geen; het is een void element. |
| Weglaten van tags | Moet een begintag hebben en mag geen eindtag hebben. |
| Toegestane bovenliggende elementen |
|
| Impliciete ARIA-rol | separator |
| Toegestane ARIA-rollen |
presentation of none
|
| DOM-interface | HTMLHRElement |