Rubriker är vanliga på de flesta webbsidor. Faktum är att nästan alla textdokument tenderar att ha minst en rubrik så att du vet titeln på vad du läser. Dessa rubriker är kodade med hjälp av HTML-rubrikelementen - h1, h2, h3, h4, h5 och h6.
På vissa webbplatser kan du upptäcka att rubrikerna är kodade utan att använda dessa element. I stället kan rubriker använda punkter med specifika klassattribut som adderas till dem eller avdelningar med klasselement. Anledningen till att jag ofta hör om denna felaktiga övning är att designern "gillar inte hur rubrikerna ser ut". Som standard visas rubriker med fetstil och de är större i storlek, speciellt h1 och h2-elementen som visas i mycket större teckenstorlek än resten av en sides text. Tänk på det här är bara standardutseendet på dessa element! Med CSS kan du göra rubrik ser men du vill! Du kan ändra teckensnittstorlek, ta bort fetstil och så mycket mer. Rubriker är rätt sätt att koda en rubriks rubriker. Här är några anledningar till varför.
Varför använd rubrik Taggar snarare än DIV och Styling
Sökmotorer som rubrikstaggar
Det här ä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 ger den högsta viktningen till text som ingår i rubrikkoder eftersom det finns ett semantiskt värde för den texten. Med andra ord, genom att märka din sidtitel H1, berättar du sökmotorns spindel att det är sidans 1 fokus. H2-rubrikerna har # 2 betoning, 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, då kan du definiera den en gång i ditt stylesheet och bli gjort. 6 månader senare, när du lägger till en annan sida, lägger du bara till en H1-tagg högst upp på sidan, du behöver inte gå tillbaka till andra sidor för att ta reda på vilket stil-ID eller klass du använde för att definiera huvudmenyn rubrik och underrubriker.
De ger en stark sidsidan
Konturer gör text lättare att läsa. Därför lärde de flesta amerikanska skolorna eleverna att skriva en skiss innan de skriver papperet. När du använder rubrikkoder i ett konturformat, har din text en tydlig struktur som blir tydlig mycket snabbt. Dessutom finns det verktyg som kan granska sidsidan för att ge en sammanfattning, och de är beroende av rubriktaggar för konturstrukturen.
Din sida kommer att göra känsla även med stilen avstängd
Inte alla kan visa eller använda stilark (och det här kommer tillbaka till # 1 - sökmotorer visar innehållet på din sida, inte stilarken). Om du använder rubriktaggar gör du dina sidor mer tillgängliga eftersom rubrikerna ger information som en DIV-tagg inte skulle göra.
Det är användbart för skärmsläsare och tillgänglighet på webbplatsen
Korrekt användning av rubriker skapar en logisk struktur för ett dokument. Detta är vad skärmsläsare kommer att använda för att "läsa" en webbplats till en användare med synskadnad, vilket gör din webbplats tillgänglig för personer med funktionshinder.
Stil text och teckensnitt i dina rubriker
Det enklaste sättet att flytta bort från det "stora, djärva och fula" problemet med rubriktaggar är att stryka texten som du vill att dom ska se ut. Faktum är att man, när man arbetar på en ny webbplats, är bäst att typiskt skriva stycken, h1, h2 och h3-stilar första. Stick med bara typsnitt och storlek / vikt. Det här kan till exempel vara ett preliminärt stilark för en ny webbplats (det här är bara några exempel som kan användas):
Du kan ändra typsnittet på din rubrik eller ändra textstil eller ens textfärg. Alla dessa kommer att göra din "fula" rubrik till något mer levande och i linje med din design.
Borders 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å varje sida av rubriken. Och du kan använda mer än bara vanliga tråkiga gränser.
Jag lade till en övre och nedre gräns till mitt provrubrik för att presentera några intressanta visuella stilar. Du kan lägga till gränser på något sätt som du ville uppnå den designstil du vill ha.
Lägg till bakgrundsbilder till dina rubriker För ännu mer Pizazz
Många webbplatser har en rubrikrubrik längst upp på sidan som innehåller en rubrik - vanligtvis webbplatsens titel och en grafik. De flesta designers tycker om detta som två separata element, men du behöver inte. Om grafiken finns bara för att dekorera rubriken, varför inte lägga till det i rubriken stilar?
Tricket till denna rubrik är att jag vet att min bild är 90 pixlar lång. Så jag lagt till vaddering på botten av rubriken 90px (vaddering: 0,5 0 90px 0p;). Du kan spela med marginaler, linjehöjd och vaddering för att få texten i rubriken för att visa 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 (som du borde) med en layout som ändras baserat på skärmstorlekar och enheter, kommer din rubrik inte alltid att vara lika stor. Om du behöver din rubrik för att vara en exakt storlek kan detta orsaka problem. Det är en av anledningarna till att jag i allmänhet undviker bakgrundsbilder i en rubrik, så cool 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.Det här är sanningsenligt en antikvitetspraxis från webbdesigners, som hade tillgång till mycket få teckensnitt och ville använda mer exotiska teckensnitt i sitt arbete. Uppkomsten 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 inbyggda teckensnitten behövs inte längre. Som sådan kommer du bara hitta CSS-bilder ersättning för rubriker på äldre webbplatser som ännu inte har uppdaterats till mer moderna metoder.
Redigerad av Jeremy Girard den 9/6/17
