Onlangs gaf ik voor mijn collega’s op kantoor een presentatie over HTML5. Dit is het eerste deel van een tweeluik en tevens een introductie tot de verschillende nieuwe of vernieuwde elementen in HTML5.
Het is een eerste kennismaking met wat HTML5 op structureel gebied (markup) te bieden heeft. In een volgende presentatie, Advanced HTML5, zal ik verder uitweiden over de verschillende API’s waarover HTML5 beschikt.
Broodkruimelnavigatie (breadcrumb of kruimelpad) is een handige en visuele manier om de bezoeker duidelijk te maken waar hij zich precies bevindt op een hiërarchisch ingedeelde website.
Ons doel is, om de broodkruimel zo semantisch mogelijk in HTML op te maken. Er is alleszins al genoeg over gediscussieerd, lees er maar SimpleQuiz part XII eens op na. De algemene conclusie daar was dat je semantisch gezien het best opteert voor geneste ongenummerde lijsten. In de praktijk leek dat echter minder haalbaar vanwege de vrij complexe HTML structuur.
Voorbeeld broodkruimel met geneste ongenummerde lijsten
Het is dus zoeken naar een evenwicht tussen semantiek, praktische eenvoud en de toegankelijkheid van de gebruikte HTML.
Daarom hanteren wij voor breadcrumbs steeds volgende HTML opmaak:
<div id="breadcrumb">
<strong>Je bent hier<span class="hide">:</span></strong>
<span class="hide"> van </span>
<a href="#">Startpagina</a>
<span>naar</span>
<a href="#">Kinderboeken</a>
<span>naar</span>
<a href="#">Prinses</a>
<span>naar</span>
<em>De avonturen van prinses</em>
</div>Wanneer je de CSS styling uitzet, lees je dit:
Je bent hier: van startpagina naar kinderboeken naar prinses naar de avonturen van prinses
Met die HTML markup heb je trouwens voldoende ankerpunten om het via CSS bijvoorbeeld op volgende manieren te stylen:
Voorbeeld broodkruimel Diabetes VDV
Voorbeeld broodkruimel TV.be
Voorbeeld broodkruimel Plan België
Voorbeeld broodkruimel MVO Vlaanderen
Voorbeeld broodkruimel Poncha
De CSS ziet er in het geval van Poncha zo uit:
#breadcrumb {
margin: 0 0 20px 0;
padding: 27px 0 0 20px;
}
#breadcrumb strong {
float: left;
padding-right: 25px;
color: #6589a5;
background: url(/img/sprite.png) no-repeat 100% -280px;
}
#breadcrumb a {
float: left;
text-decoration: none;
}
#breadcrumb a:hover { text-decoration: underline; }
#breadcrumb span {
float: left;
width: 25px;
text-indent: -999em;
background: url(/img/sprite.png) no-repeat 100% -280px;
}
#breadcrumb em {
float: left;
font-style: normal;
color: #e2007a;
}
/* Generic hide */
.hide {
position: absolute;
display: block;
padding: 0 !important;
text-indent: -999em ;
font-size: 0px;
height: 0px !important;
line-height: 0px !important;
background: none !important;
}De class=”hide” kan je hangen aan die onderdelen die niet moeten getoond worden, bijvoorbeeld het U bent hier gedeelte, of het :-teken.
Concreet is de HTML voor alle voorbeelden steeds dezelfde (op de hide class na) en is het gewoon de CSS die, zij het lichtjes, varieert naargelang het design van de website.