HTML eerste stappen – Les 8 – Universele tagattributen

We hebben al besproken dat verschillende tags hun eigen attributen hebben. Nu is het tijd om te praten over attributen die voor alle tags gelijk zijn. Laten we de meest gebruikte bekijken.

Attribuut id

Het attribuut id geeft een uniek identificatienummer of naam aan een element. Deze namen moeten uniek zijn, omdat herhaling problemen kan veroorzaken bij het werken met jQuery of JavaScript. Hier zijn enkele voorbeelden van het gebruik van het attribuut id:

...
<ul id="menu1">
  <li id="item1">lorem</li>
  <li id="item2">ipsum</li>
  <li id="item3">hallo</li>
  <li id="item4">wereld</li>
</ul>
...
<div id="header"></div>

Het id-attribuut kan worden gebruikt om CSS-stijlen afzonderlijk toe te passen op elk blok, menu, menu-item of ander element. Id’s worden ook gebruikt in JavaScript (en jQuery).

Attribuut class

Het attribuut class geeft aan dat een element tot een bepaalde groep of klasse behoort. Net als id kan het worden gebruikt om CSS-stijlen toe te passen, maar in dit geval tegelijk op alle elementen die dezelfde klasse delen. Met andere woorden: een id is uniek, maar een class kan aan meerdere elementen worden toegewezen:

<ul id="menu1">
  <li class="item">lorem</li>
  <li class="item">ipsum</li>
  <li class="item">hallo</li>
  <li class="item">wereld</li>
</ul>

Attribuut style

Het attribuut style wordt gebruikt om CSS-stijlen direct binnen de tag zelf te schrijven. Je hoeft je nu nog niet te verdiepen in de details van dit attribuut — we zullen het uitvoerig bespreken in de CSS-handleiding. Voorlopig volgen enkele eenvoudige voorbeelden:

...
<div style="width: 200px; height: 100px; background: #dddddd">
Blok
</div>
...
<p style="font-size: 14px; color: #333333">
Tekst
</p>

Het eerste voorbeeld toont een blok van 200 pixels breed, 100 pixels hoog, met een achtergrondkleur van #dddddd (lichtgrijs). Het tweede voorbeeld is een paragraaf tekst met een lettergrootte van 14 pixels en een kleur van #333333 (donkergrijs, bijna zwart).

Attribuut title

Dit attribuut wordt gebruikt om een tooltip (zwevende hint) weer te geven wanneer je met de muis over een element gaat:

...
<img src="./images/image.jpg" alt="foto" title="dat ben ik" />
...
<a href="html2.html" title="mijn pagina">Link</a>
...
<h2 title="kop">Hallo, wereld!</h2>

Natuurlijk bestaan er nog meer universele attributen, zoals accesskey, contenteditable, contextmenu, dir, hidden, lang, spellcheck, en tabindex. Je zult deze later tegenkomen wanneer je werkt aan meertalige websites of complexe lay-outs. Voor nu is het voldoende om de belangrijkste universele attributen te kennen.