Szemantikus tagcloud készítése

A webet böngészgetve szomorúan tapasztalható, hogy a tagcloudok igen nagy százaléka nem a szemantikus web jegyében született. (Mit nekem szemantika, amikor a weblapok java még csak validnak sem mondható!) Ebben igen nagy szerepe van annak, hogy a TagCloud.com nyújtotta címkekupacok sem a megfelelő jelölőket használják a tartalom leírására, pedig nem nagy feladat a kódot átalakítani. Gyakorlatilag egy linkhalmaz megfelelő elemek közé rendezéséről van szó. A hivatkozások között nem állapítunk meg semmilyen fajta hiearchiát, így egyenrangúnak tekinthetők, tehát egy egyszintes lista tökéletes választás a számukra. A HTML nyelvén az UL jelölőre van szükségünk. Az egyes LI listaelemek automatikusan blokk szintűek, CSS segítségével csupán át kell őket állítani inline-né. Megjelenésben ugyanolyan, mint előtte, de így a felolvasó szoftverek és a szövegesmodú böngészők számára is értelmet nyernek a linkek.

Ahogy tehát nem javasolt (részlet a TagCloud generálta kódból):

<div class="tagcloud">
  <span class="level1">
    <a href="http://www.tagcloud.com/tag/Slashdot/access/">access</a>
  </span>
  <span class="level2">
    <a href="http://www.tagcloud.com/tag/Slashdot/action/">action</a>
  </span>
</div>

A fenti példában ömlesztve tálaljuk a linkeket, semmi jelet nem találunk arra nézve, hogy milyen viszonyban vannak egymással. A következő megoldás javasolt helyette:

<ul id="tagcloud">
  <li class="level1">
    <a href="http://www.tagcloud.com/tag/Slashdot/access/">access</a>
  </li>
  <li class="level2">
    <a href="http://www.tagcloud.com/tag/Slashdot/action/">action</a>
  </li>
</ul>

A formázás pedig:

ul#tagcloud { list-style: none; margin: 0; }
ul#tagcloud li { display: inline; }