De senaste åren har jag lagt mycket energi åt att göra min uppmärkning mer rik på semantik och mening. Något så trivialt som att döpa en klass eller ett ID kan bli en stor sak, då mindre lyckade val kan få delar av ett HTML-dokument att inte vara träffsäker.
Så idag, på jobbet, stötte jag på en värdig utmaning. Till och med standardsadvokater på mästernivå fruktar brödsmulorna.
Brödsmulor används i sagor för att skapa ett spår för protagonisten att följa när denne skall vända om och ta sig tillbaka. I gränssnittsdesign har man tagit efter detta för att skapa en horisontell historik för användarens aktivitet. I webbgränssnitt brukar brödsmulor dock beskriva var man befinner sig på webbplatsen, rent hierarkiskt, snarare än beskriva aktivitet:
madr.se > blog > archive > 2008 > 1 > 6
Brödsmulor är inte mycket för världen, rent visuellt: en eller flera länkar, separerade med ett skiljetecken, och en avslutande rubrik. Att bygga upp något som är semantiskt korrekt och meningsfullt är däremot en mardröm.
- Varje länk är en nivåer i navigationen. Längst till vänster är toppdomänen eller ett alternativ i huvudnavigationen. Efterföljande länk är alternativ i den tillhörande undermenyn. Nästa länk tillhör i sin tur undermenyns undermeny, et cetera.
- Skiljetecknet indikerar arv och berättar föräldern och barnen för varje enskild nivå.
- Längst till höger är aktiv sida, den sidan användaren befinner sig på.
Det mest korrekta sättet att märka upp brödsmulor är detta:
Vid en första anblick ser det inte så farligt ut ur en betraktares öga. Med hjälp av några rader CSS är det enkelt att få den nästlade listan att presenteras i rätt manér.
ul,li {list-style:none;display:inline;margin:0;padding:0;}/* iefix needed */li li:before {content:" > ";}
Alla webbutvecklare med några år i ryggen minns hur det var, eller hemsöks fortfarande av tabellbaserade layouter. Det är en förfärlig röra kod, där innehållet drunknar i strukturen - utan att strukturen nödvändigtvis är relevant för innehållet.
Känner ni igen er?
<ul id="breadcrumbs"><li>madr.se<ul><li>archive<ul><li>2008<ul><li>1<ul><li>6</li></ul></li></ul></li></ul></li></ul></li></ul>
Det är fullständigt orealistiskt att uppmärka på det viset. Brödsmulor hör därför till de sällsamma fallen där en religiös standardsadvokat måste ge efter för en komprimiss. I mitt fall valde jag att köra det så enkelt jag bara kunde.
<p id="breadcrumbs"> <madr.se <archive <2008 <1 <6</p>
Kontenta: om komplexiteten över bra uppmärkning av brödsmulor skapar frustration - släpp taget. Det är ingen idé, då det är orealistiskt att märka upp brödsmulor korrekt med dagens uppmärkningsalternativ.
Vi får hoppas att HTML5 erbjuder något smidigare.
Vidare läsning