Attributen: class en id

Attributen ken je al: lang, href, src, alt. Ze staan altijd in de opening tag en geven extra informatie over het element. Deze week komen er twee bij die je op elk element mag zetten.

class

Een class is een label dat je zelf verzint. Je hangt het aan elementen die iets gemeen hebben.

<article class="card">...</article>
<a href="https://odisee.be" class="card highlight">...</a>

• meerdere elementen mogen dezelfde class hebben, dat is net de bedoeling
• één element mag meerdere classes hebben, gescheiden door een spatie
• CSS en JavaScript gebruiken die classes om elementen te selecteren

💡Een class is geen betekenis.

<div class="navigation"> blijft een div.

Kies eerst het juiste element, en gebruik daarna pas een class.

id

Een id is een unieke naam voor één element op de pagina.

<h1 id="top">Portfolio van Piet</h1>
<article id="labo-01">...</article>

• een id komt maar één keer voor op een pagina, nooit twee keer
• één element heeft hoogstens één id
• ook bruikbaar in CSS en JavaScript

De reden dat een id uniek moet zijn, is dat je er rechtstreeks naartoe kan linken. Zet je #top achter een URL, dan springt de browser naar het element met die id. Dat werkt binnen je eigen pagina en vanaf een andere pagina.

<a href="#top">Terug naar boven</a>
<a href="./projecten/#labo-01">Bekijk labo 1</a>

Zo werkt deze site ook zelf

Elke titel heeft een id. Daarom kan je een link delen die meteen op het juiste stuk van de pagina uitkomt.

Namen van classes en id's

Dezelfde regels als voor mappen en bestanden: geen spaties, geen hoofdletters, geen speciale tekens. Gebruik streepjes: lab-01.

Kies namen die zeggen wat het is, niet hoe het eruit ziet. class="warning" overleeft een herontwerp, class="red" niet.