Samovolja je mrtva, učim vas semantici!

Samovolja je mrtva, učim vas semantici!

Ovo bi trebao biti samo kratak uvod (relativno kratak u odnosu na opseg same teme) u jedan od zanemarenijih (ponajviše od strane početnika) aspekata izrade web-stranice - semantiku HTML-a. Unatoč svojoj važnosti, brojni programeri i dizajneri ne pridodaju dovoljno (ako uopće imalo) pažnje dijelu cijeloga ovoga cirkusa koji utječe i na ostale segmente izrade, ali i korištenja, internetskih stranica.

Što je uopće semantika?

Semantiku u općelingvističkom kontekstu (obratiti pažnju na činjenicu da se, zapravo, bavljenjem HTML-om bavimo svojevrsnim lingvističkim radom) označava značenje riječi ili fraza. U pogledu HTML-a, semantiku možemo odrediti kao značenje koje nose elementi HTML-a zajedno sa svojim atributima, ali i sadržajem kojega „pridržavaju“.

Semantika kao neophodan dio HTML-a

Prvo mjesto gdje bi vjerojatno svatko išao pokušati saznati značenje ponekoga elementa i/ili atributa bio bi W3C, čija specifikacija može poslužiti za upoznavanje s elementima koje koristimo. Čitajući specifikacije HTML-a, vidjet ćemo da je semantika, za razliku od sintakse određene DTD-om, dosta apstraktna stvar, barem što se tiče objašnjenja, koja su često štura ili ne posve točna (ruku na srce, ni W3C nije ni bezgrešan ni nepogrešiv). Upravo ovo dovodi do nerazumijevanja i krivoga korištenja nečega što bi svatko trebao znati: mislim da je barem osnovna udubljenost u problematiku semantike HTML-a obaveza svakoga tko se želi posvetiti izradi web-stranica jer znati što znače „sintagme“ i „izrazi“ koje pišemo, jednako je važno i kao razumjeti što govorimo; ipak je HTML jezik komunikacije između programera/dizajnera i ostaloga svijeta koji koristi njihov kôd.

Osim elemenata, nosioci značenja mogu biti atributi (atribut cite, primjerice, proširuje elemente q i blockquote dajući dodatne informacije o citiranome tekstu) i vrijednosti koje atributi mogu sadržavati. Dakle, možemo stvoriti određeni skup riječi koje će predstavljati vrijednosti pojedinih atributa da bi se pobliže označili elementi koje koristimo i sadržaj koji se unutar elemenata nalazi. Primjer korištenja takvih riječi jesu vrijednosti koje može poprimiti atribut class; W3C sugerira da se kao vrijednosti toga atributa koriste riječi koje će označiti funkciju sadržaja, a ne kako će sadržaj izgledati, tako između ostalog predlažu riječi poput: warning, important, downloadableImage, a nasuprot tome, kao primjere loše odabranih vrijednosti napominju: border4px, lighttext i slično.

Pri definiranju nove verzije HTML-a (HTML-a 5), pokušava se doskočiti problemu semantike. Tako se u toj verziji uvode novi elementi koji bi trebali pridodati semantiku često korištenim dijelovima stranice. Primjer je element footer, koji dodatno značenjski određuje dio kôda koji se koristi u izradi podnožja stranice. Problem je, po meni, što se element footer na stranici može pojaviti više od jednoga puta, čak ne mora biti ni na dnu stranice. Ovime se, po meni, opet siluje semantika jer naziv elementa sam po sebi određuje koliko će se puta pojavljivati i gdje će se nalaziti – sigurno ne iznad elementa header, što je, iako nelogično, moguće.

Iako je W3C-ov pokušaj hvalevrijedan, upitno je koliko je koristan. Gomilanje elemenata, koji ponovno nisu bog-zna-kako definirani sa semantičke strane, jednostavno nema neku svrhu. Mislim da će biti potrebno pronaći neko bolje rješenje. Čini mi se da bi nekakav dogovor na nekoj višoj razini o dodjeljivanju vrijednosti atributima pomogao više od ovoga što se trenutno poduzima. No, ni sam nisam pametan što napraviti po ovome pitanju.

Krivo korištenje elemenata – narušavanje semantike

