[HTML] Meedenken over semantiek/seo

[Ulster Seedling]

Hallo tweakers,

Voor een klant ben ik bezig met een webshop. De template in Photoshop is af en met de html/css-versie ben ik druk bezig. Helaas loop ik echter tegen wat dilemma's qua opbouw van de html-code aan, graag zou ik jullie dus om hulp vragen.

Ten eerste is het natuurlijk handig om de template erbij te pakken. Dit is niet de laatste versie, qua kleuren is er nog wat gewijzigd, maar de opbouw is hetzelfde. Aangezien het hier om een webshop met boeken gaat, is er al veel concurrentie. Een hoge positie in Google is dus een must en geen pré. Daarom wil ik de html-opbouw zo netjes mogelijk hebben, hopelijk wordt Google daar blij van.

Zoals je kunt zien is de website opgebouwd uit twee kolommen met blokjes. In de html komt dit terug met een #container-div met daarbinnen een #main- en een #sidebar-div. De code voor de blokjes zelf heb ik niet vastgelegd. Een eerste opzet is al gemaakt. (Let niet op de <table>'s die misgaan, en verder moet ik in andere browsers nog testen.) Daarbij kan ik in principe door de CSS blokjes op de volgende manier weergeven:

• <div>
• <form>
• <table>
• <ul> of <ol> waarbij de eerstegraads <li>'s de blokjes worden

De titels van de blokjes zijn in principe <h*>'s, behalve bij een blokje gevormd door een <table>, daarbij is de <caption> de titel. Op deze manier ziet de bezoeker overal 'gewoon' blokjes, maar kan ik het in de broncode zo netjes en logisch als mogelijk houden. Zelf denk ik dat deze manier best goed is, mochten jullie daar een andere visie op hebben, dan hoor ik dat natuurlijk graag.

Tot nu toe lukt dat allemaal wel goed, er is nog wat gedoe met de <table>'s, maar dat los ik wel op. Echter ik twijfel nu over hoe ik de blokjes met boeken moet gaan opbouwen, zoals ook in de screenshot van de template te zien is. Bijvoorbeeld op de homepage zijn een aantal blokjes met verschillende soorten boeken (bestsellers, nieuwe titels, aanbiedingen, aanraders, et cetera) waarin vier boeken staan. In principe zou ik zeggen dat ik een <ul> waarin de vier blokjes <li>'s zijn. Binnen de <li>'s heb ik een <h2> voor de titel van het blokje en volgt een nieuwe <ul> voor de vier boeken. Daarbinnen zou ik dan een <h3> voor de boektitel willen gebruiken en de rest van de informatie gewoon in <p>'s willen weergeven.

Naast de homepage komen er nog tekstpagina's, productpagina's, systeempagina's zoals het winkelmandje en pagina's met producten zoals de zoekpagina en pagina met alle titels van een bepaalde categorie. Vooral die laatste soort pagina's is ook nog wat lastig, al lijkt het erg veel op de homepage. In principe lijkt het mij het beste om een <div> voor het blokje te nemen, een <h1> voor de titel en dan een <ul> voor de lijst met boeken. Binnen de <ul> lijkt alles dan weer op de opbouw van de homepage.

Op zich klinkt dit voor mij zo best logisch en semantisch gezien correct, maar vinden jullie dit ook? Graag ontvang ik tips, meningen of kritiek.

Alvast bedankt voor het meedenken!

Groet,
Jonathan

[Passenger]

Goed dat je er over nadenkt! Volgens mij maak je het jezelf alleen wel een beetje onnodig moeilijk. Waarom maak je niet gewoon van alle blokjes divjes? Dus bij een form of een table gewoon niet moelijk doen, maar het volgende:

HTML:

<div class="panel">
  <h2>Titel</h2>
  <form.....etc
</div>

Op lange termijn gaat dat je stylesheet een stuk onderhoudsvriendelijker houden en voor Google maakt dit echt niets uit. Ook is het zo makkelijker om problemen in verschillende browsers op te lossen omdat je je maar op 1 type element hoeft te focussen.
Voor de blokjes met boeken geldt hetzelfde verhaal, maak het jezelf niet te moeilijk en gebruik per blokje een div, met daar in een h2 en een ul met daarin 4 li's voor de boeken.

Semantisch gestructureerde HTML is erg mooi, maar IMHO eigenlijk vooral noodzakelijk als toegankelijkheid prioriteit heeft. Als je het alleen voor Google doet zou ik me er niet zo druk om maken, er zijn 1001 andere zaken die Google veel belangrijker vindt! (pagerank, backlinks, keyword density, relevante meta-tags, relevante headers, relevante <title>, etcetcetc)

Wat me nog meer opviel:

