Websites met stijl

7. Id en class, commentaar

Id en class: elementen met een naam

Je bent nu een behoorlijk eind op weg met de website over Terschelling. Over enkele hoofdstukken gaan we met de opmaak beginnen. Dan geven we in een stijlblad de opmaakeigenschappen van elementen als main, nav, aside, div aan.

We zouden bijvoorbeeld kunnen aangeven dat het element nav (het menu) een gele achtergrond krijgt
en het element aside (de zijbalk) een lichtgrijze achtergrond.
En misschien willen we de div die de elementen main en aside omsluit wel witte letters op een groene achtergrond geven.

Maar als er nou op een webpagina verschillende div-elementen zijn, of verschillende nav elementen, hoe kunnen we dan aangeven dat die ene een gele achtergrond moet hebben en die andere niet?

Daarvoor zijn twee attributen: id en class:

Het attribuut id

Dit attribuut is al aan de orde geweest in hoofdstuk 4.

Met id (afkorting van identity, identiteit) geef je een element een unieke naam.
Er mogen op dezelfde webpagina geen andere elementen zijn met die naam. voorbeeld 1 <nav id="menu1">...</nav> In voorbeeld 1 krijgt een element nav de naam menu1.

Het attribuut class

Dit attribuut is hetzelfde als id, met één uitzondering: de class-naam hoeft niet uniek te zijn, er mogen verschillende elementen met dezelfde class-naam op een pagina voorkomen.

voorbeeld 2 <div class="opmerking">...</div> In voorbeeld 2 krijgt een div element de class-naam opmerking

Het verschil tussen id en class

Zoals gezegd is het verschil tussen id en class dat een bepaalde id-naam maar 1 keer op een webpagina mag voorkomen, een class-naam meerdere keren.

• id is bedoeld voor één bepaald (uniek) element.
  Het is als je inlognaam voor een website. Die moet uniek zijn.
• Je kan met een link naar een element met een bepaalde id-naam springen.

• class is bedoeld voor een klasse elementen met bepaalde eigenschappen. Class betekent klasse, categorie.
  In het voorbeeld gaat het om de class "opmerking". In het stijlblad kan er dan voor gezorgd worden dat alle elementen van de class "opmerking" (alle opmerkingen dus) dezelfde lay-out hebben.
  Je zou ook een class="rechts" kunnen maken voor elementen die rechts uitgelijnd moeten zijn,
  en een class="klein" voor elementen met kleine letters.
  Een element met het attribuut class="klein rechts" heeft dan kleine letters en is rechts uitgelijnd.

• Het is niet mogelijk om een link te maken naar een element van een bepaalde class. Dat is ook logisch, want er kunnen verschillende elementen van die class zijn, en dan is niet duidelijk waarheen moet worden gesprongen.

  Dat is geen probleem, want ook een element van een bepaalde class kan je een id-naam geven:
  in voorbeeld 3 heeft het div van de class opmerking ook nog de id opm1 voorbeeld 3 <div class="opmerking" id="opm1"> De link <a href="#opm1">naar opmerking 1</a> maakt een link naar de id-naam "opm1".

Afspraak

In een stijlblad worden elementen van een bepaalde id of class als volgt aangeduid:

• Het div element met de id-naam 'container' wordt aangeduid als: div#container.
• Een div element met de class-naam 'opmerking' wordt aangeduid als: div.opmerking

• Een hekje # kan dus gelezen worden als 'met de id-naam....'
  h2#hoofdstuk10 betekent: h2 (kop van niveau 2) met de id-naam 'hoofdstuk10'
• een punt . kan gelezen worden als 'met de class-naam....'. of 'van de class...'
  p.rechts betekent: p (alinea) van de class 'rechts'.

Commentaar

Alles tussen de 'tags' <!-- en --> wordt als commenaar beschouwd. De browser slaat het over.

Commentaar kan één regel beslaan, maar ook meerdere regels, zoveel als je wilt.

In de volgende gevallen is commentaar handig:

1. Om een stuk html-code te verduidelijken.
   Dat is voor later (en voor anderen) als de website aangepast moet worden.
2. Om tijdelijk een stuk van de website uit te schakelen, bijvoorbeeld omdat het niet goed werkt.