Pealkirjad

Teate, et veebilehel tohib olla vaid 1 h1? Noh, tegelikult võib olla neid ju tuhandeid, kuid et leht oleks semantiline, siis peaks piirduma vaid ühega.

Miks see nii on? Sest veebileht on justnagu raamat, mille tiitel on kõige üldisem ja tähtsam pealkiri. Ei ole ju päris nii, et raamatu pealkiri on “Tõde ja õigus” ning pool raamatut on A.H. Tammsaare lugu, kuid siis äkki tuleb Oskar Lutsu “Kevade”? Ei ole ju loogiline.

Teine äärmus on raamatu kaanele üldse mitte midagi kirjutada ja siis panna ühtede kaante vahele kaks teost. Kuid sellisel juhul ei muutuks fakt, et sellel raamatul on ikkagi mingi nimi, olgu selleks kasvõi “Nimeta raamat” või “”Tõde ja õigus” ja “Kevade””.

Seega:

Alati võiks kodulehe tiitel olla lehe esimene, h1 taseme pealkiri. Ja kodulehe nimi, tahetagu seda kasvõi ainult logona esitada, võiks alati olla ikkagi tekstina (mitte alt-tekstina, vaid päris tekstina). Lihtsalt saab teksti peita ja logo/pildi esitada taustapildina. Kõige levinum, mugavam ja vahvam viis on selleks panna h1-ga märgitud lehe tiitlile taust, milleks on firma logo või mõni muu pilt. Siis lükata CSS-ga tekst vaateväljast välja, niiet paistma jääb vaid logo.

Näiteks nii:

h1 {
	background: transparent url(logo.png) no-repeat 50% 50%;
	height: 0;
	overflow: hidden;
	padding-top: 200px; // asenda 200px logo.png kõrgusega
}

Otsimootorisõbralik teksti asendamine pildiga

Mis juhtub?
Päisel kaotatakse kõrgus (height: 0;), aga padding-top tekitab logo kõrgusega vahe, kust tuleb nähtavale backgroundiga paika pandud taustapilt. Kõik, mis jääb väljapoole, seal hulgas tiitel, peidetakse overflow: hidden;-ga.
Soovi korral võib määrata h1-le ka laiuse, näiteks taustapildi laiusega võrdse — width: 200px;

Inimesed eeldavad, et lehe logo/päisetekst lingib alati lehe avalehele. Kuna tekst on peidus, tuleb h1 sees olev tekst muuta lingiks ning link CSS-ga muuta blokielemendiks, et padding-topiga tekitatud ala oleks link:

h1 a {
	display: block;
	background: transparent url(logo.png) no-repeat 50% 50%;
	height: 0;
	overflow: hidden;
	padding-top: 200px; // asenda 200px logo.png kõrgusega
}

SEO sõbralik lingiteksti asendamine pildiga

Niimoodi saame ühe hoobiga lüüa mitu kärbest:
1) Kättesaadavus on parem, sest ekraanilugejad, otsimootorid, pisikesed ekraanid jne, kes pilti näha ei tahaks, saavad näidata tavalist teksti. Jätan mainimata, et otsimootorid satuvad sellest täiega pöördesse.
2) SEO-trikk. Otsimootorile meeldib näha, et lehe title-s kasutatud märsõnad kattuvad pealkirjades.
3) Lehte välja printides ei prindita logo vaid selle tekstilist vastet.
4) …

Ja lehe kood on ilus ja loogiline:

<html>
<head>
<title>Veebileht AS</title>
<head>
<body>
<h1>Veebileht AS</h1>
...

Kui h1 paigas, järgenvad sellele riburadapidi h2, h3, kuni h6-ni. Seega sisulehtede pealkirjad on enamasti h2-d.

Kõik toimib loogilist rada pidi, mida üldisem pealkiri, seda väiksema numbriga ta on. Mida spetsiifilisemaks pealkiri läheb, seda suuremaks number läheb. Kuuest tasemest peaks täiesti piisama.

Näide pealkirjade struktuurist:

h1: Veebileht AS
h2: Veebileht AS-st
h3: Meeskond
h4: Juhatus
h5: Juku Kriips, esimees
h6: Curriclum Vitae

Kuna h1 on sama, mis lehe tiitel, peaks sisupealkirja (h2) lisama ka lehe tiitlisse, see on jälle selline nõks, et külastajad saavad juba kaugelt (otsimootoris nt) aru, millest lehel räägitakse. Niiet iga lehe tiitel võiks olla midagi taolist (toetudes ülemisele näitele): Veebileht AS-st » Veebileht AS. See meeldib ka otsimootoritele.

Otsi kokku tõmmates:

Pealkirjad on väga olulised struktuurielemendid. Ei, nad ei ole kujunduselemendid (me oleme sellest ju juba rääkinud!), vaid tähtsad elemendid. Austagem neid.

Kommentaarid: puuduvad