HR-tunnistetta käytetään Web-asiakirjoissa näyttääksesi vaakasuoran linjan koko sivulle tai joskus kutsutaan vaakasuoraksi. Toisin kuin jotkut tagit, tämä ei tarvitse sulkeutumista, joten sinun tarvitsee vain kirjoittaa tyyppi rivin lisääminen.
Viiva ulottuu koko sivun koko leveydelle ja sisältää joitain oletusominaisuuksia kuvaamaan rivin paksuutta, sijaintia ja väriä, mutta voit muuttaa näitä asetuksia, jos haluat.
Voit muokata horisontaalisen rivin ominaisuuksia HTML5-dokumentissa muokkaamalla sivun CSS: ää. HTML4-vaakasuoria viivoja muutettiin asiakirjan HTML-puolelle.
Onko HR-tunniste semanttinen?
HTML4: ssä HR-tunniste ei ollut semanttinen. Semanttiset elementit kuvaavat niiden merkitystä selaimessa ja kehittäjä voi helposti ymmärtää. HR -tunniste oli vain tapa lisätä yksinkertainen viiva asiakirjaan missä haluat. Suunnittele vain elementin ylä- tai alareunaa, jossa haluat linjan näkyvän, sijoittaa vaakasuoran viivan elementin yläosaan tai alaosaan, mutta yleensä HR-tunniste oli helpompi käyttää tähän tarkoitukseen.
HTML5: stä lähtien HR-tunnisteesta tuli semanttinen, ja siinä määritellään nyt kohtaustason temaattinen tauko, joka on keskeytys sisällön virrassa, joka ei takaa uutta sivua tai muuta vahvempaa erottelua - se on aiheen muutos. Esimerkiksi HR-tunniste voi olla tarinan aikana tapahtuneen muutoksen jälkeen tai se voi viitata aiheen muutokseen vertailutiedostossa.
HR-määritykset HTML4: ssä ja HTML5: ssä
HTML4: ssä HR-tagille voidaan antaa yksinkertaisia attribuutteja, mukaan lukien kohdistaa, leveys, ja noshade . Kohdistus voidaan asettaa vasen , keskusta , oikea tai perustella . Leveys säätää vaakasuoran viivan leveyttä oletusarvosta 100 prosenttia, joka laajentaa rivin sivulle. noshade attribuutti tekee värillisestä viivasta tumman värin sijasta.
Nämä attribuutit ovat vanhentuneita HTML5: ssa. Sen sijaan sinun pitäisi käyttää CSS-tyyliä HR-tunnisteiden tyylissä HTML5-asiakirjoissa.
Tämä on HTML5-esimerkki horisontaalisen rivin tyylistä 10 pikseliä korkeammaksi käyttämällä sisäistä CSS: tä (tyylit sijoitetaan suoraan dokumenttiin HTML: n kanssa):
Toinen tapa muodostaa vaakaviivat HTML5: ssä on käyttää erillistä CSS-tiedostoa ja linkittää sen HTML-dokumenttiin. CSS-tiedostossa kirjoitat muotoilun seuraavasti: hr {korkeus: 10px}
Sama vaikutus HTML4: ssä edellyttää, että lisäät attribuutin HTML-sisältöön. Näin muutat horisontaalisen rivin kokoa koko määrite:
CSS: n ja HTML: n välisiä horisontaalisia viivoja on paljon enemmän vapaata. Vain leveys ja korkeus tyylit ovat yhdenmukaisia kaikissa selaimissa, joten kokeiluja ja virheitä saattaa tarvita käytettäessä muita tyylejä. Oletusleveys on aina 100 prosenttia web-sivun tai vanhemman elementin leveydestä. Säännön oletuskorkeus on kaksi pikseliä.
