[HTML] Semantisch beste productoverzicht

[geert1]

Voor mijn werk ben ik veel bezig met HTML/CSS, en loop vaak tegen het volgende punt aan, waar ik de beste oplossing probeer te vinden qua semantiek, SEO en elegantie / netheid van de code. Er zijn vast meerdere goede opties, maar ik zou graag horen hoe andere front-end kenners dit doen:

Een overzicht van producten bestaat voor de websites waaraan ik werk vaak uit een afbeelding (thumbnail), een titel en één of meer verdere stukjes informatie zoals een prijs, categorie of omschrijving. Het overzicht zelf definieer ik als een ul, de items als li-elementen. Tot dusver zou er weinig discussie moeten zijn lijkt me. Het lastige is dat ik graag het hele item aanklikbaar maak, maar tegelijk gebruik zou willen maken van semantisch goede opmaak.

Twee voorbeelden van hoe het naar mijn idee zou kunnen:

1. Alles samen in een omringend a-element, die het hele ding aanklikbaar maakt, maar waar binnen uiteraard alleen inline-elementen toegestaan zijn:

HTML:

<h1>Producten</h1>
<ul class="overview-products">
  <li>
    <a href="/link-naar/detailpagina.html">
      <img src="/thumbnail.jpg" alt="Product-titel" />
      <span class="title">Product-titel</span>
      <span class="price">&euro; 6,95</span>
      <span class="preview">Een korte omschrijving van het product.</span>
    </a>
  </li>
  [meer items...]
</ul>

Of: Meer semantische opmaak (h2, p) met een link erin voor Google en een onclick voor de gebruiker (de onclick zou dan wel via Javascript unobtrusive en onload op het li-element geplaatst worden, en een cursor: pointer erop voor de duidelijkheid).

HTML:

<h1>Producten</h1>
<ul class="overview-products">
  <li onclick="document.location.href='/link-naar/detailpagina.html'">
    <a href="/link-naar/detailpagina.html">
      <img src="/thumbnail.jpg" alt="Product-titel" />
    </a>
    <h2>Product-titel</h2>
    <div>&euro; 6,95</div>
    <p>Een korte omschrijving van het product.</p>
  </li>
  [meer items...]
</ul>

Welke zouden jullie kiezen, of zijn er nog hele andere goede opties?

Let op: Ik weet dat er technisch gezien legio werkende oplossingen zijn voor sit soort situaties, maar het gaat me hier met name even om de semantiek / usability / seo-aspecten van items in een overzicht.

[Aloys]

Ik zou voor je tweede voorbeeld gaan, maar voor de usability in de h2 nog een link maken, dus:

HTML:

<h1>Producten</h1> 
<ul class="overview-products"> 
  <li onclick="document.location.href='/link-naar/detailpagina.html'"> 
    <a href="/link-naar/detailpagina.html"> 
      <img src="/thumbnail.jpg" alt="Product-titel" /> 
    </a> 
    <h2>
       <a href="/link-naar/detailpagina.html"> 
          Product-titel
       </a>
     </h2> 
    <div>&euro; 6,95</div> 
    <p>Een korte omschrijving van het product.</p> 
  </li> 
  [meer items...] 
</ul>

Simpelweg omdat je bij een plaatje niet altijd kan zien dat je erop moet klikken. Tweakers vinden dat wel uit, maar internet oma's etc niet .

[418O2]

optie 2 kan sowieso al niet. Je zet sowieso al gegevens in een <div> zonder omringend element.

Ik zou gewoon voor elk product een div maken.

HTML:

<h1>Producten</h1> 
<div class="overview-products"> 
  <div onclick="document.location.href='/link-naar/detailpagina.html'"> 
    <span>
       <a href="/link-naar/detailpagina.html"> 
      <img src="/thumbnail.jpg" alt="Product-titel" /> 
      </a> 
    </span>
    <h2>Product-titel</h2> 
    <span>&euro; 6,95</span> 
    <p>Een korte omschrijving van het product.</p> 
  </div> 
  [meer items...] 
