Otsikot ovat yleisiä useimmilla verkkosivuilla. Itse asiassa melkein kaikilla tekstiasiakirjoilla on yleensä vähintään yksi otsikko, jotta tiedät lukemasi otsikon. Nämä otsikot koodataan käyttämällä HTML otsikkoelementit - h1, h2, h3, h4, h5 ja h6.
Joillakin sivustoilla saatat huomata, että otsikot koodataan käyttämättä näitä elementtejä. Sen sijaan otsikoissa voidaan käyttää kappaleita, joihin on lisätty tiettyjä luokan määritteitä, tai jakoja, joissa on luokan elementtejä. Syy, miksi kuulemme usein tästä väärästä käytännöstä, on se, että suunnittelija "ei pidä otsikoiden ulkoasusta". Oletusarvon mukaan otsikot näytetään lihavoituna ja ne ovat kooltaan suurempia, erityisesti h1- ja h2-elementit, jotka näkyvät paljon suuremmalla kirjasinkoolla kuin muu sivun teksti. Muista, että tämä on vain näiden elementtien oletustyyli! Kanssa CSS, voit tehdä otsikosta haluamasi! Voit muuttaa kirjasinkokoa, poistaa lihavoidun ja paljon muuta. Otsikot ovat oikea tapa koodata sivun otsikot. Tässä on joitain syitä.
Miksi käyttää otsikkotunnisteita pikemminkin kuin jakoja
Tämä on paras syy käyttää otsikoita ja käyttää niitä oikeassa järjestyksessä (ts. h1, sitten h2, sitten h3 jne.). Hakukoneet anna otsikoiden sisällä olevalle tekstille suurin painotus, koska tekstillä on semanttinen arvo. Toisin sanoen, merkitsemällä sivusi otsikko H1, kerrot hakukoneiden hämähäkille, että se on sivun ensisijainen kohde. H2-otsikoissa on # 2 korostus ja niin edelleen.
Sinun ei tarvitse muistaa, mitä luokkia käytit otsikoidesi määrittelemiseen
Kun tiedät, että kaikilla verkkosivuillasi on H1, joka on lihavoitu, 2em ja keltainen, voit määrittää sen kerran tyylitaulukossasi ja olla valmis. 6 kuukautta myöhemmin, kun lisäät toisen sivun, lisäät vain H1-tunnisteen sivusi yläosaan, sinulla ei ole palata muille sivuille saadaksesi selville, minkä tyylitunnuksen tai luokan käytit pääotsikon ja alaotsikoiden määrittelemiseen.
Anna vahva sivun ääriviiva
Ääriviivat helpottavat tekstin lukemista. Siksi suurin osa yhdysvaltalaisista kouluista opetti opiskelijoita kirjoittamaan pääpiirteet ennen paperin kirjoittamista. Kun käytät otsikkotunnisteita jäsennysmuodossa, tekstilläsi on selkeä rakenne, joka tulee näkyviin hyvin nopeasti. Lisäksi on olemassa työkaluja, jotka voivat tarkistaa sivun ääriviivat yhteenvedon muodostamiseksi, ja ne luottavat ääriviivan rakenteen otsikkotageihin.
Sivusi tekee mielestäsi myös silloin, kun tyylit on kytketty pois päältä
Kaikki eivät voi tarkastella tai käyttää tyylitaulukoita (ja tämä palaa numeroon 1 - hakukoneet tarkastelevat sivusi sisältöä (tekstiä), eivät tyylitaulukoita). Jos käytät otsikkotunnisteita, teet sivuistasi helpommin käytettävän, koska otsikot tarjoavat tietoja, jotka a DIV-tunniste Eikö.
Se on hyödyllinen näytönlukijoille ja verkkosivustojen saavutettavuudelle
Otsikoiden asianmukainen käyttö luo dokumentille loogisen rakenteen. Tätä ruudunlukijat käyttävät "lukemaan" sivuston näkövammaisille käyttäjille, jolloin sivustosi on vammaisten käytettävissä.
Tyylittele otsikoidesi teksti ja fontti
Helpoin tapa siirtyä otsikkotagien "iso, rohkea ja ruma" ongelmasta on muotoilla teksti haluamallasi tavalla. Itse asiassa, kun työskentelet uudella verkkosivustolla, on parasta kirjoittaa yleensä kappaleen, h1-, h2- ja h3-tyylit. Pidä kiinni vain kirjasinperheestä ja koosta / painosta. Tämä voi olla esimerkiksi uuden sivuston alustava tyylitaulukko (nämä ovat vain joitain esimerkkityylejä, joita voidaan käyttää):
Voit muokata fontit tai muuta tekstityyliä tai jopa tekstin väriä. Kaikki nämä tekevät "ruma" otsikko jotain elinvoimainen ja sopusoinnussa suunnittelua.
Rajat voivat pukeutua otsikoihin
Rajat ovat loistava tapa parantaa otsikoitasi, ja ne on helppo lisätä. Mutta älä unohda kokeilla rajoja - et tarvitse reunaa otsikon kummallekin puolelle. Ja voit käyttää muutakin kuin pelkkää tylsää reunaa.
Lisäsimme ylä- ja alareunuksen otosotsikkoon esitelläksesi mielenkiintoisia visuaalisia tyylejä. Voit lisätä reunoja millä tahansa tavalla, jolla haluat saavuttaa haluamasi suunnittelutyylin.
Lisää taustakuvia otsikoihisi saadaksesi vielä enemmän Pizazzia
Monilla verkkosivustoilla on sivun yläosassa otsikko-osa, joka sisältää otsikon - yleensä sivuston otsikon ja kuvan. Useimmat suunnittelijat ajattelevat tämän kahdeksi erilliseksi elementiksi, mutta sinun ei tarvitse. Jos kuva on vain koristeltu otsikko, niin miksi ei lisätä sitä otsikkotyyleihin?
Tämän otsikon temppu on, että tiedämme, että kuvamme on 90 pikseliä pitkä. Joten lisäsimme täytteen 90 kuvapisteen otsikon alaosaan (pehmuste: 0,5 0 90 kuvapistettä 0p;). Voit leikkiä marginaaleilla, viivan korkeudella ja täytteillä saadaksesi otsikon tekstin näyttämään tarkalleen missä haluat.
Yksi asia, joka on muistettava kuvia käytettäessä, on, että jos sinulla on reagoiva verkkosivusto (jonka sinun pitäisi) asettelulla, joka muuttuu näytön koon ja laitteiden mukaan, otsikkosi ei ole aina saman kokoinen. Jos tarvitset otsikkosi tarkan koon, se voi aiheuttaa ongelmia. Se on yksi syy siihen, miksi yleensä vältetään otsikossa olevat taustakuvat, niin viileitä kuin ne voivat joskus näyttää.
Kuvien vaihto otsikoissa
Tämä on toinen suosittu tekniikka web-suunnittelijoille, koska sen avulla voit luoda graafisen otsikon ja korvata otsikkotagin tekstin kyseisellä kuvalla. Tämä on todellakin vanhentunut käytäntö web-suunnittelijoilta, joilla oli pääsy vain harvoihin kirjasimiin ja jotka halusivat käyttää eksoottisempia fontteja työssä. Verkkofonttien nousu on todella muuttanut suunnittelijoiden lähestymistapaa sivustoihin. Otsikoita voidaan nyt asettaa monenlaisilla kirjasimilla, ja kuvia, joihin näitä upotettuja fontteja ei enää tarvita. Sellaisena löydät CSS-kuvien korvaavan vain vanhempien sivustojen otsikot, joita ei ole vielä päivitetty nykyaikaisempiin käytäntöihin.
Toimittaja Jeremy Girard