Overskrifter er almindelige på de fleste websider. Faktisk har stort set ethvert tekstdokument tendens til at have mindst en overskrift, så du kender titlen på det, du læser. Disse overskrifter er kodet ved hjælp af HTML overskriftelementer - h1, h2, h3, h4, h5 og h6.
På nogle websteder kan du finde ud af, at overskrifter er kodet uden at bruge disse elementer. I stedet kan overskrifter muligvis bruge afsnit med specifikke klasseattributter tilføjet til dem eller divisioner med klasseelementer. Årsagen til, at vi ofte hører om denne forkerte praksis, er, at designeren "ikke kan lide, hvordan overskrifter ser ud". Overskrifter vises som standard med fed skrift, og de er større i størrelse, især h1- og h2-elementerne, der vises i meget større skriftstørrelse end resten af en sides tekst. Husk, at dette kun er standardudseendet på disse elementer! Med CSS, kan du få overskriften til at se ud, som du vil! Du kan ændre skriftstørrelsen, fjerne fed skrift og meget mere. Overskrifter er den rigtige måde at kode en sides overskrifter på. Her er nogle grunde til, hvorfor.
Hvorfor bruge overskriftskoder snarere end divisioner
Dette er den bedste grund til at bruge overskrifter og bruge dem i den rigtige rækkefølge (dvs. h1, derefter h2, derefter h3 osv.). Søgemaskiner give den højeste vægtning af tekst, der er inkluderet i overskriftskoder, fordi der er en semantisk værdi for den tekst. Med andre ord, ved at mærke din sidetitel H1, fortæller du søgemaskinens edderkop, at det er sidens # 1 fokus. H2-overskrifter har # 2 vægt og så videre.
Du behøver ikke at huske, hvilke klasser du brugte til at definere dine overskrifter
Når du ved, at alle dine websider vil have en H1, der er fed, 2 em og gul, kan du definere det en gang i dit typografiark og være færdig. 6 måneder senere, når du tilføjer en anden side, tilføjer du bare et H1-tag øverst på din side, du har ikke at gå tilbage til andre sider for at finde ud af, hvilket stil-id eller klasse du brugte til at definere hovedoverskrift og underhoveder.
Giv en stærk sideoversigt
Konturer gør teksten nemmere at læse. Derfor lærte de fleste amerikanske skoler studerende at skrive en oversigt, før de skriver papiret. Når du bruger overskriftskoder i et dispositionsformat, har din tekst en klar struktur, der bliver meget tydelig. Der er desuden værktøjer, der kan gennemgå sidens omrids for at give en synopsis, og disse er afhængige af overskriftskoder til omridsstrukturen.
Din side giver mening, selv når typografierne er slået fra
Ikke alle kan se eller bruge stilark (og dette kommer tilbage til nr. 1 - søgemaskiner ser indholdet (teksten) på din side, ikke stilarket). Hvis du bruger overskriftskoder, gør du dine sider mere tilgængelige, fordi overskrifterne giver oplysninger, som a DIV-tag ville ikke.
Det er nyttigt for skærmlæsere og tilgængelighed af websteder
Korrekt brug af overskrifter skaber en logisk struktur for et dokument. Dette er hvad skærmlæsere vil bruge til at "læse" et websted for en bruger med synshandicap, hvilket gør dit websted tilgængeligt for handicappede.
Stil teksten og skrifttypen i dine overskrifter
Den nemmeste måde at bevæge sig væk fra det "store, dristige og grimme" problem med overskriftskoder er at style teksten, som du vil have dem til at se ud. Faktisk er det bedst at skrive afsnit, h1, h2 og h3 typografier først, når du arbejder på et nyt websted. Stick med kun skrifttypefamilie og størrelse / vægt. For eksempel kan dette være et indledende typografiark for et nyt sted (dette er blot nogle eksempler på typografier, der kan bruges):
Du kan ændre skrifttyper i din overskrift eller skift tekststil eller endda tekstfarve. Alle disse vil gøre din "grimme" overskrift til noget mere levende og i tråd med dit design.
Grænser kan pynte overskrifter
Grænser er en fantastisk måde at forbedre dine overskrifter på og er nemme at tilføje. Men glem ikke at eksperimentere med grænserne - du har ikke brug for en grænse på hver side af din overskrift. Og du kan bruge mere end bare kedelige grænser.
Vi tilføjede en øverste og nederste kant til vores prøveoverskrift for at introducere nogle interessante visuelle stilarter. Du kan tilføje grænser på enhver måde, som du vil opnå den ønskede designstil.
Føj baggrundsbilleder til dine overskrifter for endnu mere Pizazz
Mange websteder har en sidehoveddel øverst på siden, der indeholder en overskrift - typisk webstedets titel og en grafik. De fleste designere betragter dette som to separate elementer, men det behøver du ikke. Hvis grafikken kun er der for at dekorere overskriften, hvorfor så ikke føje den til overskriftstilarterne?
Tricket til denne overskrift er, at vi ved, at vores billede er 90 pixels højt. Så vi tilføjede polstring i bunden af overskriften på 90 pixel (polstring: 0,5 0 90px 0p;). Du kan lege med margenerne, linjehøjden og polstringen for at få overskriften til at vise præcis, hvor du vil have den.
En ting at huske, når du bruger billeder, er, at hvis du har en lydhør hjemmeside (som du burde) med et layout, der ændres baseret på skærmstørrelser og enheder, vil din overskrift ikke altid være den samme størrelse. Hvis du har brug for din overskrift for at have en nøjagtig størrelse, kan dette medføre problemer. Det er en af grundene til, at vi generelt undgår baggrundsbilleder i en overskrift, så seje som de nogle gange kan se ud.
Udskiftning af billeder i overskrifter
Dette er en anden populær teknik for webdesignere, fordi det giver dig mulighed for at oprette en grafisk overskrift og erstatte teksten i overskriftstagget med det billede. Dette er sandfærdigvis en antik praksis fra webdesignere, der havde adgang til meget få skrifttyper og ønskede at bruge mere eksotiske skrifttyper i deres arbejde. Stigningen af webskrifttyper har virkelig ændret, hvordan designere nærmer sig websteder. Overskrifter kan nu indstilles i en lang række skrifttyper, og billeder med de indlejrede skrifttyper er ikke længere nødvendige. Som sådan finder du kun CSS-billeder, der erstatter overskrifter på ældre websteder, der endnu ikke er opdateret til mere moderne praksis.
Redigeret af Jeremy Girard