HTML <hr> -tag
Voorbeeld
Gebruik de tag <hr> om thematische wijzigingen in de inhoud te definiëren:
<h1>The Main Languages of the Web</h1>
<p>HTML is the standard markup
language for creating Web pages. HTML describes the structure of a Web page,
and consists of a series of elements. HTML elements tell the browser how to
display the content.</p>
<hr>
<p>CSS is a language that
describes how HTML elements are to be displayed on screen, paper, or in
other media. CSS saves a lot of work, because it can control the layout of
multiple web pages all at once.</p>
<hr>
<p>JavaScript is the
programming language of HTML and the Web. JavaScript can change HTML content
and attribute values. JavaScript can change CSS. JavaScript can hide and
show HTML elements, and more.</p>
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De <hr>tag definieert een thematische breuk in een HTML-pagina (bijvoorbeeld een verschuiving van onderwerp).
Het <hr>element wordt meestal weergegeven als een horizontale regel die wordt gebruikt om inhoud te scheiden (of een wijziging te definiëren) in een HTML-pagina.
Browserondersteuning
| Element | |||||
|---|---|---|---|---|---|
| <hr> | Yes | Yes | Yes | Yes | Yes |
Algemene kenmerken
De <hr>tag ondersteunt ook de Global Attributes in HTML .
Gebeurteniskenmerken
De <hr>tag ondersteunt ook de Event Attributes in HTML .
Meer voorbeelden
Voorbeeld
Lijn een <hr> element uit (met CSS):
<hr style="width:50%;text-align:left;margin-left:0">
Voorbeeld
Een noshaded <hr> (met CSS):
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
Voorbeeld
Stel de hoogte van een <hr> element in (met CSS):
<hr style="height:30px">
Voorbeeld
Stel de breedte van een <hr> element in (met CSS):
<hr style="width:50%">
Gerelateerde pagina's
HTML DOM-referentie: HR-object
Standaard CSS-instellingen
De meeste browsers geven het <hr>element weer met de volgende standaardwaarden:
Voorbeeld
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}