Dnevnik eklektika - Piše Dragan Babić

Struktura HTMLa i njegova semantika

Treći „tutorijal” iz serije o uvodu u CSS i HTML je na redu. Odlučio sam se da pišem o pravilnom pisanju (X)HTML-a i njegovom struktuiranju.

Ljudima koji prate ovu priču (pogotovo u poslednje vreme kako su web standradi sve prihvaćeniji) je ovo verovatno milioniti put da čitaju o ovome. Nebitno, pročitajte bez obzira. :)

Kao prvo, napraviću jednu pretpostavku, koja najverovatnije nije tačna, ali nema veze, neće promeniti suštinu priče. Ta pretpostavka je da većina ljudi kod nas (ne nužno samo kod nas, ali zbog nedostatka zakona koji reguliše pirateriju kada je softver u pitanju) uđe u web dizajn priču koristeći Dreamweaver—fantastični Macromedia-in proizvod. Nema ništa loše u tome, ja čak ljudima i savetujem da krenu sa njime, ali da sve vreme gledaju u kôd koji DW kreira umesto vas jer tako ćete jedino razumeti šta se dešava.

Dakle slobodno krenite sa design view, ali vremenom cilj je da se prešaltate na ručno kodiranje. Zbog čega je sada ovo bitno? Konkretno zbog pravilnog struktuiranja HTML elemenata na stranici i njihove pravilne primene. Upravo to vam WYSIWYG editori ne omogućavaju direktno.

Poznato je da kada hoćemo da italiziramo tekst, uokvirimo ga sa em tagovima, za bold bi koristili strong, kada nam treba identacija blockquote bi priskočio u pomoć. Sve ove stvari su pogrešne.

em ne označava italik, on označava emfazu, pojačanje, strong ne znači podebljaj tekst, on označava stepen jači od emfaze, a jadni blockqoute nikad nije bio predviđen za identaciju sloga, već za duže citiranje nekoga. Kao primer navešću to da čitači ekrana (engl. screenreader) kada naiđu na em ili strong taj tekst pročitaju sa povišenim tonom, tako da zloupotreba ovih elemenata može prouzrokovati konfuziju kod ljudi koji koriste ovakve browsere.

Kao što vidite iz ovih par primera, HTML elementi se maltretiraju besomučno i užasno su zloupotrebljeni u nekim slučajevima. Celu tu dilemu ćemo sada da otklonimo i nadam se razumeti malo bolje o čemu se ovde radi.

Greške navedene gore su upravo primer mešanja prezentacionog momenta i sadržaja. To ne treba da radimo jer imamo CSS. Klase i ID su nam na raspolaganju i pomoću njih bi trebali da postignemo željene rezultate. (Samo ni ovde ne treba preterivati.)

Liste

Liste (ul, ol, dl) su nam prijatelji, i postoje s razlogom. Nemojte misliti da se npr. neuređena lista (ul—unordered list) koristi samo kada trebamo da nabrojimo nešto u tekstu. ona se može iskoristiti kao veoma efektivan struktualni element. Kao primer mogu navesti elemente web lokacija bez kojih se ne može—menije. Svaki meni je u suštini lista linkova. Kada pravimo na primer galeriju sa thumbnailovima, njih ćemo smeštati u neuređenu listu.

Isto je i kod definition list koje se daju upotrebiti za mnogo više od formiranja rečnika ili bukvalno definicija… Na primer, mnogo blogova i sajtova uopšte imaju sidebarove u koje smeštaju dodatni sadržaj. Uzmimo da takav jedan sidebar ima sekcije, pa imamo linkovi, meta informacije, kategorije. Idealan primer za o je upravo dl, gde će vam dt biti naslov sekcije, a dd sam sadržaj. Ostalo je na stilizaciji tog elementa.

Raspored elemenata u kôdu

Ono što je veoma bitna stvar za dostupnost vašeg sadržaja je i raspored sadržajnih elemenata na web lokaciji.

