HTML-elementen & attributen

HTML-elementen zijn de bouwstenen van webpagina’s. Ze structureren de inhoud die je op een pagina wilt tonen. Hieronder leer je de basis.

Voorbeeld van een HTML-element

Een HTML-element bestaat meestal uit een openingstag, content en een sluittag. Neem als voorbeeld het <p>-element:

<p>My students are fantastic</p>

- <p> is de openingstag. - De tekst “My students are fantastic” is de content. - </p> is de sluittag, die het einde van de paragraaf markeert.

---

Basis HTML-elementen

De <h1>–<h6> elementen

Gebruik <h1> tot <h6> om koppen te maken. <h1> is de belangrijkste titel, <h6> de minst belangrijke.

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

Het <p> element

Het <p>-element definieert een paragraaf. Gebruik paragrafen om tekst overzichtelijk in blokken te verdelen.

<p>Dit is een paragraaf met duidelijke leesbaarheid.</p>

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

Lijsten ordenen informatie. - <ul>: ongeordende lijst (bolletjes). - <ol>: geordende lijst (nummers). - <li>: elk item in de lijst.

<ul>
  <li>Item één</li>
  <li>Item twee</li>
</ul>

<ol>
  <li>Eerste item</li>
  <li>Tweede item</li>
</ol>

De <strong> en <em> elementen

<strong> legt sterke nadruk (meestal vet), <em> benadrukt tekst (meestal cursief).

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

Aanvullende elementen

Veelgebruikte extra’s zijn: - <a> voor hyperlinks, - <div> voor het groeperen van content. Meer hierover lees je in aparte hoofdstukken.

Semantische HTML

Gebruik elementen waarvoor ze bedoeld zijn: <article>, <section>, <header>, <footer>. Dit verbetert structuur, SEO en toegankelijkheid. Zie semantische elementen.

---

Attributen

Attributen geven extra informatie aan een element. Ze staan altijd in de openingstag en bestaan uit naam/waarde-paren (naam="waarde").

Veelgebruikte attributen

• class: groepeert elementen voor styling.
  

  <div class="container"></div>

• id: unieke identificatie.
  

  <div id="header"></div>

• style: inline CSS (niet aanbevolen voor grotere projecten).
  

  <p style="color:red;">Rode tekst</p>

• alt: alternatieve tekst bij afbeeldingen.
  

  <img src="foto.jpg" alt="Beschrijving van de afbeelding">

SEO en toegankelijkheid

Correct gebruik van elementen en attributen verbetert zowel SEO als toegankelijkheid. Vooral alt-teksten zijn hierbij belangrijk.

Samenvatting

Je leerde de belangrijkste HTML-elementen (h1–h6, p, lijsten, strong, em) en attributen (class, id, style, alt). Experimenteer hiermee door kleine webpagina’s te maken.

Oefening

Maak een nieuwe HTML-pagina oefening-elementen.html en gebruik daarin de elementen en attributen uit dit hoofdstuk.

1. Maak een <h1> met een titel voor je pagina.
2. Voeg minstens drie <p>-paragrafen toe met voorbeeldtekst.
3. Maak één lijst:
   • een ongeordende lijst (<ul>) met drie items, of
   • een geordende lijst (<ol>) met drie items.
4. Gebruik <strong> en <em> om enkele woorden in je tekst te benadrukken.
5. Voeg een afbeelding toe met het attribuut alt (beschrijvende tekst).

Download hier het oefenpakket met tekst en afbeeldingen:

📥 Download oefenpakket

Terug naar boven

---