Semantično oblikovanje datuma z DL tagom

Na spletu lahko zasledimo trend lepo oblikovanih datumov, ki nam povedo, kdaj je bil objavljen nek zapis na blogu. S to zadevo sem se srečal tudi sam in za razliko od mnogih ostalih poizkusil za oblikovanje tega datuma uporabiti semantično (x)html kodo. Kako?

datum Zaključujem nek projekt, kjer je bil dan poseben poudarek na semantičnost (x)html kode. Sličica na levi je oblika datuma, katerega je bilo potrebno oblikovati. Tovrstna oblika je zadnje čase precej popularna in lahko jo zasledimo na marsikaterem blogu.
Oblikovati tak datum je seveda preprosta zadeva. Sprva sem to naredil z div tagi, kot kaže koda spodaj, vendar pa se mi ta rešitev ni zdela najboljša v kontekstu semantičnosti kode.

<div class="label">
    <div class="mesec">April</div>
    <div class="danCifra">17</div>
    <div class="danIme">Pet</div>
</div> 

V tem primeru ima div.label za ozadje sličico koledarčkovega listka, tekst v njem pa je oblikovan z classi. Kako bi lahko to kodo naredil bolj semantično, enostavno in sprejemljivo?

V (x)html-ju imamo par vrst seznamov, s katerimi lahko naštevamo pojme: ul, ol in dl. Ta zadnji, dl je bil še posebaj zanimiv, saj lahko vsebuje več elementov seznama, ob enem pa lahko vsak element dodatno opišemo oz. ga definiramo. Z tagom dl naredimo seznam definicij določenih pojmov. Sestavljata jih element seznama dt in njegova definicija oz. opis dd. Idealna rešitev za moj koledarček.

<dl>
    <dt>April</dt>
    <dd class="danCifra">17</dd>
    <dd class="danIme">Pet</dd>
</dl> 

Mesec april je tako dodatno opisan z dnevom in imenom dneva. Ta rešitev je vsekakor primernejša in bolj elegantna od tiste prve.

Priporočam za nadalnje branje:

- http://www.w3.org/TR/html401/struct/lists.html
- http://www.w3schools.com/HTML/html_lists.asp
- http://www.maxdesign.com.au/presentation/definition/

  • Zapisano dne 04-18-2009 v kategorijo Uporabnost spletnih strani
  • del.icio.us Favicon
  • Digg Favicon
  • Facebook Favicon
  • Technorati Favicon
  • TwitThis Favicon