HR-taggen används i webbdokument för att visa en horisontell linje över sidan, eller kallas ibland en horisontell regel. Till skillnad från vissa taggar behöver den inte en stängningskod, så allt du behöver göra är typ för att infoga linjen.
Linjen sträcker sig över hela sidans bredd och följer med några standardattribut för att beskriva linjens tjocklek, plats och färg, men du kan ändra de inställningarna om du vill.
Du kan redigera egenskaperna hos den horisontella raden i ett HTML5-dokument genom att redigera sidans CSS. HTML4-horisontella linjer ändrades på HTML-sidan av dokumentet.
Är HR-taggen semantisk?
I HTML4 var HR-taggen inte semantisk. Semantiska element beskriver deras mening vad gäller webbläsaren och utvecklaren kan lätt förstå. HR-taggen var bara ett sätt att lägga till en enkel linje i ett dokument vart du ville ha det. Styling endast den övre eller nedre gränsen på det element där du ville att raden ska visas placerades en horisontell linje längst upp eller ner på elementet, men i allmänhet var HR-taggen lättare att använda för detta ändamål.
Från och med HTML5 blev HR-taggen semantisk och den definierar nu en tematisk paus på en punktnivå, vilket är en paus i flödet av innehållet som inte garanterar en ny sida eller annan starkare avgränsare - det är en ämnesbyte. Till exempel kan du hitta en HR-tagg efter en scenändring i en historia, eller det kan indikera en förändring av ämnet i ett referensdokument.
HR-attribut i HTML4 och HTML5
I HTML4 kan HR-taggen tilldelas enkla attribut inklusive justera, bredd, och noshade . Anpassningen kan ställas in på vänster , Centrum , höger eller rättfärdiga . Bredden justerar bredden på den horisontella linjen från standard 100 procent som sträcker linjen över sidan. De noshade attribut ger en solid färglinje istället för en skuggad färg.
Dessa attribut är föråldrade i HTML5. Du ska istället använda CSS för att ställa in dina HR-taggar i HTML5-dokument.
Detta är ett HTML5-exempel på att stilisera den horisontella raden för att vara 10 pixlar hög med inline CSS (stilar som läggs in direkt i dokumentet tillsammans med HTML):
Ett annat sätt att ställa in horisontella linjer i HTML5 är att använda en separat CSS-fil och länka till den från HTML-dokumentet. I CSS-filen skulle du skriva stilen så här: hr {höjd: 10px}
Samma effekt i HTML4 kräver att du lägger till ett attribut för HTML-innehållet. Så här ändrar du storleken på den horisontella linjen med storlek attribut:
Det finns mycket mer frihet vid utformning av horisontella linjer i CSS vs. HTML. Bara bredd och höjd Stilar är konsekventa över alla webbläsare, så det kan hända att det kan behövas ett försök och ett fel vid användning av andra stilar. Standardbredden är alltid 100 procent av bredden på webbsidan eller moderelementet. Regelens standardhöjd är två pixlar.