Ponekad dizajneri i programeri pogriješe u korištenju elemenata, što dovodi do nesporazuma i neugodnih iznenađenja. Kao primjer možemo uzeti element a koji se često koristi u radu s javascriptom za pokretanje određenih akcija: dodavanje onclick atributa još mogu podnijeti, ali umetanje naredbi u atribut href jednostavno ne mogu zbog navike da gotove sve linkove ručno otvaram u novome tabu, tako da kada vidim da se ništa ne događa jednostavno izgubim volju za bilo kakvim daljnjim korištenjem stranice.
Slična stvar događa se kada dizajneri ili programeri pokušavaju stilizirati sadržaj korištenjem unaprijed ugrađenim stilskim naredbama za neke elemente. Školski primjer jest korištenje elementa blockquote za uvlačenje sadržaja, čime se narušava semantika toga elementa, kojemu pusto stiliziranje nikako nije funkcija.

Kako bih vam olakšao da shvatite koliko je loše koristiti elemente u krive svrhe, zamislite sljedeće: stojite u redu u javnoj ustanovi po želji i čekate da dođete na red na nekom šalteru za što god trebate (ja ću zamislit da stojim u banci i čekam u redu za šalter Novčano poslovanje); nakon što iz dosade izgrizete nokte (broj nastradalih noktiju proporcionalan je broju ljudi koji su prije vas u redu) i dođete do službenice, ona vas obavještava da stojite u krivome redu jer je ovo red za slanje pošiljki. Unatoč vašem negodovanju jer iznad šaltera piše Novčano poslovanje (čak je i šalter prikladno uređen), službenica vam odgovara da nije ona kriva što ju je netko postavio na krivo mjesto – ona samo radi svoj posao, prenosi informacije – a vi morate sve iznova.

Nadam se da shvaćate metaforu.

Zašto pisati semantički pravilan kôd?

Nadam se da ste do sada shvatili da je semantika HTML-a bitna za prenošenje poruka kao što je i u izvanmrežnome svijetu. No, nije na odmet nabrojati nekoliko pogodnosti (prednosti su nabrojane tako da vam zadržim pozornost do samoga kraja, a ne po važnosti).

Semantički ispravan kôd utječe na rangiranje na tražilicama

Mislim da se u svim SEO početnicama nalazi uputa da je ključnu riječ, na koju ciljate u rezultatima pretrage, dobro ponavljati u naslovima tekstova, ali u za to prikladnim tagovima (h1-h6). Jednako tako, neki ističu da je dobro ključne riječi u tekstu naglasiti stavljanjem u odgovarajuće tagove. Zamislite da samo zbog krivog korištenja tagova i nerazumijevanja semantike ne uspijete dovesti svoju stranicu na željenu poziciju.

Semantika je bitan dio poboljšanja accessibilityja i user-experiencea

Neki ljudi (npr. slijepe osobe) koriste preglednike koji mogu samo prikazivati tekst i vrednovati ga po značenju kojega u samome kôdu dobiju. Tako, primjerice, postoje preglednici koji slijepim osobama posebno izdvajaju samo naslove na stranici; umetanjem naslova u, primjerice, element span, korisnicima oduzimate njima vrlo bitnu mogućnost i otežavate im pregledavanje stranice.

Osim toga, neki elementi sa sobom nose posebno ponašanje koje korisnik možda i očekuje kada vidi neki element dizajna. Vaša kriva upotreba nekog elementa ili postavljanje sadržaja u element koji za to ne bi trebao služiti, može koštati korisnika prijevremenog gubitka kose zbog čupanja iste. Sjećate se mojega cendranja oko krivog korištenja elementa a i primjera sa službenicom na šalteru?

Olakšava snalaženje u kôdu

Mislim da ovo ne treba posebno objašnjavati. Pisanje semantički pravilnog kôda može u gomili kôda donijeti prevagu u snalaženju jer tada kôd koji sam po sebi objašnjava funkciju stranice, što je jako korisno kada morate čitati tirade kôda od nekoliko stotina linija ili čak i više.

Pospješuje cirkulaciju

Šalim se naravno. No, pisanje semantički pravilnoga kôda možda i nosi neku prednost s medicinske strane. Korištenje kôda koji će nekima možebitno olakšati korištenje stanice, moglo bi, ako ništa drugo, reducirati količinu stresa koji se lako može nagomilati korištenjem loše isprogramiranih stranica. Ovo jedna vjerojatno glupa pretpostavka koju sam ostavio za kraj, ali nadam se da sam vas zadnjim podnaslovom barem trgnuo iz sna.

Za daljnje čitanje

Sada kada ste dobili manji uvod u to što je semantika (da, ova tirada je bila sam općeniti uvod, niste ni blizu gotovi s čitanjem), predlažem vam općenito guglanje pojma semantike, ali i pojmova POSH (pazite da ne naletite na Voctoriju Beckham, zna biti neugodna), Bed and Breakfast markup i Microformats kako biste proširili svoje znanje i dodali novu razinu svome poznavanju semantike.