Overskrifter er vanlige på de fleste nettsider. Faktisk har nesten alle tekstdokumenter en tendens til å ha minst ett overskrift, slik at du vet tittelen på det du leser. Disse overskriftene er kodet ved hjelp av HTML-overskriftelementene - h1, h2, h3, h4, h5 og h6.
På enkelte nettsteder kan du finne at overskriftene er kodet uten å bruke disse elementene. I stedet kan overskrifter bruke avsnitt med bestemte klasseattributter lagt til dem, eller divisjoner med klasseelementer. Grunnen til at jeg ofte hører om denne feilaktige øvelsen er at designeren "liker ikke hvordan overskriftene ser ut". Som standard vises overskrifter i fet skrift og de er større i størrelse, spesielt h1 og h2 elementene som vises i mye større skriftstørrelse enn resten av en sides tekst. Husk dette er bare standard utseendet på disse elementene! Med CSS kan du gjøre overskriften se men du vil! Du kan endre skriftstørrelsen, fjerne fet skrift og så mye mer. Overskrifter er den riktige måten å kode en overskrift på. Her er noen grunner til hvorfor.
Hvorfor bruk overskriftstegn i stedet for DIV og Styling
Søkemotorer som overskriftstegn
Dette er den beste grunnen til å bruke overskrifter, og bruk dem i riktig rekkefølge (dvs. h1, deretter h2, deretter h3, etc.). Søkemotorer gir høyest vekting på tekst som er inkludert i overskriftskoder fordi det er en semantisk verdi for den teksten. Med andre ord, ved å merke sidetittelen H1, forteller du søkemotorens edderkopp at det er fokus på siden 1. H2-overskriftene har # 2 vekt, og så videre.
Du trenger ikke å huske hvilke klasser du brukte til å definere overskriftene dine
Når du vet at alle websidene dine skal ha en H1 som er fet, 2em og gul, så kan du definere det en gang i stilarket og bli gjort. 6 måneder senere, når du legger til en annen side, legger du bare til et H1-tag øverst på siden din, du trenger ikke å gå tilbake til andre sider for å finne ut hvilken stil-ID eller klasse du pleide å definere hovedmenyen overskrift og underhoder.
De gir en sterk sideoversikt
Outlines gjør tekst enklere å lese. Derfor lærte de fleste amerikanske skoler elevene å skrive en oversikt før de skrev avisen. Når du bruker overskriftskoder i et omrissformat, har teksten en tydelig struktur som blir tydelig veldig raskt. I tillegg er det verktøy som kan gjennomgå sideoversikten for å gi en oppsummering, og disse er avhengige av overskriftskoder for konturstrukturen.
Din side vil gjøre mening selv med stilene slått av
Ikke alle kan se eller bruke stilark (og dette kommer tilbake til # 1 - søkemotorer ser innholdet (teksten) på siden din, ikke stilarkene). Hvis du bruker overskriftskoder, gjør du sidene dine mer tilgjengelige fordi overskriftene gir informasjon som en DIV-tag ikke ville.
Det er nyttig for skjermlesere og tilgang til nettstedet
Riktig bruk av overskrifter skaper en logisk struktur for et dokument. Dette er hva skjermlesere vil bruke til å "lese" et nettsted til en bruker med synshemming, slik at nettstedet ditt er tilgjengelig for funksjonshemmede.
Stil teksten og teksten til overskriftene dine
Den enkleste måten å bevege seg bort fra det store, dristige og stygge problemet med overskriftskoder er å style teksten slik du vil at de skal se ut. Faktisk, når du arbeider på et nytt nettsted, er det best å skrive skrivehøyttaler, h1, h2 og h3-stiler først. Pinne med bare skrifttypefamilie og størrelse / vekt. Dette kan for eksempel være et foreløpig stilark for et nytt nettsted (disse er bare noen eksempler på stilarter som kan brukes):
Du kan endre fonter på overskriften eller endre tekststil eller til og med tekstfargen. Alle disse vil slå din "stygge" overskrift til noe mer levende og i tråd med designen din.
Grenser kan kle på overskrifter
Grenser er en fin måte å forbedre overskriftene dine og er enkle å legge til. Men ikke glem å eksperimentere med grensene - du trenger ikke en grense på hver side av overskriften. Og du kan bruke mer enn bare enkle kjedelige grenser.
Jeg la en topp og nederste kant til min eksemplar overskrift for å introdusere noen interessante visuelle stiler. Du kan legge til grenser på noen måte som du ønsket å oppnå design stilen du vil ha.
Legg til bakgrunnsbilder til overskriftene dine for enda mer Pizazz
Mange nettsteder har en overskriftsseksjon øverst på siden som inneholder en overskrift - vanligvis nettstedets tittel og en grafikk. De fleste designere tenker på dette som to separate elementer, men du trenger ikke. Hvis grafikken er der bare for å dekorere overskriften, så hvorfor ikke legge den til overskriften stiler?
Trikset til denne overskriften er at jeg vet at bildet mitt er 90 piksler høyt. Så la jeg polstring til bunnen av overskriften på 90px (polstring: 0,5 0 90px 0p;). Du kan spille med margene, linjehøyde og polstring for å få teksten til overskriften til å vise nøyaktig hvor du vil ha den.
En ting å huske når du bruker bilder er at hvis du har et responsivt nettsted (som du burde) med et oppsett som endres basert på skjermstørrelser og enheter, vil overskriften din ikke alltid være den samme størrelsen. Hvis du trenger overskriften til å være en eksakt størrelse, kan det føre til problemer. Det er en av grunnene til at jeg generelt unngå bakgrunnsbilder i en overskrift, så kult som de noen ganger kan se.
Bildeutskifting i overskrifter
Dette er en annen populær teknikk for webdesignere fordi den lar deg lage en grafisk overskrift og erstatte teksten til overskriften taggen med bildet.Dette er sannelig en antiqued praksis fra webdesignere, som hadde tilgang til svært få skrifter og ønsket å bruke mer eksotiske skrifter i deres arbeid. Stigningen av webfonter har virkelig forandret hvordan designere nærmer seg nettsteder. Overskrifter kan nå settes i et bredt spekter av skrifter og bilder med de fonter som er innebygd, behøves ikke lenger. Som sådan vil du bare finne CSS bilder utskifting for overskrifter på eldre nettsteder som ennå ikke er oppdatert til mer moderne praksis.
Redigert av Jeremy Girard den 9/6/17