</div>

Oid. Het zal allemaal vrij weinig uitmaken voor je ux/seo, als je het maar goed opmaakt en niet té gek maakt.

[Verwijderd]

/me zucht

Het eerste voorbeeld is natuurlijk waardeloos. Begin eens met het compleet weglaten van een stylesheet. Als je opmaak in louter HTML er verschrikkelijk uitziet zit je sowieso op de verkeerde weg.

En waarom moet álles klikbaar zijn? Dat is echt totaal niet wat mensen gewend zijn.

optie 2 kan sowieso al niet. Je zet sowieso al gegevens in een <div> zonder omringend element.

Waar staat dat dat niet mag?

[ Voor 18% gewijzigd door Verwijderd op 18-08-2010 21:57 ]

[crisp]

Alles samen in een omringend a-element, die het hele ding aanklikbaar maakt, maar waar binnen uiteraard alleen inline-elementen toegestaan zijn

Gelukkig heeft HTML5 die restrictie opgeheven

[Cartman!]

418O2 schreef op woensdag 18 augustus 2010 @ 21:55:
Ik zou gewoon voor elk product een div maken.

Fout...hij vraagt om semantiek en je komt met de meest semantiek-loze tag die er is. Voor een opsomming gebruik je de list item.

[R4gnax]

Cartman! schreef op woensdag 18 augustus 2010 @ 22:03:
[...]

Fout...hij vraagt om semantiek en je komt met de meest semantiek-loze tag die er is. Voor een opsomming gebruik je de list item.

Voor een product + korte beschrijving gebruik je eerder een definition list:

HTML:

<dl class="product-overview">
  <dt><a href="link-naar/detailpagina.html">Product naam</a></dt>
    <dd><img src="/thumbnail.jpg" alt="Beschrijving van product foto" /></dd>
    <dd>&euro; 6,95</dd>
    <dd>Een korte omschrijving van het product.</dd>
  <dt>...</dt>
    <dd>...</dd>
  ...
</dl>

De product namen horen hier geen gebruik te maken van h2 of h3 elementen. Het betreft hier strikt genomen namelijk een navigatie structuur: een inhoudsopgave of index, met weliswaar een korte aanvullende beschrijving voor elk lid, en niet volledige secties.

Dit kun je gewoon netjes met CSS herpositioneren om een gewenste layout te bouwen. Dimensies van thumbnails bepaal je zelf. Je kunt geriefelijk aannemen dat de prijs slechts één tekstregel in beslag neemt, waarbij je dimensies van een netjes vormgegeven prijslabel element o.i.d. nog kunt verrekenen. Met wat absoluut of relatief positioneren is e.e.a. dus te rangschikken precies zo je wilt.

Past het vervolgens in je pagina stijl om een 'volledig item' klikbaar te maken en wil je dat met javascript doen, dan kun je hiervoor zelfs iets als jQuery inzetten om eenvoudig de juiste relatie tussen dt en dd elementen te bouwen. Bijvoorbeeld de volgende oplossing die met event delegation op de complete product overview werkt. (Let wel dat het natuurlijk wel een beetje overkill kan zijn om speciaal hiervoor een framework als jQuery te gaan gebruiken.)

JavaScript:

  $(document).ready(function() {
    $(".product-overview").delegate("dt, dd", "click", function(event) {
      var
        $this = $(this),
        $anchor = $this.is("dt")
          ? $this.find("a[href]")
          : $this.prevAll("dt").find("a[href]:last");
     
      if ($anchor.length > 0) {
        event.preventDefault();
        window.location = $anchor.attr("href");
      }
    });
  });

[Bosmonster]

Ik zou toch gaan voor een UL met producten, of OL als je kunt sorteren.

Voor producteigenschappen kun je eventueel een DL gebruiken, maar de producten zelf als definities zien voelt niet correct (naast het feit dat het bijna onmogelijk te stylen is).

