Overskrifter er almindelige på de fleste websider. Faktisk har stort set alle tekstdokumenter tendens til at have mindst en overskrift, så du kender titlen på, hvad du læser. Disse overskrifter er kodet ved hjælp af HTML-overskriftselementerne - h1, h2, h3, h4, h5 og h6.
På nogle websteder kan du opdage, at overskrifterne er kodet uden at bruge disse elementer. I stedet kan overskrifter bruge afsnit med specifikke klassetegn, der er tilføjet dem eller divider med klassementer. Grunden til, at jeg ofte hører om denne forkerte praksis er, at designeren "kan ikke lide den måde, som overskrifterne ser ud". Som standard vises overskrifter i 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 dette er kun standard udseende af disse elementer! Med CSS kan du gøre overskriften udseende, men du vil have det! Du kan ændre skrifttypestørrelsen, fjerne den modige og så meget mere. Overskrifter er den rigtige måde at kode en overskrift på. Her er nogle grunde til.
Hvorfor bruge overskriftstagere i stedet for DIV'er og Styling
Søgemaskiner som overskriftstagere
Dette er den bedste grund til at bruge overskrifter, og brug dem i den rigtige rækkefølge (dvs. h1, derefter h2, derefter h3 osv.). Søgemaskiner giver den højeste vægtning til tekst, der er indeholdt i overskriften, fordi der er en semantisk værdi til den tekst. Med andre ord, ved at mærke din sidetitel H1, fortæller du søgemaskinens edderkop, at det er fokus på siden 1. 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 skal have en H1, der er fed, 2em og gul, så kan du definere den en gang i dit stylesheet og gøres. 6 måneder senere, når du tilføjer en anden side, tilføjer du blot et H1-tag øverst på din side, du behøver ikke at gå tilbage til andre sider for at finde ud af, hvilken stil-id eller klasse du brugte til at definere hovedmenuen overskrift og underhoveder.
De giver en stærk sideoversigt
Konturer gør tekst lettere at læse. Derfor lærte de fleste amerikanske skoler eleverne at skrive en oversigt, før de skrev papiret. Når du bruger overskriftskoder i et omridsformat, har din tekst en klar struktur, der viser sig meget hurtigt. Derudover er der værktøjer, der kan gennemgå sidebeskrivelsen for at give en oversigt, og disse er afhængige af overskriftstagger til konturstrukturen.
Din side vil gøre mening, selvom stilarterne er slukket
Ikke alle kan se eller bruge stilark (og det kommer tilbage til # 1 - søgemaskiner viser indholdet (teksten) på din side, ikke stilarkene). Hvis du bruger overskriftskoder, gør du dine sider mere tilgængelige, fordi overskrifterne indeholder oplysninger, som et DIV-tag ikke ville.
Det er nyttigt for skærmlæsere og tilgængelighed på hjemmesiden
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 til en bruger med synshandicap, hvilket gør dit websted tilgængeligt for handicappede.
Style teksten og skrifttypen i dine overskrifter
Den nemmeste måde at flytte væk fra det "store, dristige og grimme" problem med overskriftskoder er at indstille teksten som du vil have dem til at se. Faktisk, når du arbejder på en ny hjemmeside, er det bedst at typisk skrive afsnit, h1, h2 og h3 stilarter første ting. Stick med bare skrifttype familie og størrelse / vægt. Dette kan f.eks. Være et foreløbigt stilark til et nyt websted (disse er blot nogle eksempler på stilarter, der kan bruges):
Du kan ændre skrifttyperne i din overskrift eller ændre tekststil eller endda tekstfarven. Alle disse vil gøre din "grimme" overskrift til noget mere levende og i overensstemmelse med dit design.
Grænser kan klæde sig på overskrifter
Grænser er en fantastisk måde at forbedre dine overskrifter og er nemme at tilføje. Men glem ikke at eksperimentere med grænserne - du behøver ikke en grænse på hver side af din overskrift. Og du kan bruge mere end bare enkle kedelige grænser.
Jeg tilføjede en øverste og nederste grænse til min prøveoverskrift for at introducere nogle interessante visuelle stilarter. Du kunne tilføje grænser på nogen måde, som du ønskede at opnå den design stil du ønsker.
Tilføj baggrundsbilleder til dine overskrifter til endnu mere Pizazz
Mange websteder har en header sektion øverst på siden, der indeholder en overskrift - typisk webstedets titel og en grafik. De fleste designere tænker på dette som to separate elementer, men det behøver du ikke. Hvis grafikken er der bare for at dekorere overskriften, så hvorfor ikke tilføje det til overskriften stilarter?
Tricket til denne overskrift er, at jeg ved, at mit billede er 90 pixel højt. Så jeg tilføjede polstring til bunden af overskriften på 90px (polstring: 0,5 0 90px 0p;). Du kan spille med margener, linjehøjde og polstring for at få teksten til overskriften til at vise præcis, hvor du vil have det.
En ting at huske, når du bruger billeder, er at hvis du har et lydhurt websted (som du burde) med et layout, der ændrer sig ud fra skærmstørrelser og enheder, er overskriften ikke altid den samme størrelse. Hvis du har brug for din overskrift for at være en nøjagtig størrelse, kan det medføre problemer. Det er en af grundene til, at jeg generelt undgår baggrundsbilleder i en overskrift, så sej som de nogle gange kan se ud.
Billedudskiftning i overskrifter
Dette er en anden populær teknik til webdesignere, fordi det giver dig mulighed for at oprette en grafisk overskrift og erstatte teksten af overskriften tag med det billede.Dette er sandfærdigt en antiqued praksis fra webdesignere, der havde adgang til meget få skrifttyper og ønskede at bruge mere eksotiske skrifttyper i deres arbejde. Stigningen af web skrifttyper har virkelig ændret, hvordan designere nærmer sig websteder. Overskrifter kan nu indstilles i en lang række skrifttyper, og billeder med de indbyggede skrifttyper er ikke længere nødvendige. Som sådan vil du kun finde udskiftning af CSS-billeder til overskrifter på ældre websteder, der endnu ikke er opdateret til mere moderne praksis.
Redigeret af Jeremy Girard den 9/6/17
