Naslag / Tekst en koppen

Het element `<span>`

Het <span>-HTML-element is een generieke inline-container voor phrasing-inhoud, die op zichzelf niets voorstelt. Het kan worden gebruikt om elementen te groeperen met het oog op styling (met behulp van de class- of id-attributen), of omdat ze dezelfde attribuutwaarden delen, zoals lang. Het moet alleen worden gebruikt als er geen ander semantisch element geschikt is. <span> lijkt sterk op een <div>-element, maar <div> is een blokniveau-element terwijl een <span> een inline-niveau-element is.

Auteur: Maarten Soetens Bijgewerkt op 25 augustus 2026

Code

<p>
  Add the <span class="ingredient">basil</span>,
  <span class="ingredient">pine nuts</span> and
  <span class="ingredient">garlic</span> to a blender and blend into a paste.
</p>

<p>
  Gradually add the <span class="ingredient">olive oil</span> while running the
  blender slowly.
</p>

Resultaat in de browser

Attributen

Dit element bevat alleen de globale attributen.

Voorbeeld

Voorbeeld 1

HTML

<p><span>Some text</span></p>

Resultaat

Resultaat in de browser

Voorbeeld 2

HTML

<li>
  <span>
    <a href="portfolio.html" target="_blank">See my portfolio</a>
  </span>
</li>

CSS

li span {
  background: gold;
}

Resultaat

Resultaat in de browser

Technische samenvatting

Inhoudscategorieën	Flow-inhoud, phrasing-inhoud.
Toegestane inhoud	Phrasing-inhoud.
Weglaten van tags	Geen, zowel de begin- als de eindtag zijn verplicht.
Toegestane ouders	Elk element dat phrasing-inhoud accepteert, of elk element dat flow-inhoud accepteert.
Impliciete ARIA-rol	Geen overeenkomstige rol
Toegestane ARIA-rollen	Alle
DOM-interface	`HTMLSpanElement`

Zie ook

<div>

Verwante elementen

Het element <span>

Attributen

Voorbeeld

Voorbeeld 1

HTML

Resultaat

Voorbeeld 2

HTML

CSS

Resultaat

Technische samenvatting

Zie ook

Verwante elementen

Het element `<span>`