Alles in 1 link proppen ben ik het mee eens, dat is gewoon niet handig uit accessibility-oogpunt.

[ Voor 28% gewijzigd door Bosmonster op 19-08-2010 10:01 ]

[LinkinTED]

Oplossing van R4gnax is de netste!

[Cartman!]

LinkinTED schreef op donderdag 19 augustus 2010 @ 10:37:
Oplossing van R4gnax is de netste!

Zo'n opmerking voegt natuurlijk niks toe aan dit topic Waarom is die het beste?

Ik blijf ook bij m'n lijst, zoals Bosmonster al aangeeft is het primair een lijst met daarin eventueel een definitie.

[Avalaxy]

Even een kleine suggestie aangezien je het hebt over SEO... Gebruik een title attribuut in je hyperlinks.

[geert1]

Bedankt voor de input tot dusver! Even wat korte reacties:

@Catch 22: Die opmerking over gegevens in een div raakt kant noch wal, dat is helemaal geen regel. Je maakt het overzicht een stuk minder semantisch, dus ik ben het met je oneens.

Verwijderd schreef op woensdag 18 augustus 2010 @ 21:55:
/me zucht
Het eerste voorbeeld is natuurlijk waardeloos. Begin eens met het compleet weglaten van een stylesheet. Als je opmaak in louter HTML er verschrikkelijk uitziet zit je sowieso op de verkeerde weg.

Mja, zit wat in. Mooi is anders inderdaad.

Verwijderd schreef op woensdag 18 augustus 2010 @ 21:55:
En waarom moet álles klikbaar zijn? Dat is echt totaal niet wat mensen gewend zijn.

Hier valt over te discussieren, maar inderdaad het is geen standaard dat het hele blok aanklikbaar is. Misschien is het meer een voorkeur van mezelf en qua usability is het op zich niet verkeerd lijkt me, maar ik kan me ook goed voorstellen dat gewoon de afbeelding en de titel aanklikbaar zijn, en de rest niet.

crisp schreef op woensdag 18 augustus 2010 @ 22:00:
Gelukkig heeft HTML5 die restrictie opgeheven

Dat is een erg nuttige tip, waarmee ik misschien het beste uit beide voorbeelden kan combineren.

@R4gnax: Definition list is inderdaad semantisch niet verkeerd. Ik ben niet zo gewend om dat te gebruiken, maar het klopt hier wel. Voor mijn gevoel is een ul / li structuur echter ook voldoende zoals Bosmonster en Cartman ook aangeven. En een dergelijk stukje jQuery is inderdaad waar ik op doelde: Het automatisch ophalen van de href en die als onclick op het element plaatsen.

En of het gebruik van een h2 / h3 hier juist is of niet, daar heeft R4gnax ook wel een punt. H1-6 zijn in principe natuurlijk bedoeld als titels voor een volledige tekst, niet voor een titel waar verder bijna niks onder hangt in een overzicht als dit. Maar toch wordt het veel gedaan, en er hangt wel een prijs en een korte omschrijving onder. Ook uit SEO-oogpunt zijn de h2's vast niet slecht verwacht ik.

Conclusie: Ik ben overtuigd dat optie 2 in elk geval een stuk dichter in de buurt zit bij de meest semantische oplossing. Het volledig klikbaar maken kan ik dus met jQuery aanpakken, of achterwege laten en alleen de afbeelding + titel van een link voorzien. De ul / li / h2 blijft er waarschijnlijk allemaal in. Bedankt tot dusver, verdere opmerkingen zijn welkom

[Bosmonster]

Avalaxy schreef op donderdag 19 augustus 2010 @ 12:57:
Even een kleine suggestie aangezien je het hebt over SEO... Gebruik een title attribuut in je hyperlinks.

Een title-attribuut is zinloos als die tekst hetzelfde is als de tekst in de link zelf. Het enige resultaat is anders irritante onnodige tooltips en dubbele teksten voor screenreaders.

Voor SEO maakt het overigens ook niks uit als die tekst hetzelfde is.

