Elementen en attributen

In het stukje over het sjabloon hebben we uitgelegd wat tags zijn en waaraan je tags kunt herkennen. Een tag is eigenlijk niets anders dan de naam van wat in HTML elementen worden genoemd. Elementen zijn de bouwstenen van HTML-pagina’s.
In onze sjabloon staan bijvoorbeeld de elementen body en head.

De meeste elementen bestaan uit een begintag en een eindtag inclusief de inhoud waarop het element betrekking heeft. De tags geven het begin en het einde van een element aan.

Soms wordt er geen eindtag gebruikt. In die gevallen hebben we te maken met elementen zonder inhoud. Dat worden ook wel lege elementen genoemd.
Voorbeelden van elementen zonder inhoud zijn <br> en <img>. Lege elementen hebben slechts één tag, namelijk een begintag. Voor het opnemen van een afbeelding in een webpagina volstaat dus de regel
<img src=”afbeelding.png” alt=”Een afbeelding”>.

In de afbeelding zie je een tag voor tekst met inhoud.


In XHTML, een eerdere versie van HTML, is het verplicht om de tags van elementen zonder inhoud netjes af te sluiten. Dat gebeurt in XHTML door in de begintag voor het >–teken een / te plaatsen. Het element <br> wordt dan genoteerd als <br />.
In HTML5 is het afsluiten van lege elementen niet nodig. In HTML5 mag je dus gewoon <br> noteren.

Een begintag van een element kan worden aangevuld met één of meerdere attributen. Het komt regelmatig voor dat een begintag helemaal geen attributen heeft. Attributen beïnvloeden de tag. Een atttibuut heeft altijd een naam en een waarde. De waarde van een attribuut wordt tussen dubbele aanhalingstekens genoteerd. Tussen de naam en de waarde van een attribuut mag je geen spaties gebruiken.

In het onderstaande voorbeeld wordt bij de tag <img> het attribuut src (source) vermeld. Dit attribuut heeft als waarde een verwijzing naar de plek waar de afbeelding te vinden is.


Bekijk het volgende filmpje.
Lees daarna eventueel de tekst van het filmpje.


Tekst id en class filmpje

Speciale attributen die je aan een element kunt geven zijn het attribuut id en het attribuut class. Door een id of class een naam te geven, kun je in de CSS-code beschrijven hoe de opmaak van een specifiek element eruit moet komen te zien. Kijk maar eens naar de onderstaande code:

<p id='naam'>Inhoud waarop het element betrekking heeft</p>

In dit voorbeeld heeft het HTML-element p een attribuut id gekregen met als naam “naam”. In het stijlblad kunnen we opmaak van deze alinea verder beschrijven. Ergens in het CSS-bestand zal dan staan:

#naam
{
    ...
}

De opmaakcode is alleen van toepassing op het element p met de id “naam” en dus niet op alle andere p-elementen.
We kunnen ook kiezen voor het attribuut class. Dan noteren we:

<p class='naam'>Inhoud waarop het element betrekking heeft</p>

En in het CSS-bestand zal dan ergens staan:

.naam
{
    ...
}

Met het attribuut id, de afkorting van “identification”, geef je een element een unieke naam. Deze naam mag op een webpagina slechts één keer voorkomen. Dat geldt niet voor het attribuut class. Een class kun je aan verschillende elementen toewijzen. In bovenstaand voorbeeld hebben we <p class='naam'> … </p> gebruikt. In de broncode van de pagina zou ook nog ergens mogen staan <h2 class=”naam”> … </h2> Als we de alinea van een id voorzien, mogen we de naam van deze id niet voor een ander element gebruiken. In de praktijk blijkt dat heel vaak dezelfde namen voor een class of id worden gebruikt. Dat geldt bijvoorbeeld voor onderdelen die gebruikt worden om de structuur van een webpagina te beschrijven. In HTML5 zijn daarom een reeks nieuwe structuurelementen geïntroduceerd.