HTML-elementen & attributen

HTML-elementen zijn de bouwstenen van webpagina’s. Ze definiëren en structureren de content die op een pagina moet worden weergegeven. Hier is een blik op de basisstructuur.

Voorbeeld van een HTML-Element

Een HTML-element bestaat typisch uit een openingstag, content en een sluittag. Laten we het element <p> als voorbeeld nemen:


<p>My students are fantastic</p>

In dit voorbeeld is <p> de openingstag. Deze tag opent het <p> element, wat staat voor een paragraaf. De paragraaf bevat de tekst die tussen de openingstag en de sluittag staat.

De content van het element is de tekst "My students are fantastic". Dit is wat daadwerkelijk op de webpagina wordt weergegeven tussen de openingstag en de sluittag.

Het element eindigt met de sluittag </p>. Deze tag geeft aan waar het <p> element eindigt. Het is essentieel om de sluittag te gebruiken, zodat de browser weet waar de content van dit specifieke element eindigt en waar eventueel een nieuw element begint.

Basis HTML-Elementen

Het <h> Element

Dit element definieert koppen in de tekst. Er zijn zes niveaus, <h1> tot <h6>, waarbij <h1> de hoogste en meest prominente kop is, en <h6> de laagste.


<h1>Hoofdkop</h1>
<h2>Subkop</h2>

Gebruik deze elementen om een hiërarchische structuur in je tekst aan te brengen, waarbij je begint met een <h1> voor de titel en vervolgens lagere niveau koppen gebruikt voor subsecties.

Het <p> Element

Het <p> element definieert een paragraaf. Het wordt gebruikt om tekst en inline-elementen te scheiden en te groeperen, wat de leesbaarheid verbetert.


<p>Dit is een voorbeeld van een paragraaf. Het scheidt tekst in beheersbare blokken en verbetert de leesbaarheid.</p>

Maak je paragrafen niet te lang en gebruik ze om je tekst te structureren en de lezer door je content te leiden.

De <ul>, <ol> en <li> Elementen

Lijsten zijn een essentieel onderdeel van HTML voor het ordenen van informatie. Het <ul> element definieert een ongeordende lijst, terwijl het <ol> element een geordende lijst definieert. Het <li> element wordt gebruikt om items in de lijst weer te geven.


<ul>
    <li>Item Een</li>
    <li>Item Twee</li>
</ul>

<ol>
    <li>Eerste Item</li>
    <li>Tweede Item</li>
</ol>

Gebruik <ul> voor een lijst waarin de volgorde van de items niet belangrijk is, en <ol> waar de volgorde wel telt.

De <strong> en <em> Elementen

Het <strong> element wordt gebruikt om sterke nadruk te leggen op een tekst, terwijl het <em> element tekst benadrukt voor nadruk. Het is gebruikelijk dat browsers <strong> tekst vet weergeven en <em> tekst cursief.


Dit is <strong>belangrijke</strong> tekst. Dit is <em>benadrukte</em> tekst.

Gebruik deze elementen spaarzaam om specifieke delen van je tekst te benadrukken zonder de leesbaarheid te beïnvloeden.

Aanvullende basiselementen

Naast de reeds besproken elementen, zijn er nog andere basiselementen die vaak worden gebruikt in HTML, zoals het <a> element voor hyperlinks en het <div> element voor het groeperen van content. Een gedetailleerde behandeling van deze elementen vind je in de specifieke hoofdstukken over hen.

Belang van semantische HTML

Semantische HTML houdt in het gebruik van HTML-elementen volgens hun bedoelde doel. Elementen zoals <article>, <section>, <header>, en <footer> helpen niet alleen bij het structureren van de content, maar verbeteren ook de SEO en toegankelijkheid van de website. Semantische elementen worden in een apart hoofdstuk behandeld.

Attributen

HTML-attributen zijn extra informatie die aan HTML-elementen wordt toegevoegd om specifieke eigenschappen of kenmerken van die elementen te definiëren of te wijzigen.

Attributen zijn altijd opgenomen in de openingstag van een element.
Ze worden altijd voorgesteld in naam/waarde-paren, zoals naam="waarde".

Veelgebruikte HTML-attributen

Elk HTML-attribuut heeft een specifiek doel en wordt gebruikt om de functionaliteit of het uiterlijk van een element te wijzigen. Hier zijn voorbeelden van veelgebruikte attributen en hoe ze worden gebruikt:

class: Specificeert een of meer klassennamen voor een element.
```
<div class="container"></div>
```
id: Geeft een unieke ID aan een element.
```
<div id="header"></div>
```
style: Voegt inline CSS-stijlen toe aan een element.
```
<p style="color: red;">Dit is rode tekst.</p>
```

alt: Biedt een alternatieve tekst voor een afbeelding.

<img src="image.jpg" alt="Een beschrijving van de afbeelding">

Het correct gebruiken van HTML-attributen is essentieel voor het creëren van toegankelijke, gebruiksvriendelijke en goed gestructureerde webpagina's. Zorg ervoor dat je de tijd neemt om te begrijpen hoe elk attribuut werkt en waar het het beste kan worden toegepast om je webontwikkelingsvaardigheden te verbeteren.

SEO en toegankelijkheid

Correct gebruik van elementen en attributen speelt een cruciale rol in zowel SEO als toegankelijkheid. Bijvoorbeeld, het gebruik van de alt-tekst bij afbeeldingen helpt bij zowel zoekmachineoptimalisatie als het toegankelijk maken van de content voor gebruikers met visuele beperkingen.

Links naar gerelateerde hoofdstukken

Voor meer gedetailleerde informatie over specifieke HTML-elementen zoals <img> en het nesten van elementen, verwijzen we je naar de desbetreffende hoofdstukken. Dit zal je helpen om een dieper begrip te krijgen van elk element en hoe ze samenwerken in een HTML-document.

Samenvatting en oefeningen

Dit hoofdstuk heeft je kennis laten maken met de basis HTML-elementen en hun attributen. Het is aan te raden om te experimenteren met deze elementen door kleine webpagina’s te creëren als oefening. Dit zal je helpen om de theorie in de praktijk te brengen en je vaardigheden in webontwikkeling te versterken.

Terug naar boven