[ Voor 8% gewijzigd door Bosmonster op 19-08-2010 14:02 ]

[geert1]

Eens met Bosmonster: Ik voer alleen het title-attribuut in als de link zelf geen beschrijvende tekst bevat, dus als er iets in zit van "lees verder" of een afbeelding. Dan doe ik een title erop, anders niet. Dat is ook de algemene opvatting en de meest logische manier lijkt me. In de voorbeelden hierboven kan ik het nog best eens zijn vergeten daarentegen

[geert1]

Ik zou dit topic graag nog eens nieuw leven inblazen, ook om het af te sluiten.

Het gaat dus om overzichten (ul/li) waarvan voor elk item verschillende sub-elementen aanklikbaar zouden kunnen / moeten zijn, of (bijna) het hele item aankllikbaar moet zijn. Dit kan gaan om een nieuws-overzicht, een product-overzicht, een vacature-overzicht, noem maar op. Zo'n overzicht bestaan dan bijvoorbeeld uit een titel, een afbeelding en een korte preview-tekst. Op de frontpage van t.net (grote nieuwsitems bovenin) is zoiets ook te zien.

Dit soort overzichten wil ik graag zo semantisch en optimaal mogelijk beschrijven in mijn html. Hiervoor kan ik me een aantal oplossingen indenken:

1. Zoals Tweakers het doet: Op elk aanklikbare sub-element binnen de li telkens opnieuw een linkje plaatsen. Eventueel alle links behalve één voorzien van rel="nofollow" zodat er qua SEO één link is.
2. Gebruik van een block-level link: In HTML5 is het toegestaan om een a-tag om block-elementen heen te wrappen. Zo zou één a-element een img, een h4 en een p kunnen omvatten bijvoorbeeld.
3. Eén link gebruiken op het element met de meest duidelijke inhoud (dus de titel) en dan via jquery het hele li-element eromheen aanklikbaar maken. Dit zou kunnen vallen onder progressive enhancement voor usability.

Nog voorkeuren of andere opties? Ik vind dit toch wel iets wat heel vaak voorkomt in allerhande websites namelijk.

[ Voor 8% gewijzigd door geert1 op 31-10-2011 15:46 ]

[alienfruit]

Waarom niet gewoon een tabel?

[Cartman!]

Omdat het een opsomming is en geen tabulaire data?

[geert1]

Ai, ik hoopte dat we niet eerst 10 stappen terug zouden hoeven doen. @Alienfruit: Die keuze zou niet alleen semantisch helemaal nergens op slaan, maar het heeft ook niets te maken met de aanklikbaarheid en usability in dit vraagstuk. Je eerst verdiepen in de materie zou aan te raden zijn. Ik krijg bijna het vermoeden dat je zit te trollen...

[ Voor 3% gewijzigd door geert1 op 31-10-2011 19:58 ]

[alienfruit]

Hoezo? In de gemiddelde folder staat de producten ook gewoon in een tabel hoor met kolommen. Maar goed, zelfs hier bij Tweakers gebruiken ze tabellen ipv. een lijst.

[418O2]

Semantisch juist !== makkelijkste

[Aganim]

In de gemiddelde folder staat de producten ook gewoon in een tabel hoor met kolommen

Folderontwerpers blijven doorgaans gelukkig ook ver weg van HTML.

Je bent nu appels met peren aan het vergelijken.

[geert1]

@Alienfruit: Even voor jouw informatie: Een tabel gebruik je wanneer er een verband is tussen cellen per rij en per kolom. Bijvoorbeeld een kolom met getallen die opgeteld moeten worden. Met gebruik van kolom- en rijheaders geef je dan aan waar die rij/kolom over gaat. Is een handige structuur voor dat soort informatie, en sommige productoverzichten zou je ermee kunnen bouwen. Maar het gaat hier over overzichten in bredere zin, en in 90% van de gevallen is die informatie niet tabulair. Daarnaast gaat het over het aanklikbaar maken van de sub-onderdelen van elk item, en dat vraagstuk zou je met een tabel alsnog niet oplossen.

