Hopp til innholdet

cjohansen.no

Mikroformater

Det begynner å bli snart 2 år siden jeg først hørte noen hviske om mikroformater. Det tok derimot ganske lang tid før jeg satt meg skikkelig inn i hva og hvordan, men når jeg først gjorde det ble jeg fort veldig interessert. Mikroformater er en enkel måte å få mer ut av dataene dine gjennom semantisk HTML og standardiserte semantiske klassenavn.

Hva er mikroformater?

Mikroformater er kort fortalt en samling semantiske klassenavn og anbefalte måter å kode små datasnutter på. Man baserer seg på " plain old semantic HTML" (gitt akronymet "POSH") og tilfører ingen ny teknologi. Mikroformater er altså kun en måte å bruke eksisterende teknologi på. Siden mikroformater kun baserer seg på allerede godt støttet teknologi er det liten eller ingen risiko i å adoptere dem.

Jeg sa at mikroformater er et sett med anbefalte måter å kode enkelte datasnutterpå. Trass i dette legger ikke formatene føringer på HTML i form av hvilke tagger som skal brukes og i hvilken rekkefølge. La oss se et eksempel.

Visittkort

På ixd.no har vi en liste med våre ansatte og deres kontaktinfo. I bunn og grunn er dette en liste med digitale visittkort. Til dette formålet har vi mikroformatet hCard. hCard er et mikroformat som har sitt opphav i den eksisterende standarden vcard. Kontaktinfoen som vises på ixd.no ser ut som:

Teodor Bjerrang

Interaksjonsdesigner

Tlf: 90 78 01 90

tb a ixd.no

Dette var i utgangspunktet kodet som: 

<li>
    <strong>Teodor Bjerrang</strong>
    Interaksjonsdesigner<br />
    Tlf: 90 78 01 90<br />
    <a rel="email">tb a ixd.no</a>
</li>

Med andre ord ganske løst, og ganske sannsynlig med en <br /> eller to for mye. For å konvertere dette til mikroformatet hCard trenger jeg bare å gjøre koden mer semantisk. Jeg trenger å legge til informasjon om hva som er navn, hva som er stilling, telefon og e-post. Slik er vi vant til å tenke, bortsett fra at HTML ikke har spesifikke tagger for disse tingene. Her kommer mikroformater inn: 

<li class="vcard">
    <strong class="fn">Teodor Bjerrang</strong>
    <span class="title">Interaksjonsdesigner</span>
    <span class="tel">Tlf: <span class="value">90 78 01 90</span></span>
    <a rel="email" class="email">tb a ixd.no</a>
</li>

Kun ved å bruke noen semantiske klassenavn har vi gjort om et helt generisk eksempel til en instans av et mikroformat. Som du ser har jeg ikke mistet noe frihet plassering av elementer eller bruk av tagger. Det jeg derimot har fått er en del span-tagger.

Gir mikroformater "bloated" kode?

Etter å ha sett eksempelet over med tre <span> er dette naturlig spørsmål. Svaret er at ja, i noen tilfeller får du litt mer HTML når du ønsker å bruke mikroformater, men jeg vil ikke påstå at det er "bloat". La oss ta et eksempel: 

Artikler:<br />
<a href="#">A</a> | <a href="#">B</a> | <a href="#">C</a>
<h1>Artikler</h1>
<ul>
    <li><a href="#" title="Se alle artikler med navn på A">A</a></li>
    <li><a href="#" title="Se alle artikler med navn på B">B</a></li>
    <li><a href="#" title="Se alle artikler med navn på C">C</a></li>
</ul>

Det er ikke vanskelig å tenke seg eksempler der disse to eksemplene ser helt like ut. Men fordi det andre eksempelet er bedre strukturert og mer nøyaktig beskrevet er det også lettere å stile med CSS, og bedre tilgjengelig/bedre maskinlesbart. Koden tar opp ganske mye mer plass, men det er alikevel ingen som vil påstå at eksempel 2 er "bloated", nettopp fordi den ekstra koden gir verdifull informasjon. Faktisk illustrerer eksempelet semantisk HTML i praksis

Det er akkurat det samme vi gjør med mikroformater. Grunnen til at jeg måtte legge til tre <span> i mitt eksempel var manglende elementer rundt hver spesifikke datakomponent. noe som gjør det vanskelig å beskrive hver komponent hver for seg.

Det oppfordres eksplisitt i Microformats.org-wikien til å bruke de mest passende HTML-elementene i alle tilfeller. <span> og <div> oppfordres kun brukt i de tilfellene det ikke finnes et passende HTML-element, akkurat slik HTML-spesifikasjonen definerer dem.

Hva er mikroformater godt for?

Dette er vel og bra, men hva skal vi bruke mikroformater til? Gitt at mikroformater fortsatt er relativt nytt er vi i en situasjon at jo flere som tar det i bruk, jo flere verktøy vil dukke opp, og igjen flere vil ta det i bruk. Mange mikroformater er allerede godt adoptert, og det finnes flere tillegg til Firefox for eksempel, som gjør nytte av mikroformater.

Et av disse verktøyene er Operator. Operator legger til en verktøylinje i Firefox som lar deg lese forskjellige mikroformater når de brukes på en side. Med visittkorteksempelet over er det for eksempel mulig å importere kontakter rett inn i adresseboken din. Dette gjøres rett og slett ved å konvertere hCard-et til vcard og sende det tilbake med riktig mime-type. Da begynner vi å snakke praktisk nytte.

Andre måter å nytte mikroformater på er å lage aggregeringstjenester som baserer seg på mikroformatert innhold. For eksempel har technorati laget verktøy for å søke i blogger basert på rel-tag-mikroformatet. I en tid der distribuert innhold er en hot greie er dette absolutt en interessant angrepsvinkel.

Videre lesing

Mikroformater blir mer og mer spennende jo mer man kommer inn i det, og det finnes mange flere enn de to jeg har nevnt her. Det beste stedet å starte for de som vil vite mer er mikroformat-wikien. John Allsop har også skrevet en god bok om mikroformater som er veldig grundig. Den dekker også bakenforliggende konsepter, så som semantisk HTML veldig godt. Den setter også mikroformater i sammenheng med RDF og større konsepter som den semantiske webben.

Publisert 1. november 2007 under html.

Muligens relatert

2006 - 2012 Christian Johansen Creative Commons Lisens