2.3: ID's

ID's verschillen niet zoveel van Classes die we in het vorige hoofdstuk besproken hebben. Het voornaamste verschil tussen id's en classes, is dat één id maar één keer aan een element gekoppeld mag worden (het kan wel meerdere keren, maar de validator ziet dat als een error). Bij classes kun je bijvoorbeeld voor (verschillende) 4 elementen dezelfde class gebruiken, maar bij id's mag je dus één id maar aan één element toekennen. Id’s worden dan ook meestal gebruikt om bepaalde vaste onderdelen op een pagina te maken, zoals banners, menu’s, contentgebieden, navigatiebuttons etc... We voegen een id aan een element toe door de optie id="" mee te geven, bijvoorbeeld: <h1 id=""></h1> of <table id=""></table>.

Het maken van een id gaat ook op ongeveer dezelfde manier als een class. Bij een id begin je echter niet met een . (punt, zoals bij classes), maar met een # (hekje). Hierachter zet je wel weer een naam die je zelf mag kiezen. Voor de rest is het precies hetzelfde als bij een class, je begint met een hekje { en eindigt ook weer met een hekje }. Hiertussen komen weer de style-opties per regel die moeten gelden voor dat id. Een voorbeeld van een id met de naam "banner":

In dit voorbeeld gebruiken we een nieuw element, namelijk <div></div>, in het volgende hoofdstuk word dit element verder uitgelegt. Als we dit nu gaan toepassen in html5 komt het er als volgt uit te zien:

Je ziet dat we de twee id's hebben gemaakt, eentje voor de bovenste blok genaamd "banner" en een tweede blok genaamd "content". Deze twee blokken komen op elke pagina maar 1x voor, het worden ook wel contentgebieden genoemd.

Om de lay-out van een website te maken hebben we eerder gezien dat dit kon met tabellen. Tegenwoordig wordt dat niet meer gedaan met tabellen maar gebruikt men daar het div-element <div></div> voor.
In het volgende hoofdstuk gaan we het hebben over het div-element.