• Escapen van HTML characters is niet nodig als je je content-type op utf-8 zet.
• CSS3 selectors die je gebruikt (bijv. #container > * > table caption) werken niet in IE6. Geef je blokjes gewoon een class mee, dat werkt altijd.

[Ulster Seedling]

@Passenger: Dankjewel voor je reactie. 'Helaas' was ik eerder vanmiddag al begonnen aan het ombouwen en dat is nu net af, dus nu ik het toch zo heb laat ik het maar zo*. Over het escapen in utf-8: hmm, je hebt inderdaad gelijk. Ik werk nog niet zo lang met utf-8, dus dit wist ik nog niet zeker. Het is nu aangepast! Over IE6 en de css3-selectors: waarschijnlijk hebben mensen met IE6 maar pech. Als ik straks klaar ben ga ik in alle browsers testen, mocht het niet te veel werk zijn, dan zal ik kijken of ik een speciale IE6-stylesheet kan maken om toch wat te compenseren, maar anders pech.

* Je moet overigens wel toegeven dat het op deze manier echt kick-ass is

[ Voor 7% gewijzigd door Ulster Seedling op 14-02-2010 18:01 . Reden: Toevoeging ]

[pieturp]

Ban sowieso die vieze <table>'s! Ze bevatten geen tabulaire data...

In 't geval van je winkelwagen, bijvoorbeeld, heb je ze niet nodig. Gewoon een <ol> met <li>'tjes en een elementje om de prijzen rechts te laten uitlijnen.

Overigens hoop ik dat je nieuwe kleuren iets minder schreeuwerig zijn. Maar goed, da's een kwestie van smaak, geloof ik

[Verwijderd]

pieturp schreef op zondag 14 februari 2010 @ 23:33:
Ban sowieso die vieze <table>'s! Ze bevatten geen tabulaire data...

In 't geval van je winkelwagen, bijvoorbeeld, heb je ze niet nodig. Gewoon een <ol> met <li>'tjes en een elementje om de prijzen rechts te laten uitlijnen.

Praat toch geen onzin. Er staat wel degelijk tabulaire data. Er zijn 3 kolommen met verschillende typen data, er zijn 3 rijen met dezelfde typen data per kolom.

Aantal, naam, prijs. Dat zijn de kopjes die boven de kolommen zouden kunnen. Dit is een uitstekend voorbeeld van wanneer je een tabel moet gebruiken.

[Verwijderd]

jhogervorst schreef op zondag 14 februari 2010 @ 13:28:

Een hoge positie in Google is dus een must en geen pré.

Er speelt iets meer mee dan correct gebruik van HTML. Ik zou me vooral richten op goede marketing en zorgen dat er vooral veel naar je site gelinkt wordt.

[pieturp]

[b][message=33470665,noline]
Praat toch geen onzin. Er staat wel degelijk tabulaire data. Er zijn 3 kolommen met verschillende typen data, er zijn 3 rijen met dezelfde typen data per kolom.

Ach, ik vind dat een lijst, jij een tabel.

[ Voor 16% gewijzigd door pieturp op 14-02-2010 23:52 . Reden: nodige nuancering ]

[Ulster Seedling]

Verwijderd schreef op zondag 14 februari 2010 @ 23:41:
[...]

Er speelt iets meer mee dan correct gebruik van HTML. Ik zou me vooral richten op goede marketing en zorgen dat er vooral veel naar je site gelinkt wordt.

Daar heb je zeker gelijk in, maar het lijkt me dat alle beetje mooi meegenomen zijn, dus ook semantisch correcte html. De marketing is niet mijn zaak, dat moet de klant zelf regelen, en backlinks zijn moeilijk te beïnvloeden lijkt mij.

[Verwijderd]

pieturp schreef op zondag 14 februari 2010 @ 23:48:

Ach, ik vind dat een lijst, jij een tabel.

Het is geen mening, het is een feit. Ik kan er ook niks aan doen dat figuren als jij dom blijven doordat ze achter anderen aanlopen. Je hebt vast ergens eens gehoord dat tabellen niet meer moesten worden gebruikt. Helaas heb je ofwel niet goed geluisterd, of naar de verkeerde personen. Dit is een typisch voorbeeld van niet nadenken. Het is geen schande om iets niet direct te begrijpen, dat is het wel als je niets leert van wat anderen je vertellen. Ik kom hier niet om anderen te zien vertellen dat dit een kwestie van mening is. Dat is het niet, het is een kwestie van kennis en ervaring. Weten en begrijpen waarom HTML is wat het is en het gebruiken zoals het bedoeld is. Als jij hier een lijst van maakt, dan het je echt iets gemist. Prima, maar ga anderen geen verkeerde dingen aankeren. Aan nuancering doe ik nu even niet.

Nog nog even ontopic. Tabellen moeten niet worden gebruik voor opmaak. In dit geval gebruik je wel degelijk een tabel omdat de data erom vraagt en je pakt nog eens mee dat het uitlijnen van de data meteen een stuk makkelijker is.

[Ragger]

Eén dingetje: het is categorieën i.p.v. categoriën (heeft ook jaren verkeerd op de front van tweakers gestaan).

[kaesve]

Lieve Cheatah,
Ik spreek hier voor mijzelf, maar ik vind jouw commentaar compleet ongepast. Er is geen enkele reden om aan te nemen dat pieturp direct achter anderen aanloopt en niet voor zichzelf kunnen denken. Zodra je het gebied van de semantiek betreed, of dat nou over HTML gaat of over algemene taalkunde, ben je eigenlijk al vrij abstract bezig. Een paragraaf is meestal nog wel als zodanig te herkennen, maar dit is niet altijd zo duidelijk en er is daarom vaak best nog ruimte voor eigen interpretatie. Ik denk dat ik in dit geval wel met jou mee zou gaan, in dat deze data het best in een tabel past, maar dat betekend niet dat het semantisch helemaal fout is om hier een geordende lijst voor te gebruiken. Je kan de data prima interpreteren als een op alfabetische volgorde gesorteerd boodschappenlijstje.
Misschien had pieturp niet moeten zeggen dat deze vieze tabellen verbannen zouden moeten worden, maar dat maakt het nog niet een feit dat een tabel hier de enige semantisch-correcte mogelijkheid zou zijn. Mensen domme schapen vinden, omdat ze dit zogenaamde feit niet kennen vind ik zelf verder gaan dan tabellen vies noemen.

Veel liefs,
-K

[pieturp]

^^ Met kaesve

@cheatah

Jij gaat naar de winkel met een boodschappen-tabel, ik met een boodschappenlijst. 't Is maar net hoe je 't bekijkt.

Is 't bonnetje van de kassa een tabel of een lijst gekochte items?

Semantiek is niet zo rechtlijnig. Het aantal 'ik gebruik een table voor opmaak'- gebruikers, is dat helaas nog wel. Dat is wat ik smerig noem.

IMNHO zijn er niet echt veel situaties die zich ècht lenen voor een tabel, behalve statistieken, of (abstracte) data. Juist voor dat soort (vele) gegevens is 't table-element bedoeld; In één oogopslag zichtbaar maken van een (complexe) samenhang van data. Compleet met headings en kolom-groepen.

[ Voor 5% gewijzigd door pieturp op 15-02-2010 01:49 . Reden: typo: cheetah -> cheatah ]

[Verwijderd]

pieturp schreef op maandag 15 februari 2010 @ 01:42:

Jij gaat naar de winkel met een boodschappen-tabel, ik met een boodschappenlijst. 't Is maar net hoe je 't bekijkt.

Dat ligt eraan. Als je per product aantallen wilt vermelden, heb je een boodschappentabel. Als je alleen producten wilt opschrijven dan heb je een lijst.

Is 't bonnetje van de kassa een tabel of een lijst gekochte items?

Een tabel. Dit is een beetje vragen naar de bekende weg.
Even een handig ezelsbruggetje: als je een kassabon in Excel invoert, zet je dan de prijs in hetzelfde vakje als de naam van een artikel? Waarom wel/niet?

Semantiek is niet zo rechtlijnig. Het aantal 'ik gebruik een table voor opmaak'- gebruikers, is dat helaas nog wel. Dat is wat ik smerig noem.

Hallo, jij bent degene die in dit topic correct gebruik van een tabel ontmoedigt. Dat tabel-voor-opmaak-verhaal is hier niet eens aan de orde. Jij maakt de fout door te zeggen dat een tabel "niet nodig is". Er is geen enkele reden om het gebruik van een tabel hier te ontmoedigen. Het is juist weer zo'n perfect voorbeeld waar je wel tabellen voor moet gebruiken.

IMNHO zijn er niet echt veel situaties die zich ècht lenen voor een tabel, behalve statistieken, of (abstracte) data. Juist voor dat soort (vele) gegevens is 't table-element bedoeld; In één oogopslag zichtbaar maken van een (complexe) samenhang van data. Compleet met headings en kolom-groepen.

Ik heb je nota bene al verteld welke namen er beven die kolommen konden staan. Dat ze hier weggelaten zouden kunnen worden is een gevalletje van presentatie. In de HTML horen die table headings er wel degelijk te staan.

Op zich lijkt het me wel een keer leuk om een uitgebreide HTML contest te houden over dit onderwerp. Ik ga erover nadenken en zal het eens inschieten als voorstel voor /13. Dan kan meteen iedereen zien hoe vreselijk ver je ernaast zit.

[Patriot]

Ik ben het met cheatah eens dat tables in dit geval de perfecte oplossing zijn. Semantiek an sich moge dan wel 'niet-rechtlijnig' zijn, maar in dit geval is de oplossing dat wel. Als je dit met lijsten en p's doet zoals in de eerste opzet, dan ben je gewoon een tabel aan het simuleren.