span für die Formatierung
Das span-Tag sollt – genauso wie das div-Element – nur eingesetzt werden, wenn kein semantisches Tag wie em oder strong, del oder code angebracht ist.
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-Tags können beliebig ineinander verschachtelt werden. Innerhalb von span dürfen nur Inline-Elemente liegen – also keine HTML-Tags wie div, table, ul, li oder p.
span für Effekte und Animationen
class- und id-Attribute des 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-Tags wie <em> oder <strong> besser angebracht als das span-Tag: Auf der einen Seite müssen dann keine weiteren Stile angelegt werden (wir sparen ein wenig) und auf der anderen Seite fügen Tags wie em und strong dem eingeschlossenen Text eine semantische Bedeutung hinzu (leichte und starke Betonung).
Gut angebracht ist ein span-Tag 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="2017-06-26">Montag, den 26. Juni 2017</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 Montag, den 26. Juni 2017 ein maschinenlesbares Datum.