[Janoz]

Een tabel voor een productoverzicht is helemaal niet vreemd, maar dan gaat het natuurlijk wel over overzichten zoals bij tweakers. Rijen en kolommen worden niet door de layout gedicteerd, maar juist door de vorm van de te presenteren data. Elke rij een product en elke kolom een eigenschap.

[T-MOB]

Ik zou gaan voor HTML5-elementen (<section> met <article>'s) gecombineerd met optie 3. Ik zou alleen geen javascript inzetten om alles klikbaar te maken, maar een beetje trucen met CSS:

HTML:

<article>
 <h1>Title</h1>
 <p>lorem ipsum
 <a href="#"><span>lees verder</span></a>
</article>

Cascading Stylesheet:

article { position: relative; }
article a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
article a span { visibility: hidden; }

[R4gnax]

T-MOB schreef op dinsdag 01 november 2011 @ 12:36:
Ik zou alleen geen javascript inzetten om alles klikbaar te maken, maar een beetje trucen met CSS

Als elk product één containing element heeft, dan zou ik het inderdaad ook zo doen. Bij een term/description combinatie in een defintion list wordt dat iets lastiger. (Het kan trouwens vaak nog wel.)

Overigens; let wel even op dat niet in alle Internet Explorer browsers de hele regio van de anchor tag klikbaar zal zijn. Om het helemaal werkend te krijgen heb je nog een kleine hack nodig: background-image: url("#") zorgt voor een 100% transparante achtergrond die ook in Internet Explorer klikbaar is. (Het pad hoeft niet naar een geldig image te verwijzen en op deze manier wordt er niet een extra http request voor gestart...)

[Aloys]

T-MOB schreef op dinsdag 01 november 2011 @ 12:36:
Ik zou gaan voor HTML5-elementen (<section> met <article>'s) gecombineerd met optie 3. Ik zou alleen geen javascript inzetten om alles klikbaar te maken, maar een beetje trucen met CSS:

HTML:

<article>
 <h1>Title</h1>
 <p>lorem ipsum
 <a href="#"><span>lees verder</span></a>
</article>

Cascading Stylesheet:

article { position: relative; }
article a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
article a span { visibility: hidden; }

Komt die absolute nu niet over de hele pagina? Ik heb zo'n gevoel dat er tenminste 1 browser hier roet in het eten gaat gooien. Voor de rest vind ik het best een interessante oplossing.

[418O2]

áls het goed is dan komt hij absoluut ten opzichte van het eerste 'niet-inherit-gepositioneerde'-element.

Maar dit gaat in IE naturlijk hardstikke fout

[T-MOB]

Aloys schreef op dinsdag 01 november 2011 @ 13:01:
[...]

Komt die absolute nu niet over de hele pagina? Ik heb zo'n gevoel dat er tenminste 1 browser hier roet in het eten gaat gooien. Voor de rest vind ik het best een interessante oplossing.

Nee, absoluut gepositioneerde elementen worden ten opzichte van de dichtsbijzijnde relatief of absoluut gepostioneerde parent uitgelijnd. Het werkt alleen niet in IE6 omdat je daar een left of right en een width moet opgeven. Het simpel aangeven van left en right levert in IE6 niet automagisch een breedte op. (voor top en bottom geldt hetzelfde).

Verder wordt het in IE6 lastig om je hover state op te maken. de :hover pseudoklasse werkt in IE6 alleen op <a>.

Maar IE6 vind ik niet meer zo belangrijk, eerlijk gezegd.

Verder heb je natuurlijk te maken met de gewone quirks van IE, zoals het niet kunnen stylen van HTML5-elementen zonder JS en wat wazige dingen zoals die waar R4gnax op wijst. Maar goed, het voorbeeld was om het principe te laten zien, en dat werkt prima - ook in IE.

[geert1]

Mja, zo'n a-element over het hele item heen positioneren is op zich inderdaad ook nog een aardige optie. IE6 ondersteun ik sinds een tijdje niet meer, dus dat valt mee. Vraag me wel af hoe IE7 omgaat met de combi van [em]left[/em] en [em]right[/em]. Maar anders gewoon een vaste hoogte / breedte opgeven voor de absoluut gepositioneerde link. Daarnaast krijg je wel het nadeel dat je de onderliggende tekst niet meer kunt selecteren. Maar alsnog: goede optie.

Het wrappen van het hele elemen in een article tag vind ik trouwens niet zo geweldig. Een article moet volgens de spec een op zichzelf staand artikel zijn die je los zou kunnen lezen. Ik vind een piepkleine preview van iets in een overzicht geen article. De detailpagina die erachter hangt zou ik veel eerder als article zien. Dus het gehele nieuwsbericht, of product, of vacature, wat het maar is. De semantiek van HTML5 laat echter nogal wat ruimte over voor meningen en interpretatie, dus wie weet heb ik het mis.

Voor het overzicht ben ik altijd voor een ul- / li-structuur en op dit moment neig ik voor daarbinnen naar één a-element die om alles heen gewrapt zit. Zien jullie hier nadelen in, of verkiezen jullie andere opties?

[418O2]

*edit*

[ Voor 99% gewijzigd door 418O2 op 02-11-2011 09:39 ]

[T-MOB]

geert1 schreef op woensdag 02 november 2011 @ 09:34:
Mja, zo'n a-element over het hele item heen positioneren is op zich inderdaad ook nog een aardige optie. IE6 ondersteun ik sinds een tijdje niet meer, dus dat valt mee. Vraag me wel af hoe IE7 omgaat met de combi van [em]left[/em] en [em]right[/em]. Maar anders gewoon een vaste hoogte / breedte opgeven voor de absoluut gepositioneerde link. Daarnaast krijg je wel het nadeel dat je de onderliggende tekst niet meer kunt selecteren. Maar alsnog: goede optie.

Als je het hele item in een link wrapt gaat selecteren ook niet heel handig meer

Het wrappen van het hele elemen in een article tag vind ik trouwens niet zo geweldig. Een article moet volgens de spec een op zichzelf staand artikel zijn die je los zou kunnen lezen. Ik vind een piepkleine preview van iets in een overzicht geen article. De detailpagina die erachter hangt zou ik veel eerder als article zien. Dus het gehele nieuwsbericht, of product, of vacature, wat het maar is. De semantiek van HTML5 laat echter nogal wat ruimte over voor meningen en interpretatie, dus wie weet heb ik het mis.

Mijn redenering daar is dat de previewboxjes wel op zichzelf staande content vertegenwoordigen. Het is dan wel weinig content, het staat wel op zichzelf. Je kunt dezelfde boxjes ook gebruiken als gerelateerde content op een andere pagina, of om aanbiedingen te laten zien op je homepage, of zelfs op een hele andere website om direct naar nieuws/producten op jouw site te verwijzen. Maar goed, het is inderdaad geen exacte wetenschap.

Voor het overzicht ben ik altijd voor een ul- / li-structuur en op dit moment neig ik voor daarbinnen naar één a-element die om alles heen gewrapt zit. Zien jullie hier nadelen in, of verkiezen jullie andere opties?

Mijn voorkeur heb ik al laten zien, maar de hele handel in een <a> wrappen lijkt me ook een prima oplossing. (volgens mij wordt dat ook al jaren met succes toegepast, want ook al "mag" het niet volgens de spec - het werkt wel )

[geert1]

Thanks T-mob, denk dat we wel aardig op één lijn zitten. En het wrappen van blok-elementen in een a-tag mag sinds HTML5 wél volgens de spec, dus ook dat argument is niet langer van kracht. Je punt over de article-tag is inderdaad wel interessant; misschien gaat het niet om de hoeveelheid content van een article, maar om de uitwisselbaarheid.