Semantisk kontaktinformasjon
HTML-ens fantastiske semantikk står i sentrum i årets julekalender her på bloggen, og idag ser vi på hvordan kontaktinformasjon best kan kodes på en strukturert måte.
Aktuelle elementer
I første omgang ser jeg litt på hvordan <address> kan brukes, og ikke minst når det ikke passer å bruke denne. Deretter kikker jeg litt på mikroformatene adr, hCard og geo, som kan kodes med vilkårlige elementer.
Bruksområder
Bruksområder for kontaktinformasjon på webben er slettes ikke få. Kontaktinformasjon kan være alt fra informasjon om hvordan man kontakter eieren av et nettsted, eller hvordan man kontakter én bestemt avdeling hos en bedrift, til kontaktskjemaer på sosiale nettsteder osv.
Kontaktinformasjon med <address>
address defineres i spesifikasjonen som et element som markerer kontaktinformasjon for et dokument, eller en større del av et dokument. Dette betyr at elementet ikke kan brukes til det kanskje mest åpenbare: vilkårlige postadresser. Elementet er et inline-element, så det er heller ikke tillatt å plassere blokkelementer inne i det.
Når spesifikasjonen sier at vi kan markere kontaktinformasjon for et dokument eller større deler av et dokument (spesifikasjonen foreslår eksempelvis et skjema) blir elementet noe mer innsnevret enn først antatt, men tenkter man litt over det er det fullt mulig å bruke elementet relativt fritt alikevel. <address> trenger ikke å inneholde en faktisk adresse. Det kan inneholde et telefonnummer, en e-postadresse eller rett og slett bare en lenke.
"Et dokument" kan være for eksempel kundeservice-siden din. På denne siden ville det være passende å bruke <address> rundt kontaktinformasjon for kundeservice. Et eksempel, navlebeskuende i god cjohansen.no-tradisjon:
<address>
For tekniske spørsmål om Kuttisme.no ta kontakt med <a href="http://www.cjohansen.no">Christian Johansen</a>.
Alle andre spørsmål kan rettes til <a href="mailto:kp @ ixd.no">Karl Philip Lund</a>
</address>
Denne koden kunne vært plassert på eksempelvis "Om Kuttisme"-siden på www.kuttisme.no.
Kontaktinformasjon og mikroformater
Dette er vel og bra i de tilfellene vi ønsker å sette brukeren i kontakt med oss som driver og eier nettstedene. Hva med alle kontaktene vi viser frem? Tenk deg en opplysningstjeneste som Gule Sider. Kjernevirksomheten deres er å vise kontakter i form av bedrifter og mennesker i katalogen deres. I dette tilfellet er det ikke passende å bruke <address> siden kontaktene ikke har noe med dokumentet eller en større del av dokumentet å gjøre (ihvertfall ikke i listinger og søketreff).
Adresser med mikroformatet adr
Mikroformatet adr er til for å markere adresser i det helt generelle. Egenskaper for å kode adresser med adr er p ost-office-box, extended-address, street-address, locality, region, postal-code og country-name. La oss se et eksempel (skamløst hentet fra mikroformatwikien):
<div class="adr">
<div class="street-address">665 3rd St.</div>
<div class="extended-address">Suite 207</div>
<span class="locality">San Francisco</span>,
<span class="region">CA</span>
<span class="postal-code">94107</span>
<div class="country-name">U.S.A.</div>
</div>
I dette eksempelet brukes det kun generiske elementer for å tagge opp adressen, men det er ikke noe i veien for å bruke andre elementer dersom du for eksempel ønsker å vektlegge deler av adressen. Legg merke til at dersom du bruker <address> korrekt som beskrevet over og elementet tilfeldigvis inneholder en postadresse kan og bør du også bruke adr (dvs <address class="adr">...</address>).
Stedsinformasjon med mikroformater
Noen ganger har vi ikke adressen tilgjengelig, men andre beskrivelser av et sted. Hvis vi sitter på geodata, eller mer spesifikt lengdegrad og breddegrad kan vi bruke mikroformatet geo for å gi denne informasjonen til klienten. Merk at lengde- og breddegrad sjelden har stor interesse for brukeren, så det kan være greit å ha en mer menneskevennlig representasjon av stedsinformasjonen tilgjenglig. Dette kan være for eksempel en adr-kodet adresse eller en muntlig forklaring på stedet.
Følgende er et eksempel fra Flickr.com:
<span class="geo">
<span class="latitude">
9.560718
</span>
<span class="longitude">
100.03395
</span>
</span>
Dette gjemmes via CSS, så det er kanskje ikke helt i tråd med "for humans first and machines second", men jeg ser ingen store problemer med den tilnærmingen. Et annet eksempel fra mikroformatwikien er dette:
<div class="geo">
<abbr class="latitude" title="37.408183">N 37° 24.491</abbr>
<abbr class="longitude" title="-122.13855">W 122° 08.313</abbr>
</div>
Det eneste problemet jeg ser med denne løsningen er faktumet at verdien i title ikke egentlig er mer menneskeleselig enn selve innholdet, snarere tvert imot.
Kontaktinformasjon med mikroformatet hCard
hCard har blitt omtalt her på huset tidligere. hCard er en full implementering av vcard-standarden for digitale visittkort som kan brukes i blant annet HTML. Både adr og geo som er omtalt i dette innlegget er subsett av hCard. Jeg innledet mikroformater i dette innlegget ved å prate om telefonkataloger og vilkårlig kontaktinformasjon. I havet av opplysningstjenester her i landet finner vi opplysningen 1890, en tjeneste som har tatt i bruk disse mikroformatene for å gjøre dataene lettere tilgjengelig. Følgende er et eksempel fra min oppføring i 1890. Eksempelet er noe modifisert for økt lesbarhet.
<tr class="vcard odd">
<td class="fn n">
<span class="given-name">Christian</span>
<span class="family-name">Johansen</span>
</td>
<td class="adr">
<a href="?gate_id=...">
<span class="street-address">Aamodtterrassen 15</span>,
<span class="postal-code">2008</span>
<span class="locality">Fjerdingby</span>
</a>
</td>
<td class="map">
<a href="?map=1...">Kart</a>
</td>
<td class="tel">
<ul>
<li class="home voice">63 01 44 77</li>
<li class="cell voice">934 17 480</li>
</ul>
</td>
</tr>
Flere gode tips til koding av kontaktinformasjon der ute? Kom med det, share the love!
Kommentarer er stengt