Dez 2011

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

Das span-Tag wendet HTML-Attribute auf Inhalte und Inline-Elemente an. Inline-Elemente sind HTML-Elemente, die nicht zu einem Zeilenumbruch führen wie z.B. a, img, label und input.

HTML span transportiert CSS-Stile zu diesen Inhalten oder dient als Anker für JavaScript, wenn z.B. Text oder Bilder dynamisch ausgetauscht werden sollen.

HTML span fügt den betroffenen Elementen keinerlei Formatierung hinzu, wenn für das span-Tag keine CSS-Stile angelegt sind.

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.

Innerhalb eines <span>-Tags dürfen nur Inline-Elemente liegen – also keine HTML-Tags wie div, table, ul, li oder p.

<span>-Tags können ineinander verschachtelt werden. 

<div style="border:2px solid dimgray;"> 
  <p> Wenn mitten im Text 
    <span style="color: green;">ein paar Wörter anders aussehen</span> 
    als der Rest, dann war's bestimmt ein <span>-Tag. </p> 
</div>

Wenn mitten im Text ein paar Wörter anders aussehen als der Rest, dann war's bestimmt ein <span>-Tag.

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

Attribute und Events für span

Nur Kernattribute

KernattributeEreignisse