Vízszintes vonalak hozzáadása az oldal tartalmának feldarabolásához

A HR-címke használata egy webes dokumentumhoz

A HR címkét hagyományosan egy vízszintes vonal (néha horizontális szabály) hozzáadására használják egy webes dokumentumhoz. Egy vonal hozzáadásához írja be:


, hogy utasítsa a böngészőt arra, hogy vonalat húzza az oldal vagy a szülőelem teljes szélességében az alapértelmezett beállítások használatával. Ez az alapértelmezett vonal egyszerű és gyakran szolgálja annak célját, de attribútumok rendelhetők hozzá a vonal méretének, színének és pozíciójának megváltoztatásához más jellemzők között. A vízszintes vonal megjelenésének módosítására szolgáló módszer a HTML4 és a HTML5 között változott.

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 a tartalom áramlásának megszakadása, amely nem garantál egy új oldalt vagy más erősebb határolót - ez a 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ímkét egyszerű attribútumokhoz lehet hozzárendelni, beleértve az "align", "width" és "noshade" értékeket. Az igazítás balra, középre, jobbra vagy igazolható. A szélesség beállította a vízszintes vonal szélességét az alapértelmezett 100 százalékos értéktől, ami kiterjesztette a sort az oldalon. A noshade-attribútum egy színes színű vonalat eredményezett árnyékos szín helyett. Ezek a tulajdonságok elavulttá válnak a HTML5-ben, és a HTML5-ben kell használnia a CSS-t. Például a HTML 4:


10 pixel magasságú vízszintes vonalat generál.

A CSS HTML5 használatával a 10 képpontos vízszintes vonal stílusos:


A CSS használatával a vízszintes vonal stílusához sok a szabadság a weboldal tervezésekor. A HR címke cikkében számos stílust találhat a HR címkékhez. Csak a szélesség és a magasság stílusai minden böngészőben konzisztensek, 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.