HTML en semantiek
Door Jeroen VD, 15 jaar geleden, 12.981x bekeken
Je hebt het misschien wel eens op het forum voorbij horen komen: semantiek. Maar wat betekent het eigenlijk? Hoe moet ik dat gebruiken? En wat is het nut?
Daarom deze tutorial. Wouter en ik hebben hem samen geschreven. Wij zijn er een groot voorstander van om semantisch je site op te bouwen, maar het is je eigen keuze. We hopen je alleen te kunnen overtuigen om het ook te doen.
Om even verwarring te voorkomen eerst 2 veel gebruikte begrippen in HTML die wel eens door elkaar worden gegooid. In deze tutorial gebruiken we deze betekenissen:
Element: Een element is het ding dat in de DOM zit. Als je het dus hebt over een element dan heb je het over het geen je krijgt als je een element inspecteert via je Browser’s inspector.
tag: Een tag is de HTML weergave van een element. Als je typt ‘<div>Hello World</div>’ dan is hierin de div een tag en geen element.
In het algemeen komt het neer op het feit dat als je in het algemeen over een HTML, ehh… ding, praat je het over een element hebt en dat als je over een tag praat je het over dat ding hebt dat je telkens typt.
Gesponsorde koppelingen
Inhoudsopgave
Er zijn 20 reacties op 'Html en semantiek'
0 
-0 
-0
Het is mooi geworden!
Alleen nu zie ik toch meteen een foutje in de intro:
"In het algemeen komt het op het feit dat als je in het algemeen over een HTML(...)"
Moet worden:
"In het algemeen komt het neer op het feit dat als je over een HTML(...)"
En het lijkt alsof de tabs zijn weggevallen bij mijn code?
Alleen nu zie ik toch meteen een foutje in de intro:
"In het algemeen komt het op het feit dat als je in het algemeen over een HTML(...)"
Moet worden:
"In het algemeen komt het neer op het feit dat als je over een HTML(...)"
En het lijkt alsof de tabs zijn weggevallen bij mijn code?
0 -0
-0
Intro is aangepast. En die tabs zijn inderdaad weggevallen. Vreemd. Zal het eens aanpassen.
0 -0
-0
Ik ben even in de war.
Normaal wordt er geroepen op het forum (voornamelijk door WouterJ) dat inline CSS eigenlijk uit den boze is, een niet aan te raden.
En nu wordt het in een voorbeeldje gebruikt.
Normaal wordt er geroepen op het forum (voornamelijk door WouterJ) dat inline CSS eigenlijk uit den boze is, een niet aan te raden.
En nu wordt het in een voorbeeldje gebruikt.
Leuke tutorial. Semantiek gaat dus vooral om de juiste interpretatie van de content op een website. Het is voor zoekmachines een methode om te bepalen wat wel en niet belangrijk is. Zo zal een zoekmachine bijvoorbeeld meer waarde hechten aan informatie die omsloten is in een <article> tag, dan aan diezelfde informatie wanneer die zou zijn omsloten in een nietszeggende <div> tag. Concluderend: hoe beter de semantiek, des te beter een zoekmachine een website kan "begrijpen".
Het inspringen kan beter. In plaats van:
zou ik doen:
De opbouw van het menu met een <ul> wordt vaak gebruikt, maar... realiseer je dat HTML5 hier een aparte <menu> tag voor heeft.
Wat verder nog interessant is, is dat de positie van elementen in de (bron)code kan verschillen van de positie op het scherm. Hoe belangrijker de informatie is, des te hoger je dit in je (bron)code moet plaatsen. Het positioneren van de elementen doe je vervolgens met css.
Het inspringen kan beter. In plaats van:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<section>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum ... inceptos himenaeos.</p>
</section>
<section>
<h2>Foobar and Hello World</h2>
<p>Etiam et ... blandit magna.</p>
<h3>Wat is foobar?</h3>
<p>Nunc dictum ... feugiat id.</p>
</section>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum ... inceptos himenaeos.</p>
</section>
<section>
<h2>Foobar and Hello World</h2>
<p>Etiam et ... blandit magna.</p>
<h3>Wat is foobar?</h3>
<p>Nunc dictum ... feugiat id.</p>
</section>
zou ik doen:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<section>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum ... inceptos himenaeos.</p>
</section>
<section>
<h2>Foobar and Hello World</h2>
<p>Etiam et ... blandit magna.</p>
<h3>Wat is foobar?</h3>
<p>Nunc dictum ... feugiat id.</p>
</section>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum ... inceptos himenaeos.</p>
</section>
<section>
<h2>Foobar and Hello World</h2>
<p>Etiam et ... blandit magna.</p>
<h3>Wat is foobar?</h3>
<p>Nunc dictum ... feugiat id.</p>
</section>
De opbouw van het menu met een <ul> wordt vaak gebruikt, maar... realiseer je dat HTML5 hier een aparte <menu> tag voor heeft.
Wat verder nog interessant is, is dat de positie van elementen in de (bron)code kan verschillen van de positie op het scherm. Hoe belangrijker de informatie is, des te hoger je dit in je (bron)code moet plaatsen. Het positioneren van de elementen doe je vervolgens met css.
0 -0
-0
ozzie:
De opbouw van het menu met een <ul> wordt vaak gebruikt, maar... realiseer je dat HTML5 hier een aparte <menu> tag voor heeft.
Dit heb je verkeerd. In HTML5 heb je een nav element die een navigatie aangeeft. Vervolgens moet je in deze navigatie een list (<ul><li>) gebruiken voor de menu-items, ul blijft dus behouden.
Het menu element is niet voor een menu gemaakt (klinkt vreemd, maar zo is dat nu eenmaal met talen). Van de HTML5 specs:
[qoute=ozzie]The menu element represents a list of commands.[/quote]
Het wordt dus niet gebruikt om pagina's aan elkaar te linken (hiervoor is het nav element) maar om commands met elkaar te verbinden. Wat hier mee bedoelt wordt kun je in het voorbeeld van de specs zien: http://dev.w3.org/html5/spec/single-page.html#menus
ozzie:
Concluderend: hoe beter de semantiek, des te beter een zoekmachine een website kan "begrijpen".
Goed uitgelegd, al is Google hier momenteel mee aan het experimenteren. Google zal informatie in een article element belangrijker gaan achten dan informatie in een aside element.
Maar het doel van semantiek is niet een zoekrobot blij maken. Semantiek is gewoon hoe je HTML moet schrijven. Precies zoals als je geen or die in PHP mag gebruiken is het in HTML bij wijze van spreke verboden om een menu met div'jes op te maken.
HTML is gewoon gemaakt met semantiek en we moeten het nu niet gaan verpesten omdat we andere tools hebben gekregen zoals CSS.
ozzie:
Het inspringen kan beter. In plaats van:
Ik zie het ook, origineel was het goed alleen er was iets misgegaan. Daardoor zijn de tabs verloren gegaan en heeft Jeroen blijkbaar die 2 section elements als 1 section element gezien.
ozzie:
Hoe belangrijker de informatie is, des te hoger je dit in je (bron)code moet plaatsen. Het positioneren van de elementen doe je vervolgens met css.
Niet geheel mee eens. Je moet de broncode schrijven volgens de flow van je design. Je moet niet de header vlak boven de footer zetten om de content bovenin te zetten. Je moet je houden aan de flow header - nav - content (- sidebar) - footer.
chris:
Normaal wordt er geroepen op het forum (voornamelijk door WouterJ) dat inline CSS eigenlijk uit den boze is, een niet aan te raden.
En nu wordt het in een voorbeeldje gebruikt.
En nu wordt het in een voorbeeldje gebruikt.
Dat heb je dan verkeerd gezien. Er wordt hier nergens inline CSS gebruikt. In 1 voorbeeldje wel interne CSS, maar dat is omdat we de voorbeeld codes in deze tutorial niet zo uitgebreid maken dat we een aparte stylesheet maken.
Quote:
Dit heb je verkeerd. In HTML5 heb je een nav element die een navigatie aangeeft.
Pardon, die bedoelde ik inderdaad. Goed opgemerkt.
Quote:
Maar het doel van semantiek is niet een zoekrobot blij maken. Semantiek is gewoon hoe je HTML moet schrijven.
Klopt, maar ik probeer de lezers een reden te geven waarom ze het zouden moeten doen. Feitelijk kun je het vergelijken met een boek, waarin je ook gewoon gebruik maakt van hoofstukken, (sub)titels, paragrafen, opsommingstekens, kop- en voetteksten.
Quote:
Je moet de broncode schrijven volgens de flow van je design.
Aangeraden wordt om de belangrijkste informatie bovenin je code te zetten en minder belangrijke informatie zo ver mogelijk naar beneden. Het positioneren doe je dan met css. Zo zou je er dus voor kunnen kiezen om een artikel boven de header te plaatsen (in de code). Met css zorg je dan dat de header bovenin de pagina (layout) komt te staan. Maar dit zal vooral een SEO aangelegenheid zijn vermoed ik.
Quote:
Maar dit zal vooral een SEO aangelegenheid zijn vermoed ik.
Ja, eigenlijk alleen maar SEO. De semantiek wordt er slechter van. En het is denk ik ook micro-optimalisatie.
Met die geweldige HTML5 en zijn semantische elementen weet de robot zelf wel uit te zoeken wat belangrijk is. En ik denk dat het 0.00001 op je pagerank gaat uitmaken of de content op regel 20 of op regel 80 staat.
Quote:
Pardon, die bedoelde ik inderdaad. Goed opgemerkt.
Je zei het ergens wel goed. Je zei namelijk '<ul> moet worden vervangen door <menu>'. En het menu element is een list (zelfde als ul). Het nav element is geen list en moet dus een list element in zich hebben.
Trouwens nog zeer bedankt dat je zo goed het bericht hebt doorgelezen, daar hebben anderen ook wat aan.
0 -0
-0
Ja, ik denk inderdaad dat het alleen voor SEO is. Ik kan me helaas niet meer herinneren waar ik het gelezen heb. Maar er werd in ieder geval echt angeraden om belangrijke info bovenaan te zetten. Of het scheelt geen idee... misschien als je tot de top-spelers behoort dat dat dan net het zetje is wat je van plek 2 naar plek 1 kan duwen ;)
Nette tutorial heren! Goed te lezen en mooi gebruik van voorbeelden. Als je zo goed beschrijft wat semantiek is, vind ik dat de voorbeeld codes ook juist moeten zijn.
Pagina 3: title tag vergeten in de linkjes en door copy/paste van Word worden de quotes onjuist weergeven.
Pagina 4: position relative in de CSS is niet nodig en de gebruikte divjes bevatten geen id's.
Pagina 5&6: de alt en title tag ontbreken en de tag wo rdt niet afgesloten.
Verder keurige tutorial!
Pagina 3: title tag vergeten in de linkjes en door copy/paste van Word worden de quotes onjuist weergeven.
Pagina 4: position relative in de CSS is niet nodig en de gebruikte divjes bevatten geen id's.
Pagina 5&6: de alt en title tag ontbreken en de tag wo rdt niet afgesloten.
Verder keurige tutorial!
0 -0
-0
Bedankt bas!
Title tag is niet verplicht, een alt moet er inderdaad nog wel even komen. Het img element heeft geen sluittag en we bespreken hier HTML5 en niet dat mislukte XHTML1.
Quote:
de alt en title tag ontbreken en de tag wo rdt niet afgesloten.
Title tag is niet verplicht, een alt moet er inderdaad nog wel even komen. Het img element heeft geen sluittag en we bespreken hier HTML5 en niet dat mislukte XHTML1.
0 -0
-0
Geen 1 browser doet vreemd als je niet /> maar gewoon > gebruikt. Sterker nog, het is juist andersom. Alle browsers vinden /> vreemd maar door een hack (spatie ervoor) kun je het gewoon gebruiken.
0 -0
-0
Wouter / Jeroen,
Ik heb even de tabs even voor jullie aangepast.
Verder had ik nog een vraag: (had vanmorgen niet de tijd om hem heel goed te lezen)
In hoofdstuk 5 zie ik de volgende code:
Waarom wordt in de tag time een spannetje gebruikt?
Daarnaast zie ik in hoofdstuk 6 wat a tags staan. Moeten die geen title hebben? (anders is de code niet valid toch?)
Twee kleine dingen waar ik benieuwd naar ben ;-)
Niels
Ik heb even de tabs even voor jullie aangepast.
Verder had ik nog een vraag: (had vanmorgen niet de tijd om hem heel goed te lezen)
In hoofdstuk 5 zie ik de volgende code:
Code (php)
1
2
3
4
2
3
4
<header>
<time datetime="2012-04-14">14 <span>Apr</span></time>
<h1>Hello World</h1>
</header>
<time datetime="2012-04-14">14 <span>Apr</span></time>
<h1>Hello World</h1>
</header>
Waarom wordt in de tag time een spannetje gebruikt?
Daarnaast zie ik in hoofdstuk 6 wat a tags staan. Moeten die geen title hebben? (anders is de code niet valid toch?)
Twee kleine dingen waar ik benieuwd naar ben ;-)
Niels
Sow, dagje offline vanwege examens en werken, en kijk eens wat een reacties! Ik heb de code aangepast waar ik dat nodig vond.
Het a element en het img element hebben geen verplichte title. Zie de specs! Wel moet een img een alt hebben.
Waarom een span? Volgens de specs heeft het geen semantische betekenis, behalve dat het zijn content vertegenwoordigt. Perfect voor opmaak dus.
Het a element en het img element hebben geen verplichte title. Zie de specs! Wel moet een img een alt hebben.
Waarom een span? Volgens de specs heeft het geen semantische betekenis, behalve dat het zijn content vertegenwoordigt. Perfect voor opmaak dus.
0 -0
-0
Quote:
Ik heb de code aangepast waar ik dat nodig vond.
Welke was ik vergeten dan ? :-)
Quote:
Het a element en het img element hebben geen verplichte title. Zie de specs! Wel moet een img een alt hebben.
Oké, ik dacht dat het verplicht was!
Quote:
Waarom een span? Volgens de specs heeft het geen semantische betekenis, behalve dat het zijn content vertegenwoordigt. Perfect voor opmaak dus.
Ah vandaar! Helemaal duidelijk!
Niels
0 -0
-0
Quote:
Ah vandaar! Helemaal duidelijk!
Zie ook het stukje uitleg onder de code van de time.
Om te reageren heb je een account nodig en je moet ingelogd zijn.
PHP hulp
0 seconden vanaf nu