Po pravilu, prvo što dolazi pri renderu stranice je (ukoliko postoji) zaglavlje, pa glavni sadržaj, tek onda ostatak sadržaja. Nekada se možda čini da je to teže izvesti, pogotovo kod floatovanih layouta, ali bi trebalo da bude prioritet kod optimizacije sadržaja.

Dakle u samom kôdu, prvo vam dolazi glavni sadržaj koji se nužno kao posledica toga prvi i učita, a kasnije sve ostalo.

Tabele, njihova primena i priroda

Opet moram da ponovim da se osećam kao papagaj što ovo ponavljam iznova konstantno, ali ovaj članak je ipak namenjen ljudima koji tek ulaze u priču tako da vredi obnoviti gradivo.

Kažem da su tabele najzloupotrebljeniji elementi u HTML-u zato što se njihova svrha totalno izvitoperila. One nikada nisu bile zamišljene da sadrže spacer .gif-ove, menije—layout stranice uostalom. To ne može biti pogrešnije, slučaj kada dizajniramo lokaciju i koristimo tabelu da nam drži layout. Usudio bih se sada da kažem i neoprostivo.

Zapamtite sledeće:

• tabela služi za tabelarni prikaz podataka
• tabela ne služi za formiranje layouta i održavanje strukture i pozicije elemenata na stranici.

Imate dosta ljudi na webu trenutno koji idu i pričaju tabele su zle, tabele su ovo, tabele su ono. Nisu one loše same po sebi, samo su užasno, užasno izmaltretirane. Koristite ih za šta su namenjene i sve je super.

Kada to usvojite, na pravom ste putu.

Sledeća stvar o kojoj hoću da kažem par reči je img element, tj. „hardkodovana„ slika, koja se dakle nalazi u HTML-u.

Slike u HTML-u, kada i zašto

Jedini opravdani razlog za korišćenje img elementa je ilustracija. Kada hoćemo da ilustrujemo tekst nekom slikom onda koristimo img. Ne koristimo img kada hoćemo da napravimo lepe dugmiće za navigacijski meni, ili da odvojimo zaglavlje od glavnog dela za tačno 22px. Pamet u glavu.

U situacijama kada hoćemo da imamo lepe dugmiće u meniju, opet CSS to the rescue. Ovog puta koristimo osobinu background-image i stvar rešena. Postoji par veoma moćnih image replacement tehnika (od kojih preporučujem phark, i Shea je studirao ovaj problem pa pogledajte i njegove rezultate). Ja lično rabim phark, što možete i videti u h3 u sidebaru.

Još jedna stvar je bitna oko korišćenja img-a, a to je alt atribut. on predstavlja opisni tekst koji svaka slika treba da sadrži.

Da se primetiti iz priloženog da se mnogo stvari menja u samom načinu pristupa izradi web lokacije, način razmišljanja se menja. Gubimo robusnost koju su nam obezbeđivale tabele, ali dobijamo jedan otvoren, lak i pristupačan web koji je jednako lep, ako ne i lepši. Ništa ne gubimo, samo se trebamo prilagoditi.

Semantika

Mnogo ljudi ne mari za semantiku. Semantika je inače nauka o značenju i veoma je primenljiva u HTML-u. Štos je u tome da kada nešto hoćemo da predstavimo na izvestan način, prvo pogledamo šta je to u suštini. Ako hoćemo da nabrajamo linkove na primer, bez problema možemo da ih stavljamo u pasuse teksta, ali možemo i da formiramo uređenu ili neuređenu listu od njih, li element prihvata p kao potomke, stavićemo paragrafe u listu i sada imamo semantički korektan element! Njega CSS-om možemo napraviti da izgleda kao i da nema liste ako nam je to po volji. Prilično uzbudljivo rekao bih ja, da se ne plašim prozivki da sam geek kasnije.

Dakle suština je u tome da pazimo gde i kako koristimo elemente da predstavimo određene podatke i sadržaj. Nema ništa jednostavnije od toga.

Vremenom cela ova priča dobija više smisla, kroz praksu se stvari iskristališu i prihvate lakše.

