Overskrifter er vanlige på de fleste websider. Faktisk har stort sett alle tekstdokumenter en tendens til å ha minst en overskrift slik at du vet tittelen på det du leser. Disse overskriftene er kodet ved hjelp av HTML overskriftselementer - h1, h2, h3, h4, h5 og h6.
På noen nettsteder kan du oppdage at overskriftene er kodet uten å bruke disse elementene. I stedet kan overskrifter bruke avsnitt med spesifikke klasseattributter lagt til dem, eller inndelinger med klasseelementer. Grunnen til at vi ofte hører om denne uriktige fremgangsmåten er at designeren "ikke liker hvordan overskrifter ser ut". Som standard vises overskriftene 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 tekst på siden. Husk at dette bare er standardutseendet til disse elementene! Med CSS, kan du få overskriften til å se ut som du vil! Du kan endre skriftstørrelsen, fjerne fet skrift og mye mer. Overskrifter er den riktige måten å kode overskriftene på en side. Her er noen grunner til hvorfor.
Hvorfor bruke overskriftmerker enn divisjoner
Dette er den beste grunnen til å bruke overskrifter, og bruke dem i riktig rekkefølge (dvs. h1, deretter h2, deretter h3, etc.). Søkemotorer gi den høyeste vektingen til teksten som er inkludert i overskriftskoder, fordi det er en semantisk verdi for den teksten. Med andre ord, ved å merke sidetittelen H1, forteller du søkemotoren edderkoppen at det er nummer 1-fokus på siden. H2-overskrifter 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 vil ha en H1 som er fet, 2em og gul, kan du definere det en gang i stilarket ditt og være ferdig. 6 måneder senere, når du legger til en ny side, legger du bare til en H1-tag øverst på siden din, det har du ikke for å gå tilbake til andre sider for å finne ut hvilken stil-ID eller klasse du brukte til å definere hovedoverskrift og underhoder.
Gi en sterk sideskisse
Konturer gjør tekst lettere å lese. Derfor lærte de fleste amerikanske skoler studenter å skrive en oversikt før de skriver papiret. Når du bruker overskriftskoder i disposisjonsformat, har teksten en tydelig struktur som blir tydelig veldig raskt. I tillegg er det verktøy som kan gjennomgå sidens disposisjon for å gi en oversikt, og disse er avhengige av overskriftskoder for disposisjonsstrukturen.
Siden din vil gi mening selv når stilene er slått av
Ikke alle kan se eller bruke stilark (og dette kommer tilbake til nr. 1 - søkemotorer viser innholdet (teksten) på siden din, ikke stilarkene). Hvis du bruker overskriftskoder, gjør du sidene dine mer tilgjengelige fordi overskriftene gir informasjon som a DIV-tag vil ikke.
Det er nyttig for skjermlesere og tilgjengelighet til nettsteder
Riktig bruk av overskrifter skaper en logisk struktur for et dokument. Dette er hva skjermlesere vil bruke til å "lese" et nettsted for en bruker med nedsatt synsevne, noe som gjør nettstedet ditt tilgjengelig for funksjonshemmede.
Stil tekst og skrift i overskriftene dine
Den enkleste måten å komme seg bort fra det "store, dristige og stygge" problemet med overskriftskoder, er å utforme teksten slik du vil at de skal se ut. Når du jobber på et nytt nettsted, er det best å skrive avsnittene, h1, h2 og h3 først. Hold deg til bare fontfamilien og størrelse / vekt. Dette kan for eksempel være et foreløpig stilark for et nytt nettsted (dette er bare noen eksempler på stiler som kan brukes):
Du kan endre skrifttyper av overskriften eller endre tekststilen eller til og med tekstfargen. Alle disse vil gjøre din "stygge" overskrift til noe mer levende og i tråd med designet ditt.
Grenser kan kle på seg overskrifter
Grenser er en fin måte å forbedre overskriftene dine på og er enkle å legge til. Men ikke glem å eksperimentere med grensene - du trenger ikke en kant på hver side av overskriften. Og du kan bruke mer enn bare kjedelige grenser.
Vi la til en øvre og nedre kant i vår overskrift for å introdusere noen interessante visuelle stiler. Du kan legge til grenser på hvilken som helst måte du vil oppnå den designstilen du ønsker.
Legg til bakgrunnsbilder i overskriftene dine for enda mer Pizazz
Mange nettsteder har en topptekst ø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 bare er for å dekorere overskriften, hvorfor ikke legge den til overskriftsstilene?
Trikset med denne overskriften er at vi vet at bildet vårt er 90 piksler høyt. Så vi la til polstring i bunnen av overskriften på 90 px (polstring: 0,5 0 90px 0p;). Du kan leke med margene, linjehøyden og polstringen for å få teksten i overskriften til å vise nøyaktig hvor du vil ha den.
En ting å huske når du bruker bilder, er at hvis du har en responsiv nettside (som du burde) med et oppsett som endres basert på skjermstørrelser og enheter, vil ikke overskriften din alltid ha samme størrelse. Hvis du trenger at overskriften din skal være nøyaktig, kan dette føre til problemer. Det er en av grunnene til at vi generelt unngår bakgrunnsbilder i en overskrift, så kule som de noen ganger kan se ut.
Bildebytte i overskrifter
Dette er en annen populær teknikk for webdesignere fordi den lar deg lage en grafisk overskrift og erstatte teksten til overskriftskoden med det bildet. Dette er sannferdig en antikk praksis fra webdesignere, som hadde tilgang til svært få skrifttyper og ønsket å bruke mer eksotiske skrifter i arbeidet sitt. Fremveksten av nettfonter har virkelig endret hvordan designere nærmer seg nettsteder. Overskrifter kan nå angis i et bredt utvalg av skrifttyper, og bilder med de innebygde skriftene er ikke lenger nødvendige. Som sådan vil du bare finne CSS-bilder som erstatning for overskrifter på eldre nettsteder som ennå ikke er oppdatert til mer moderne praksis.
Redigert av Jeremy Girard