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:

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:

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:

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.