Wat is een DIV, ID en CLASS?

watiseendiv

Ik kan het mij nog herinneren als de dag van gisteren. Ik had net basis HTML onder de knie, kon een volledige website maken maar ik wilde natuurlijk meer. Ik zag fantastische voorbeelden en dat wilde ik ook! Alleen was alles ineens opgedeeld in DIV’s. Huh, dacht ik nog! Wat zijn dat nou weer? Het heeft echt een hele tijd geduurd voordat ik snapte wat deze term nu precies inhield want een Nederlandse beschrijving kon ik niet zo makkelijk vinden. Als ik nu snel rondzoek via Google dan zie ik dat het nog vrij technisch wordt uitgelegd dus ik probeer het vandaag in makkelijke taal uit te leggen.

Wat is een DIV?

Een DIV staat voor division. Kijk goed naar een website en je ziet dat deze is opgedeeld in verschillende vakken. Normaliter heeft een website een header met het logo, navigatie en de content. Dit zijn dus in totaal drie vakken, dus in totaal drie DIV’s. Dit is nog vrij makkelijk maar wil je dus een complexe website met een zijbalk en een footer, dan komen er weer twee vakken bij en kan het vaak al lastig worden om alles netjes naast elkaar (of onder elkaar) te plaatsen. Vandaar dat je goed moet snappen wanneer iets een DIV moet zijn en welke attribuut (een ID óf CLASS) moet geven.

deliciae-div

Ik heb Deliciae even als voorbeeld gebruikt. Als je snel kijkt zie je dat mijn website is opgedeeld in drie verschillende DIV’s (exclusief de footer, die staat niet op de printscreen). Namelijk de header (logo en navigatie), de content en de zijbalk. In totaal drie vakken.

Ga je echter veel dieper kijken, dan bestaat mijn website uit veel meer DIV’s. Ik zei namelijk dat ieder vak een DIV is. Dan krijg je al snel het volgende.

deliciae-divs-diep

Mijn header bestaat uit twee DIV’s, namelijk één voor mijn logo en één voor mijn navigatie. Het gehele content gedeelte is een aparte DIV en ieder artikel bestaat uit de datum (DIV), titel (DIV), uitgelichte afbeelding (DIV) content (DIV), link naar reacties (DIV) en mijn tags (DIV). Dat zijn er zeven per artikel! Hetzelfde geld voor mijn zijbalk (DIV), een widget (DIV), de bloemen onder de widget (DIV). Ga zo maar door! Je snapt dat bij een hele complexe website er een heleboel DIV’s op een pagina kunnen. Het wordt dan lastig om er ééntje van te selecteren en deze bijvoorbeeld een andere kleur te geven. Vandaar dat je deze een specificatie geeft, namelijk een ID of een CLASS.

Wat is een ID?

Zowel een ID als een CLASS behoren tot HTML attributen. Een ID staat voor identificatie en gebruik je om een uniek element te identificeren. Dan stel jij natuurlijk de vraag, wanneer is iets uniek? Een ID-naam gebruik je maar één keer. Gebruik je dezelfde ID meerdere keren dan krijg je foutmeldingen in de W3C Validator en zorg je ervoor dat Google problemen heeft met het inlezen van jouw website. Google ziet dan teveel elementen met een unieke benaming en kan er geen wijs mee uit. Jij hebt tenslotte ook één ID, nietwaar? 😉

Persoonlijk onthou ik dit altijd als volgt: gaat het om een hoofdelement, geef deze dan een ID. Gaat het om een sub-element, dan een CLASS. Onder een hoofdelement valt een logo, navigatie, content gedeelte, artikel, zijbalk en widget. Voorbeeld: je hebt normaliter maar één keer je logo op een pagina vandaar dat deze uniek is. Je hebt ook maar één keer hetzelfde artikel op een pagina, dus óók deze is uniek.

Nog even een voorbeeld in combinatie met mijn coderingen. Primary gedeelte is waar mijn content (artikelen) onder vallen. Dit komt maar één keer voor op een pagina, vandaar dat deze een ID heeft.

Primary is een uniek element en heeft een ID.
Deze DIV is een uniek element, bevat al mijn artikelen en krijgt daarom de ID Primary.

In je stylesheet wordt een ID gespecificeerd door middel van dit teken: #. Je krijgt dus #primary in je stylesheet wanneer je deze wilt selecteren.

Voorbeeld: Door het volgende in je stylesheet toe te voegen krijgt de primary een grijzige-achtergrond:

#primary {
background-color: #f9f9f9;
}

Wat is een CLASS?

Een CLASS (klasse) is geen uniek element en daarom mag je hem zo vaak gebruiken als je wilt. Je kan deze zien als een label die je aan een element geeft. Door middel van CSS kan je hier vervolgens styling aan toevoegen. Hierdoor kan je ook totaal verschillende elementen, dezelfde class geven zodat ze bijvoorbeeld hetzelfde lettertype gebruiken of dezelfde kleur achtergrond hebben.

Je kan een ID ook styling geven maar omdat deze uniek is, geld het dus alleen voor dat element. Het is in de praktijk makkelijker én sneller om gebruik te maken van classes omdat je deze voor meerdere elementen kan toepassen.

Om een voorbeeld te geven, mijn categorie widget in de zijbalk heeft de volgende classes:


<aside id="categories-2" class="widget widget_categories">

Deze widget komt maar één keer voor dus hij krijgt een eigen ID (categories-2). Vervolgens heeft iedere widget dezelfde class, namelijk widget. Ik wil namelijk dat iedere widget er hetzelfde uitziet (dezelfde kleuren, achtergrond, lettertypes, etc.) Daarnaast heeft iedere widget ook een unieke class namelijk de class widget_categories. Ik heb hier zelf voor gekozen omdat ik af en toe per widget wil kunnen kiezen hoe deze eruit ziet. De styling (CSS) die ik hier vervolgens aan gekoppeld heb, zie je hier onder.

widget-css

Zoals je ziet in het voorbeeld heeft een CLASS vooraan een punt staan om deze te selecteren. Bij een ID gebruik je dus #, bij een CLASS een punt. Je krijgt dus .widget in je stylesheet wanneer je deze wilt selecteren.

Voorbeeld: Door het volgende in je stylesheet toe te voegen krijgt jouw widget een grijzige-achtergrond:

.widget {
background-color: #f9f9f9;
}

Nou dat was het zo’n beetje! Natuurlijk is dit een heel wat informatie die op je afkomt. Ik hoop dat het in ieder geval duidelijk is wat nu precies een DIV is en wanneer je een ID of CLASS toepast. Je kan uiteindelijk door middel van CSS ondere andere de positie van een DIV gaan veranderen en zo hele leuke creaties maken. Het is dus wel belangrijk dat je de basis een beetje begrijpt, mocht je ooit een eigen blogdesign willen ontwerpen. Zijn er nog onduidelijkheden, vraag deze dan in de comments.

Geef een reactie

3 reacties

  1. Kimberley says:

    Wat heb je het duidelijk uitgelegd! Zelf werkte ik ooit nog met iframes en daarna inderdaad hiermee. Zodra je dit begrijpt, begrijp je al zoveel. Best lastig om even in te komen, maar zodra je het weet… Goed geschreven!

    • Hoi Kimberley! Dankjewel! Het was lastig om het niet te technisch te maken dus ik ben blij dat het duidelijk is.

      Mijn websites waren ook altijd een iframes en dan in combinatie met tabellen, terwijl dat nu helemaal afgeraden wordt. Leuk om te zien hoe alles veranderd he?

  2. Neeltje says:

    Dankje! Dat is precies de uitleg die ik even nodig had.