<span> HTML-Inhalt-Span-Element

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Das <span> HTML-Element ist ein generischer Inline-Container für Phrasencontent, der an sich nichts repräsentiert. Es kann verwendet werden, um Elemente zu gruppieren, die für Styling-Zwecke (mithilfe von Attributen wie class oder id) oder weil sie gemeinsame Attributwerte haben, wie zum Beispiel lang. Es sollte nur verwendet werden, wenn kein anderes semantisches Element angemessen ist. <span> ist sehr ähnlich wie ein <div>-Element, jedoch ist <div> ein Block-Level-Element, während ein <span> ein Inline-Level-Element ist.

In diesem Artikel

Probieren Sie es aus

<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>

span.ingredient {
  color: red;
}

HTML

html

Ergebnis

Beispiel 2

HTML

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

CSS

css
li span {
  background: gold;
}

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Erlaubter Inhalt Tag-Auslassung Erlaubte Eltern Implizierte ARIA-Rolle Erlaubte ARIA-Rollen DOM-Schnittstelle

Flussinhalt, Phrasencontent.

Phrasencontent.

Keine, sowohl das Start- als auch das End-Tag sind erforderlich.

Jedes Element, das Phraseninhalt akzeptiert, oder jedes Element, das Flussinhalt akzeptiert.

Keine entsprechende Rolle

Beliebig

[`HTMLSpanElement`](/de/docs/Web/API/HTMLSpanElement)

HTML <div>-Element

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

<span> HTML-Inhalt-Span-Element

In diesem Artikel

Probieren Sie es aus

Attribute

Beispiel

Beispiel 1

HTML

Ergebnis

Beispiel 2

HTML

CSS

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN