Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Leer Inzicht in Gekoppelde en Enkele Tags in HTML | HTML-Tags en Attributen
Ultimate HTML

bookInzicht in Gekoppelde en Enkele Tags in HTML

HTML gebruikt twee soorten tags: gepaarde tags en enkele (zelfsluitende) tags. Elk speelt een andere rol bij het structureren van een webpagina.

Gepaarde tags

Gepaarde tags hebben een openings- en een sluitingstag. Ze omhullen inhoud, groeperen elementen en definiëren betekenis of structuur.

Syntax:

<tag_name>Some content</tag_name>

Hier is een echt voorbeeld van het gebruik van gepaarde tags:

index.html

index.html

copy

In dit voorbeeld:

  • <section>...</section>: groepeert gerelateerde inhoud;
  • <h1>...</h1>: voegt een kop toe aan de sectie;
  • <p>...</p>: bevat een alinea die uitlegt dat de meeste HTML-tags in paren voorkomen.

Enkele Tags

Enkele tags hebben geen sluitende tag. Ze worden gebruikt wanneer er geen interne inhoud nodig is en al het gedrag wordt gedefinieerd via attributen.

Syntaxis:

<tag_name />

Hier is een echt voorbeeld van het gebruik van enkele tags:

index.html

index.html

copy

Deze code bevat twee elementen:

  • <input />: maakt een tekstinvoerveld. De placeholder=" name" toont een hint in het veld;
  • <img />: toont een afbeelding van fruit.
    • alt="Fruits": tekst die wordt weergegeven als de afbeelding niet laadt;
    • width en height: stellen de afmetingen van de afbeelding in;
    • src: specificeert de URL van de afbeelding.

Tag-nesting

Tags moeten correct genest worden, vergelijkbaar met matroesjka-poppen, waarbij elke sluitende tag overeenkomt met de juiste openings-tag in de juiste volgorde.

Hier volgt een voorbeeld van geneste tags:

<tag1>
  <tag2>
    <tag4>...</tag4>
    <tag5>...</tag5>
  </tag2>
  <tag3>
    <tag6>...</tag6>
  </tag3>
</tag1>

Beschouw het volgende geldige voorbeeld:

index.html

index.html

copy

Deze code toont een alinea met een link en benadrukte tekst:

  • <p>...</p>: omhult de volledige alinea;
  • <a href="https://privacy.com">...</a>: maakt een klikbare link naar het Privacybeleid;
  • <strong>...</strong>: maakt het woord "website" vetgedrukt om het te benadrukken.
Note
Samenvatting

Gepaard tags omhullen inhoud met <tag> en </tag>.

Enkele tags (zelfsluitend) bevatten geen interne inhoud.

Correcte insluiting zorgt voor geldige, leesbare HTML.

question mark

Wat zijn de twee hoofdtypen HTML-tags? Geef de namen van deze categorieën.

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 3

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Suggested prompts:

Can you give more examples of paired and single tags?

What are some common mistakes with tag nesting?

Can you explain the difference between <strong> and <em> tags?

bookInzicht in Gekoppelde en Enkele Tags in HTML

Veeg om het menu te tonen

HTML gebruikt twee soorten tags: gepaarde tags en enkele (zelfsluitende) tags. Elk speelt een andere rol bij het structureren van een webpagina.

Gepaarde tags

Gepaarde tags hebben een openings- en een sluitingstag. Ze omhullen inhoud, groeperen elementen en definiëren betekenis of structuur.

Syntax:

<tag_name>Some content</tag_name>

Hier is een echt voorbeeld van het gebruik van gepaarde tags:

index.html

index.html

copy

In dit voorbeeld:

  • <section>...</section>: groepeert gerelateerde inhoud;
  • <h1>...</h1>: voegt een kop toe aan de sectie;
  • <p>...</p>: bevat een alinea die uitlegt dat de meeste HTML-tags in paren voorkomen.

Enkele Tags

Enkele tags hebben geen sluitende tag. Ze worden gebruikt wanneer er geen interne inhoud nodig is en al het gedrag wordt gedefinieerd via attributen.

Syntaxis:

<tag_name />

Hier is een echt voorbeeld van het gebruik van enkele tags:

index.html

index.html

copy

Deze code bevat twee elementen:

  • <input />: maakt een tekstinvoerveld. De placeholder=" name" toont een hint in het veld;
  • <img />: toont een afbeelding van fruit.
    • alt="Fruits": tekst die wordt weergegeven als de afbeelding niet laadt;
    • width en height: stellen de afmetingen van de afbeelding in;
    • src: specificeert de URL van de afbeelding.

Tag-nesting

Tags moeten correct genest worden, vergelijkbaar met matroesjka-poppen, waarbij elke sluitende tag overeenkomt met de juiste openings-tag in de juiste volgorde.

Hier volgt een voorbeeld van geneste tags:

<tag1>
  <tag2>
    <tag4>...</tag4>
    <tag5>...</tag5>
  </tag2>
  <tag3>
    <tag6>...</tag6>
  </tag3>
</tag1>

Beschouw het volgende geldige voorbeeld:

index.html

index.html

copy

Deze code toont een alinea met een link en benadrukte tekst:

  • <p>...</p>: omhult de volledige alinea;
  • <a href="https://privacy.com">...</a>: maakt een klikbare link naar het Privacybeleid;
  • <strong>...</strong>: maakt het woord "website" vetgedrukt om het te benadrukken.
Note
Samenvatting

Gepaard tags omhullen inhoud met <tag> en </tag>.

Enkele tags (zelfsluitend) bevatten geen interne inhoud.

Correcte insluiting zorgt voor geldige, leesbare HTML.

question mark

Wat zijn de twee hoofdtypen HTML-tags? Geef de namen van deze categorieën.

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 3
some-alt