CSS, HTML und Javascript mit {stil}

HTML span – Inline-Formate für einen Bereich der Webseite

HTML span

HTML span separiert Inline-Elemente wie Textabschnitte, Eingabefelder oder Bilder für CSS oder Javascript. span ist nur ein Behälter ohne semantische Bedeutung und hat ohne CSS keine Auswirkung auf die Darstellung.

In dieser Hinsicht ist das span-Tag das Gegenstück zum div-Tag, das ein Blockelement bildet (das div-Tag führt zu einem Zeilenumbruch). Beide Tags nehmen eine Reihe von Tags auf, um Attribute oder CSS-Stile auf sie anzuwenden, ohne selber eine Formatierung einzubringen.

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

Das span-Tag sollte – 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 Wind nicht ändern, aber die Segel anders setzen. Aristoteles
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 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.

+
Der Apfel fällt nicht weit vom Stamm
<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

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.

Gut angebracht ist ein span-Tag z.B. hingegen für Mikroformate wie itemscope, itemid, itemprop ….