Rubriker är vanliga på de flesta webbsidor. I själva verket tenderar i stort sett alla textdokument att ha minst en rubrik så att du vet titeln på det du läser. Dessa rubriker kodas med hjälp av HTML rubrikelement - h1, h2, h3, h4, h5 och h6.
På vissa webbplatser kan du upptäcka att rubriker är kodade utan att använda dessa element. Istället kan rubriker använda stycken med specifika klassattribut som läggs till dem eller avdelningar med klasselement. Anledningen till att vi ofta hör om denna felaktiga praxis är att designern "inte gillar hur rubriker ser ut". Som standard visas rubrikerna i fetstil och de är större i storlek, särskilt h1- och h2-elementen som visas i mycket större teckenstorlek än resten av en sidas text. Tänk på att detta bara är standardutseendet för dessa element! Med CSSkan du få rubriken att se ut som du vill! Du kan ändra teckensnittsstorlek, ta bort fetstil och så mycket mer. Rubriker är det rätta sättet att koda en sidas rubriker. Här är några anledningar till varför.
Varför använda rubrikmärken snarare än divisioner
Detta är den bästa anledningen att använda rubriker och använda dem i rätt ordning (dvs. h1, sedan h2, sedan h3, etc.). Sökmotorer ge högsta vikt för text som ingår i rubriktaggar eftersom det finns ett semantiskt värde för den texten. Med andra ord, genom att märka din sidrubrik H1, säger du till sökmotorspindeln att det är sidans 1-fokus. H2-rubriker har tonvikt # 2 och så vidare.
Du behöver inte komma ihåg vilka klasser du använde för att definiera dina rubriker
När du vet att alla dina webbsidor kommer att ha en H1 som är fet, 2em och gul, kan du definiera det en gång i ditt formatmall och vara klar. 6 månader senare, när du lägger till en ny sida, lägger du bara till en H1-tagg högst upp på din sida, du har inte för att gå tillbaka till andra sidor för att ta reda på vilket stil-ID eller klass du använde för att definiera huvudrubriken och underrubrikerna.
Ge en stark sida
Konturer gör texten lättare att läsa. Det är därför de flesta amerikanska skolor lärde eleverna skriva en översikt innan de skriver uppsatsen. När du använder rubrikmärken i dispositionsformat har din text en tydlig struktur som blir mycket tydlig. Dessutom finns det verktyg som kan granska sidkonturen för att ge en översikt, och dessa är beroende av rubriktaggar för konturstrukturen.
Din sida kommer att ge mening även när stilarna är avstängda
Inte alla kan se eller använda stilark (och detta kommer tillbaka till nummer 1 - sökmotorerna visar innehållet (texten) på din sida, inte stilarket). Om du använder rubriktaggar gör du dina sidor mer tillgängliga eftersom rubrikerna ger information som a DIV-tagg skulle inte.
Det är användbart för skärmläsare och tillgänglighet till webbplatser
Korrekt användning av rubriker skapar en logisk struktur för ett dokument. Detta är vad skärmläsare kommer att använda för att "läsa" en webbplats för en användare med nedsatt syn, vilket gör din webbplats tillgänglig för personer med funktionsnedsättning.
Formatera texten och teckensnittet i dina rubriker
Det enklaste sättet att komma bort från det "stora, djärva och fula" problemet med rubriktaggar är att utforma texten så som du vill att de ska se ut. Faktum är att när du arbetar på en ny webbplats är det bäst att vanligtvis skriva styckena, h1, h2 och h3 stilar först. Stick med bara teckensnittsfamilj och storlek / vikt. Till exempel kan det här vara ett preliminärt formatmall för en ny webbplats (det här är bara några exempelstilar som kan användas):
Du kan ändra teckensnitt i din rubrik eller ändra textstilen eller till och med textfärgen. Alla dessa kommer att göra din "fula" rubrik till något mer levande och i linje med din design.
Gränser kan klä upp rubriker
Gränser är ett bra sätt att förbättra dina rubriker och är lätta att lägga till. Men glöm inte att experimentera med gränserna - du behöver inte en gräns på vardera sidan av rubriken. Och du kan använda mer än bara tråkiga gränser.
Vi lade till en övre och nedre kant i vårt provrubrik för att introducera några intressanta visuella stilar. Du kan lägga till gränser på vilket sätt du vill uppnå den designstil du vill ha.
Lägg till bakgrundsbilder i dina rubriker för ännu mer Pizazz
Många webbplatser har en rubrikdel högst upp på sidan som innehåller en rubrik - vanligtvis webbplatsens titel och en grafik. De flesta designers tänker på detta som två separata element, men du behöver inte. Om bilden bara finns för att dekorera rubriken, varför inte lägga till den i rubrikformaten?
Tricket till denna rubrik är att vi vet att vår bild är 90 pixlar lång. Så vi lade till stoppning längst ner i rubriken 90px (stoppning: 0,5 0 90px 0p;). Du kan spela med marginalerna, radhöjden och stoppningen så att texten i rubriken visas exakt var du vill ha den.
En sak att komma ihåg när du använder bilder är att om du har en lyhörd webbplats (vilket du borde) med en layout som ändras baserat på skärmstorlekar och enheter, kommer inte din rubrik alltid att ha samma storlek. Om du behöver din rubrik för att vara en exakt storlek kan det orsaka problem. Det är en av anledningarna till att vi i allmänhet undviker bakgrundsbilder i en rubrik, så coola som de ibland kan se ut.
Bildbyte i rubriker
Detta är en annan populär teknik för webbdesigners eftersom det låter dig skapa en grafisk rubrik och ersätta texten i rubriktaggen med den bilden. Detta är sanningsenligt en antik praxis från webbdesigners, som hade tillgång till mycket få teckensnitt och ville använda mer exotiska teckensnitt i sitt arbete. Ökningen av webbfonter har verkligen förändrat hur designers närmar sig webbplatser. Rubriker kan nu ställas in i en mängd olika teckensnitt och bilder med de inbäddade teckensnitten behövs inte längre. Som sådan hittar du bara CSS-bilder som ersätter rubriker på äldre webbplatser som ännu inte har uppdaterats till modernare praxis.
Redigerad av Jeremy Girard