Jednostavno nema razloga za izostavljanje semantike iz weba. Ona čini web pristupačnijim (accessibility, i ne pričam samo o ometenim u razvoju i invalidima, pričam o mobilnom webu, koliko mislite da će proći do invazije ekrana širine 250px?), logičnijim i korektnijim.

Napravio bih sada jednu malu analogiju sa majstorima (ili bilo kojim zanatlijama) i nama kao dizajnerima za moderni web. Da li bi otišli kod majstora koji samo izgleda da zna svoj posao, ili kod onog koji stvarno zna svoj posao? Sve sam rekao. Ako želite da se bavite ovim poslom, naučite da ga radite kako treba. Nema izgovora.

Povezana tema na DTP

• « Mocking-up, najomrženija faza procesa web dizajna.
• AJAX buzz i reciprocitet na webu(dva) »

Komentari na ovaj unos 9

1. Ivan Minic kaže 26/12/05 03:26 PM

   Svaka cast za ovo :)
   
   Posebno za deo o tabelama i pogresnoj upotrebi strong, bq i em.
   
   Keep up the good work!

2. Dragan Babić kaže 26/12/05 03:42 PM

   

   Hvala, samo ima par grešaka u tekstu (gramatičke i pravopis) koje bih hteo da ispravim, ali mi TXP to iz nekog razloga ne dozvoljava više…

   Moram da pogledam o čemu se radi.

3. Ivan Minic kaže 26/12/05 05:07 PM

   Bar je ono _ cudo sklonjeTo :)

4. Dragan Babić kaže 26/12/05 05:19 PM

   

   Hehe, kao što vidiš upravo si napravio code. To je textile koji baš ne ume sa našim jezikom na žalost. Kada obaviješ tekst sa dva @ dobiješ code. :)

5. jasmanac kaže 27/12/05 12:42 PM

   Dobar clanak za sve one koji pocinju da se bave Web-om ;)

6. Dinke kaže 28/12/05 02:07 AM

   Videh ovaj tekst još ranije na planetoidu, ali nisam stigao da ga pročitam. Posle videh i onu raspravu na DTP-u pa ga više nisam mogao ignorisati.

   Vrlo kratko, tekst je odličan i aspolutno podržavam tvoje stavove (koje uostalom i sam zastupam). A sad idem na DTP da i tamo kažem šta mislim :)

7. Dragan Babić kaže 28/12/05 09:20 AM

   

   Hehe, mogu ti reći da je na DTP nastao pravi pakao oko ovoga, još će se posvađati neko jbte…

   Ne mogu da verujem da je tekst izazvao toliko kontradiktornih reakcija, formirali se tabori jbte! :)

8. Goran Pilipović kaže 28/12/05 12:13 PM

   Vidi sad oni zapalili ovamo da se rukuju i čestitaju jedan drugome… :) Aj’ onamo ako smeš :)

   Problem tamo je nastao oko večitog pitanja “kokoška ili jaje”... tvoj članak je samo bio šlagvort.

9. Dragan Babić kaže 28/12/05 03:20 PM

   

   Šlagvort šmagvort… ;)

Komentariši unos “Struktura HTMLa i njegova semantika”

Ukoliko se odlučite na smeli korak komentarisanja, Vaše ime će biti linkovano sa Vašim uri-jem ukoliko ste ga uneli. Vaša email adresa je neophodna, ali je diskrecija zagarantovana i neće biti prosleđena trećem licu. Spammeri stop.

Tekst komentara možete formatirati uz pomoć textile-a. Sav HTML će biti odstranjen.
Obratite pažnju na pravopis i po mogućnosti koristite naša slova.

Ime:

Email:

http://

Komentar:

Zapamti info?

Zadržavam pravo da sankcionišem, uklonim, izmenim offtopic komentare, kao i one koje nemaju veze sa unosom pod kojim su objavljeni. Sa druge strane podržavam i ohrabrujem otvaranja konstruktivnih i otvorenih diskusija putem komentara. Unapred hvala što se držite teme.