A HR-címkét a webes dokumentumokban használják, hogy vízszintes vonalat jelenítsenek meg az oldalon, vagy néha vízszintes szabálynak. Néhány címkével ellentétben ez nem igényel zárócímkét, ezért csak a típusra van szükség a vonal beillesztéséhez.
A vonal az oldal teljes szélességében húzódik, és néhány alapértelmezett attribútumot tartalmaz a vonal vastagságának, helyének és színének leírására, de tetszés szerint módosíthatja ezeket a beállításokat.
A vízszintes vonal jellemzőit HTML5 dokumentumban szerkesztheti az oldal CSS szerkesztésével. A HTML4 vízszintes vonalak megváltoztak a dokumentum HTML oldalán.
A HR-címke szemantika?
A HTML4-ben a HR-címke sematikus volt. A szemantikus elemek a böngésző szempontjából értelmezik jelentőségüket, és a fejlesztő könnyen érthető. A HR címke egyszerűen csak egy egyszerű vonalat ad hozzá egy dokumentumhoz bárhonnan is. Csak az elem felső vagy alsó szegélyének kialakítása, ahol a vonal megjelenni kívánt, vízszintes vonalat helyez el az elem tetején vagy alján, de általában a HR címkét könnyebb használni erre a célra.
A HTML5-ről kezdve a HR-címke szemantikussá vált, és most egy bekezdésszintű tematikus szünetet határoz meg, amely megszakítja a tartalom áramlását, amely nem garantál egy új oldalt vagy más erősebb határolót - ez egy téma megváltozása. Például egy HR-címkét találhat egy történetváltás után egy történetben, vagy utalhat egy témakör megváltoztatására egy referenciadokumentumban.
HR-attribútumok a HTML4 és HTML5-ben
A HTML4-ben a HR-címkehez egyszerű attribútumok is rendelhetők igazítás, szélesség, és noshade . Az igazítás beállítható balra , központ , jobb vagy indokol . A szélesség beállítja a vízszintes vonal szélességét az alapértelmezett 100 százalékos értéktől, amely kiterjeszti a vonalat az oldalon. A noshade attribútum egy színes színű vonalat hoz létre árnyékolt szín helyett.
Ezek a tulajdonságok elavultak a HTML5-ben. Használd inkább a CSS-t a HR-címkék HTML5 dokumentumokban történő stílusához.
Ez egy HTML5 példa arra, hogy a vízszintes vonalat 10 képpontos magasra kell formázni az inline CSS használatával (közvetlenül a dokumentumba illesztett stílusok a HTML mellett):
Egy másik módja a vízszintes vonalak stilizálására a HTML5-ben egy különálló CSS-fájl használata, és a HTML-dokumentumhoz való link. A CSS-fájlban a következő stílusjegyet írja: hr {magasság: 10px}
Ugyanez a hatás a HTML4-ben azt jelenti, hogy hozzá kell adnia egy attribútumot a HTML tartalomhoz. A vízszintes vonal méretének módosítása a méret tulajdonság:
Sokkal nagyobb a szabadság a vízszintes vonalak megjelenítésében a CSS-ben a HTML-hez képest. Csak a szélesség és magasság a stílusok konzisztensek az összes böngészőben, ezért némi próba és hiba szükség lehet más stílusok használatára. Az alapértelmezett szélesség mindig a weboldal vagy a szülőelem szélességének 100 százaléka. A szabály alapértelmezett magassága két képpont.
