Semantiek

Het doel van een element

Een belangrijk principe in web-ontwikkeling is dat je elementen gebruikt waarvoor ze dienen, niet vanwege hoe ze eruit zien in de browser. Dit heet de semantiek (het doel) van een element.

De semantiek van een element maakt duidelijk wat de bedoeling is van dat gedeelte in jouw HTML-code. Bijvoorbeeld: het <p> element maakt duidelijk dat dit gedeelte een tekst-alinea zal bevatten.

Voor sommige elementen heeft de semantiek vooral te maken met hoe ze eruit zien. In dat geval zal de browser er vaak ook voor zorgen dat die semantiek ook zichtbaar is. Bijvoorbeeld: het <b> en <i> element hebben een duidelijke semantiek. Zij tonen vette of schuine tekst.

Ook het <p> element is hier een voorbeeld van: er wordt steeds voor en na een alinea wat extra spatie gelaten door de browser.

Door het juiste semantische element te gebruiken, geef je aan de jezelf, andere web-ontwikkelaars en de browser extra informatie over de inhoud van je website.

Foute voorbeelden

Hieronder vind je enkele voorbeelden hoe elementen fout gebruikt kunnen worden.

• <blockquote> : Sommige mensen gebruiken dit element om eender welke tekst aan de linkerkant te laten inspringen.
  Wat is wel juist? <blockquote> is een element dat dient om een quote op je website te tonen.
• <p> : sommige mensen gebruiken <p> </p> om een extra spatie toe te voegen in een tekst.
  Wat is wel juist? Gebruik hiervoor het <br> element.
• <h1>-<h6> : alle heading-elementen maken tekst groter of kleiner, vet of schuingedrukt. Als de inhoud echter geen koptekst is, mag je deze elementen niet gebruiken hiervoor!
  Wat is wel juist? Gebruik CSS om tekst groter, kleiner, vet of schuingedrukt te maken.

Onzichtbare semantiek

Alle HTML elementen hebben een semantiek, maar bij een aantal elementen is die semantiek niet zo zichtbaar als in de voorbeelden hierboven. Deze elementen zien er exact hetzelfde uit als een ander element, en doen exact hetzelfde, maar hebben toch een andere betekenis.

Bijvoorbeeld: Zo is het <header> element eigenlijk heel gelijkaardig aan een <footer> element. De semantiek is echter heel verschillend.

website met <div> elementen	website met block-level-elementen
De linkse website werd opgebouwd met <div> elementen.	De rechtse website werd opgebouwd met block-elementen die semantisch veel juister zijn.

Semantiek met Class en ID

Het ID-attribute

Het id attribute wordt gebruikt om een element een unieke naam te geven. Het id attribute kan door elk element worden gebruikt.

Belangrijk: elke id moet uniek zijn! Eén bepaalde id komt dus maar één maal voor!

Stel dat je een website maakt voor je CV. Deze website bestaat uit 3 section elementen:

• Portfolio
• Ervaring
• Opleiding

<section>
	Hierin staat alle code en inhoud voor het portfolio
</section>
<section>
	Hierin staat alle code en inhoud voor de ervaring
</section>
<section>
	Hierin staat alle code en inhoud voor de opleiding
</section>

Hoewel elk section element een eigen doel heeft, is het moeilijk om deze 3 elementen te onderscheiden. Om de leesbaarheid van de code te vergroten is het daarom belangrijk om hier duidelijk te maken waar elk element voor dient.

Let er op dat elke ID uniek moet zijn! Er staat dus maar één "portfolio"-id in het volledige HTML-document!

<section id="portfolio">
	Hierin staat alle code en inhoud voor het portfolio
</section>
<section id="ervaring">
	Hierin staat alle code en inhoud voor de ervaring
</section>
<section id="opleiding">
	Hierin staat alle code en inhoud voor de opleiding
</section>

Het class-attribute

Het class attribute wordt gebruikt om elementen te groeperen. Het class attribute kan door elk element worden gebruikt.

Stel dat je een website maakt, met daarin een menu. De menu bestaat uit een nav element, met daarin een lijst (ul) van hyperlinks (a).

<nav>
    <ul id="menuList">
        <li>
            <a href="home.html">Home</a>
        </li>
        <li>
            <a href="shop.html">Shop</a>
        </li>
        <li>
            <a href="contact.html">Contact</a>
        </li>
    </ul>
</nav>

Om duidelijk te maken dat elk list item een onderdeel van de menu is, kan je elk list item dezelfde class-naam geven.

<nav>
    <ul id="menuList">
        <li class="menuItem">
            <a href="home.html">Home</a>
        </li>
        <li class="menuItem">
            <a href="shop.html">Shop</a>
        </li>
        <li class="menuItem">
            <a href="contact.html">Contact</a>
        </li>
    </ul>
</nav>

Op deze manier is duidelijk dat elk <li> element in die lijst een menuItem is.