Otsikot ovat yleisiä useimmilla verkkosivuilla. Itse asiassa melkein missä tahansa tekstidokumentissa on ainakin yksi otsikko niin, että tiedät sen, mitä olet lukemassa. Nämä otsikot koodataan käyttämällä HTML-otsikkotekijöitä - h1, h2, h3, h4, h5 ja h6.
Joillakin sivustoilla saatat huomata, että otsikot on koodattu ilman näitä elementtejä. Sen sijaan otsikot saattavat käyttää kappaleita, joilla on erityisiä luokkamääritteitä, jotka on lisätty niille, tai luokitteluelementtejä. Syy, josta kuulen usein virheellisestä käytännöstä, on, että suunnittelija "ei pidä tapaa, jolla otsikot näyttävät". Oletusarvon mukaan otsikot näkyvät lihavoituna ja ne ovat suurempia, erityisesti h1- ja h2-elementtejä, jotka näkyvät paljon suuremmassa kirjasinkokoisena kuin loput sivun tekstistä. Muista, että tämä on vain näiden elementtien oletuskuva! CSS: n avulla voit näyttää otsikon haluamallasi tavalla! Voit muuttaa fonttikokoa, poistaa rohkeat ja paljon muuta. Otsikot ovat oikea tapa koodata sivun otsikot. Seuraavassa on joitain syitä.
Miksi käyttää otsikkotunnuksia eikä DIV: ää ja muotoilua
Hakukoneet kuten otsikkotunnisteet
Tämä on paras syy käyttää otsikoita ja käyttää niitä oikeassa järjestyksessä (esim. H1, sitten h2, sitten h3 jne.). Hakukoneet antavat suurimman painotuksen tekstiin, joka sisältyy otsikkotunnisteisiin, koska tekstissä on semanttinen arvo. Toisin sanoen, merkitsemällä sivun otsikko H1, kerrot hakukonehämähäkki, että se on sivun # 1 keskittymä. H2-otsikoilla on # 2 painotus ja niin edelleen.
Sinun ei tarvitse muistaa, mitä luokkia käytit otsikoiden määrittämiseksi
Kun tiedät, että kaikilla Web-sivuillasi on H1, joka on lihavoitu, 2em ja keltainen, voit määritellä sen kerran tyylisivustasi ja tehdä sen. 6 kuukautta myöhemmin, kun lisäät toisen sivun, lisäät vain H1-tunnisteen sivun yläreunaan, sinun ei tarvitse palata muille sivuille, jotta voit selvittää, minkä tyyppisen tunnuksen tai luokan olet määrittänyt otsikko ja alaotsikot.
Ne tarjoavat vahvan sivun
Piirteet tekevät tekstistä helpompaa lukea. Siksi useimmat yhdysvallat kouluivat oppilaita kirjoittamaan ääriviivat ennen kuin he kirjoittavat paperin. Kun käytät otsikkotunnisteita ääriviivoissa, tekstissä on selkeä rakenne, joka näkyy hyvin nopeasti. Lisäksi on olemassa työkaluja, jotka voivat tarkastella sivun ääriviivoja synopsin luomiseksi, ja ne perustuvat ääriviivatekniikan otsikkotuotteisiin.
Sivusi tekee mielekästä vaikka tyylit katkeilivat
Kaikki eivät voi tarkastella tai käyttää tyyliarkkeja (ja tämä palaa # 1 - hakukoneet katselevat sivun sisältöä (tekstiä), eivät tyyliarkeja). Jos käytät otsikkotunnisteita, teket sivuillasi helpommin, koska otsikot antavat tietoja, joita DIV-tunniste ei halua.
Se on hyödyllinen näytönlukijoille ja sivuston esteettömyydelle
Nimikkeiden asianmukainen käyttö luo asiakirjalle loogisen rakenteen. Tämä on se, mitä näytönlukijat käyttävät sivuston "lukemiseen" näkövammaisille käyttäjille, mikä tekee sivustostasi vammaisille.
Muokkaa otsikoiden tekstiä ja fonttia
Helpoin tapa siirtyä pois otsikkotunnisteiden "iso, rohkea ja ruma" ongelma on muotoilla tekstiä tavalla, jota haluat niiden näyttävän. Itse asiassa, kun työskentelet uudella verkkosivustolla, on parasta tyypillisesti kirjoittaa kappaleet h1, h2 ja h3. Kiinnitä vain kirjasinperhe ja koko / paino. Esimerkiksi tämä voi olla uuden sivuston alustava tyyliarkki (nämä ovat vain muutamia esimerkkejä tyyleistä, joita voitaisiin käyttää):
Voit muokata otsikkosi fontteja tai muuttaa tekstiä tai jopa tekstin väriä. Kaikki nämä kääntävät "ruma" otsikonne jotain elävämpää ja sopusoinnussa suunnittelusi kanssa.
Rajat voivat pukeutua otsikoihin
Rajat ovat erinomainen tapa korottaa otsikoita ja lisätä niitä helposti. Mutta älä unohda kokeilla rajoja - et tarvitse reunaa otsikon kummallakin puolella. Ja voit käyttää enemmän kuin pelkkää tylsää rajaa.
Lisäsin ylätason ja alareunan näytekappaleeni esittelemään mielenkiintoisia visuaalisia tyylejä. Voit lisätä rajoja millään tavalla, jonka haluat saavuttaa haluamasi tyylin.
Lisää taustakuvia otsikoihin vielä enemmän Pizazz
Monilla verkkosivustoilla on sivun yläosassa otsikko-osio, joka sisältää otsikon - tyypillisesti sivuston otsikon ja graafin. Useimmat suunnittelijat ajattelevat tätä kahtena eri elementtinä, mutta sinun ei tarvitse. Jos grafiikka on vain sisustettu otsikko, niin miksi ei lisätä sitä otsikko tyylejä?
Tämän otsikon temppu on, että tiedän, että kuva on 90 pikseliä pitkä. Joten lisäsin pehmuste 90px: n otsikon alareunaan (pehmuste: 0.5 0 90px 0p;). Voit pelata marginaaleilla, rivin korkeudella ja pehmusteella saada otsikon tekstin näyttämään tarkalleen missä haluat.
Muistettavaa, kun käytät kuvia, on se, että jos sinulla on reagoiva verkkosivusto (jota sinun pitäisi) ja se muuttuu näytön koon ja laitteiden mukaan, otsikko ei aina ole sama koko. Jos otsikko on tarkka koko, se voi aiheuttaa ongelmia. Se on yksi syy siihen, että yleensä vältän taustakuvia otsikossa, niin viileinä kuin ne voivat joskus näyttää.
Kuvanvaihto otsikoissa
Tämä on toinen suosittu tekniikka web-suunnittelijoille, koska sen avulla voit luoda graafisen otsikon ja korvata otsikkotunnuksen tekstin kyseisen kuvan avulla.Tämä on tosiaankin antiikin käytäntö web-suunnittelijoilta, joilla oli käytössään vain muutamia kirjasimia ja halusivat käyttää enemmän eksoottisia fontteja työstään. Web-fonttien nousu on todella muuttanut suunnittelijoiden lähestymistapaa sivustoihin. Otsikot voidaan nyt asettaa monenlaisiin fontteihin ja kuviin, joissa sulautetut fontit eivät enää ole tarpeen. Sellaisena, löydät vain CSS-kuvat korvaamaan otsikoita vanhemmissa sivustoissa, joita ei ole vielä päivitetty nykyaikaisemmiksi käytännöiksi.
Julkaisija Jeremy Girard 9/6/17
