[HTML5] Het aside-element

[geert1]

Nu de html5-standaard langzaamaan steeds meer in real life situaties voet aan de grond krijgt, loop ik tegen een aantal onduidelijkheden aan in de spec. Het blijft allemaal vrij ruim gedefinieerd naar mijn mening. In dit topic wilde ik specifiek de aside-tag aanhalen, en hoe deze gebruikt dient te worden. In het bijzonder in relatie tot de sidebar(s) van websites.

In veel van de websites waar ik aan werk, zijn één of twee sidebars inbegrepen. Deze bevatten vaak meerdere onderdelen zoals subnavigatie, call-to-action-banners, contactinformatie, advertenties en andere secundaire content. Deels is deze van toepassing op het artikel / de huidige pagina, maar vaak vooral het overstijgend (site-breed).

Nu wordt er veel gesproken over het gebruik van een aside-tag. In de laatste aanpassing van de spec is vast gelegd dat een aside-tag binnen een article-tag gerelateerd is aan het artikel, terwijl de aside-tag ook als hoofd-sectie van de website kan worden gebruikt. Ik wilde hieronder graag met twee code-voorbeelden laten zien hoe dit zou kunnen worden ingezet, waarbij suggesties en verbeteringen erg wenselijk zijn.

HTML:

<div id="main" role="main">
  <section class="content">
    <h1>De titel van de pagina</h1>
  </section>
  <aside class="sidebar">
    <a class="banner">Een grafische banner</a>
    <a class="banner">Nog een grafische banner</a>
    <ul class="ads">
      <li><a href="#"><img src="/ads/ad1.jpg" alt="advertentie 1" /></a></li>
      <li><a href="#"><img src="/ads/ad1.jpg" alt="advertentie 1" /></a></li>
    </ul>
  </aside>
</div>

HTML:

<div id="main" role="main">
  <section class="content">
    <h1>De titel van de pagina</h1>
  </section>
  <div class="sidebar">
    <aside class="banners">
      <a class="banner">Een grafische banner</a>
      <a class="banner">Nog een grafische banner</a>
    </aside>
    <aside class="ads">
      <ul>
        <li><a href="#"><img src="/ads/ad1.jpg" alt="advertentie 1" /></a></li>
        <li><a href="#"><img src="/ads/ad1.jpg" alt="advertentie 1" /></a></li>
      </ul>
    </aside>
  </div>
</div>

Dit roept bij mij toch enige vragen op, met name: Is een aside een verzameling van alle semi-gerelateerde blokken, of zou elk blok een eigen aside zijn, verpakt in bijvoorbeeld een div of een section? Of moeten bijvoorbeeld call-to-actions en ads helemaal niet in een aside?

Maken jullie gebruik van de aside-tag, en zo ja: hoe dan? Suggesties, ideeën, voorbeelden en discussie welkom.

[RobIII]

De spec zegt:

quote: http://dev.w3.org/html5/spec/Overview.html#the-aside-element

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

Dus volgens mij kan allebei wat je wil. Zie ook de examples op die pagina. Semantisch gezien zeg je, zoals ik 't begrijp, min-of-meer: hey, dit staat allemaal wel op deze pagina, maar 't is niet (echt) relevant voor de daadwerkelijke inhoud van de pagina; het is hooguit gerelateerd.

[ Voor 20% gewijzigd door RobIII op 28-10-2011 10:05 ]

[geert1]

Thanks Rob, maar toch blijft er enige verwarring. Er wordt namelijk gezegd "typographical effects like pullquotes or sidebars". Een sidebar in de traditionele zin van het woord is een bij-artikel in een tijdschrift. Dus als je het over het oude rome hebt, dat je dan in een sidebar verteld wie Ceasar was. Een sidebar in een website is vaak een erg multifunctioneel hoofdonderdeel (landmark) van een site en daar komt bij mij de twijfel vandaan. Je ziet het ook vrij breed geïnterpreteerd worden, bijvoorbeeld door het Wordpress Twenty Eleven theme die in html5 is geschreven. Bekijk dat eens ten opzichte van bijvoorbeeld de site van HTML5 Doctor (artikel is ook interessant, maar gaat hier even om de bron van de site zelf). Dit zie ik beide toch als enigszins gezaghebbende bronnen van goede code.

Waarschijnlijk heb je gelijk en mag het beide, wat ook gelijk het nadeel is aan HTML: Soms is het mij veel te vrij. Vooral mensen die iets minder met semantiek hebben maken allerlei combinaties van tags en alles rendert goed en werkt. Soms wou ik wel dat het wat strakker bepaald werd allemaal

[ Voor 14% gewijzigd door geert1 op 28-10-2011 10:07 ]

[Flowmo]

Er is niet 1 strikte wijze voor het gebruik van <aside>. Het is ruim opgezet zodat het ook vrij ruim geinterpreteerd en ingezet kan worden. Een <aside> in een <article> kan bv. inhouden dat er een gerelateerd tekstje met externe links in staan.
Een <aside> op hoofdniveau kan inhouden dat er dus inderdaad banners e.d. in staan.

Aside zie ik meer als een element waar "wat minder relevante" content in staat tov de pagina of de hoofdcontent. Zo zou je bijvoorbeeld een sidebar met navigatie en daaronder banners als volgt op kunnen zetten:

HTML:

<div class="column">
<nav>
Navigatie hier
</nav>
<aside>
Banners hier
</aside>
</div>

Zoland het gebruik van de tag maar semantisch correct is, zit je prima.

[Bosmonster]

Aangezien banners geen onderdeel zijn van de content, vraag ik me serieus af of je die uberhaupt wel in een content-container wilt plaatsen in html5.

Ik zou ze gewoon met een div op de juiste plek zetten.

[NMe]

Bosmonster schreef op vrijdag 28 oktober 2011 @ 12:49:
Aangezien banners geen onderdeel zijn van de content, vraag ik me serieus af of je die uberhaupt wel in een content-container wilt plaatsen in html5.

Ik zou ze gewoon met een div op de juiste plek zetten.

Inderdaad, dat lijkt mij ook de meest zinnige oplossing. Semantiek heeft alleen zin als er geen clutter in staat.

[geert1]

Zit wat in, ik probeerde ook meer een paar voorbeelden te bedenken omdat er van alles in de sidebar kan staan. Verder neem ik wel aan dat de aside-tag gebruikt kan worden voor een hele sidebar als geheel, én voor losse onderdelen in de sidebar. Ik kom zelfs aside-tags binnen aside-tags tegen, hoewel ik dat zelf niet zo logisch vind. Deze nieuwe laag van semantiek geeft wel meer mogelijkheden, maar maakt het geheel niet bepaald eenduidiger...

[ Voor 4% gewijzigd door geert1 op 28-10-2011 14:12 ]