span für die Formatierung
Das span-Element sollte – genauso wie das div-Element – nur eingesetzt werden, wenn kein semantisches HTML-Element wie em oder strong, del oder code angebracht ist. In dieser Hinsicht ist das span-Element das Gegenstück zum div-Element, das ein Blockelement bildet (CSS div führt zu einem Zeilenumbruch). Beide Elemente nehmen eine Reihe von weiteren Elementen auf, um Attribute oder CSS-Stile auf sie anzuwenden, ohne selber eine Formatierung einzubringen.
Wir können den <span class="rule1">Wind</span> nicht ändern, <span class="rule3">aber die <span class="rule1">Segel</span> anders setzen</span>. <span class="rule2">Aristoteles</span>
span-Elemente können beliebig ineinander verschachtelt werden. Innerhalb von span dürfen nur Inline-Elemente liegen – also keine HTML-Elemente wie div, table, ul, li oder p.
HTML span gehört zu den sogen. Phrasing-Elementen (in HTML4 / XHTML noch Inline-Elemente genannt) und muss immer geschlossen werden.
Am Rande: Mit HTML data und seinem value-Attribut ist ein Pendant zum span aufgetaucht, das ohne CSS ebenfalls keine Formatierung mit sich bringt. data ist wie span ein inline-Element, aber mit einem value-Attribut, das die mundgerechte Aufbereitung von Werten für Scripte vereinfacht.
<data value="12.99">€ 12,99</value>
span für Effekte und Animationen
class- und id-Attribute des öffnenden span-Tags transportieren CSS in die Elemente und wirken in Scripten zur Identifizierung des Elements.
<style>
.demo { width: 280px; margin: 1em auto}
.opn { font-size: 2em; cursor: pointer}
.dline { background: orchid; color: white; text-align: right; }
.demo figure { height: 0; overflow: hidden; transition: height 1s}
.demo figure.showspan { height: 280px}
</style>
<div class="demo">
<div class="dline"><span class="opn">+</span></div>
<figure>
…
</figure>
</div>
<script>
document.querySelector('.opn').onclick = function () {
document.querySelector('.demo figure').classList.toggle('showspan');
if (this.innerHTML == '+') this.innerHTML = '-'; else this.innerHTML = '+';
}
</script>
span einsetzen für Rich Snippets
Wenn Text kursiv oder fett gesetzt werden soll, sind HTML-Elemente wie <em> oder <strong> besser angebracht als das span-Element: Auf der einen Seite müssen dann keine weiteren Stile angelegt werden (wir sparen ein wenig) und auf der anderen Seite fügen HTML-Elemente wie em und strong dem eingeschlossenen Text eine semantische Bedeutung hinzu (leichte und starke Betonung).
Gut angebracht ist ein span-Element z.B. hingegen für Mikroformate wie itemscope, itemid, itemprop …, die für die Suchmaschinenoptimierung (SEO) eingesetzt werden.
Ein Datum ist für eine Suchmaschinen nur eine Folge von Ziffern und Punkten. Damit Suchmaschinen ein Datum und Orte erkennen, werden Text im HTML gekennzeichnet:
<div itemscope="" itemtype="http://schema.org/ExhibitionEvent">
<meta itemprop="location" content="Deutsches Museum Bonn">
<meta itemprop="inLanguage" content="de">
<h2>
<span itemprop="name">Mathematik zum Anfassen</span>
</h2>
<time itemprop="startDate" datetime="2022-02-03">Donnerstag, den 3. Februar 2022</time>
<p itemprop="description">Mathematische Phänomene begreifbar machen.</p>
<p>Vorträge und <span itemprop="offers">Einladung zum Knobeln und Spielen</span></p>
</div>
Quelle: ExhibitionEvent auf https://schema.org
Die zusätzlichen Informationen machen aus einem (für die Suchmaschinen) nichtssagenden Text wie Donnerstag, den 3. Februar 2022 ein maschinenlesbares Datum.
