HTML-Element samp im Beispiel

Freitag, 27 August 2010 18:17 MET

Thema:: Webgestaltung
Stichworte:: HTML, HTML5, Webstandards

dieser Artikel: HTML-Element samp im Beispiel [hyperkontext | Weblog]; Kommentare 5

In den gängigen Dokumentationen wird diese HTML-Textauszeichnung in einem Satz abgehandelt. In der »Wildnis« ist samp dementsprechend selten anzutreffen.

Suchmaschinen oder etwa Screenreader ordnen diesem Element in der Praxis wohl keinerlei Bedeutung zu.

Doch Gelegenheit provoziert Einsatz. Nachfolgend ein Beispiel.

Gelegenheit provoziert Einsatz

Es gibt Textauszeichnungen in HTML, die kaum verwendet werden. Dazu gehört auch samp – Synonym für Sample beziehungsweise Beispiel. Die meisten Browser stellen dieses Inline-Element in Monospace-Schrift dar.

In den gängigen Dokumentationen (auch für HTML5) wird die Sache in einem Satz abgehandelt. Zumeist mit der Erklärung, zur Darstellung einer Bildschirmausgabe. Etwa: <p>Das Programm zeigt <samp>unerlaubter Zugriff</samp> als Fehlermeldung an.</p>

Manche raten sogar vom Einsatz ab: it really only defines the style of text, so it should be avoided.

In der »Wildnis« ist samp dementsprechend selten anzutreffen.

Bei mir ergab sich die Gelegenheit, mich mit diesem HTML-Element näher auseinanderzusetzen:

Beispiel

Ich hatte mal den Fall eines internen Online-Handbuches. Typisch für solche Dokumentationen ist ja, dass immer wieder Screenshots, Tastatureingaben – die übrigens in HTML mit dem Element kbd ausgezeichnet werden – und beispielhafte Ausgaben dargestellt werden.

Hinweis:
Ich beschreibe nachfolgend bloß die Frontend-Vorlage für diesen Teilbereich.

Zu diversen Funktionsbeschreibungen sollten auch mögliche Fehlermeldungen angezeigt werden. Dafür wäre in HTML das Element samp vorgesehen.

Die Sache hatte also System und war nicht etwas, das ab und an im Fließtext auftritt. Die Definitionsliste (dl) erschien mir da einmal mehr als geeignete Option zur Darstellung.

Unterhalb der Erklärung zu einer Eingabeanweisung reihte ich also eine Definitionsliste mit den Fehlermeldungen als Definition-Term (dt), welche nach dieser Interaktion auftreten könnten. Die eigentliche Fehlermeldung zeichnete ich dann extra mit samp aus.

In einer oder mehreren Definitionsbeschreibungen (dd) folgt dann die nähere Erklärung mit eventuellen Handlungsanleitungen.

So sieht das Prinzip in HTML aus:

<h3>Mögliche Fehlermeldungen</h3>
<dl>
 <dt>
  <samp>Ich bin Fehlermeldung 5</samp>
 </dt>
 <dd>
   <p>Der Erklärungstext</p>
 </dd>
</dl>

Wie das ungefähr rüberkommt, sehen wir auf der Demoseite als reines HTML-Beispiel. Das lässt sich natürlich dementsprechend noch per CSS (Cascading Style Sheets) darstellen und positionieren.

Denkbar wäre auch, einen Screenshot als Bild innerhalb von samp einzubinden und die Fehlermeldung in das alt-Attribut zu schreiben.

Ein Wort zur Semantik

In der Theorie mag die HTML-Textauszeichnung einer beispielhaften Bildschirmausgabe Wert haben. Suchmaschinen oder etwa Screenreader ordnen diesem Element in der Praxis wohl keinerlei Bedeutung zu.

Wenn wir das Element samp also weglassen oder mit span ersetzen – um es beispielsweise mit CSS zu verwenden, wird das die Verarbeitung und Wahrnehmung nicht verändern. Andererseits: Es tut niemandem weh, wenn wir samp zu gegebenem Anlass tatsächlich einsetzen.

Code-Puristen könnten natürlich einwenden, dass der x-fache – in ihren Augen unnötige – Einsatz von samp viele Bytes verschlingt, ohne wirklich Nutzen zu bringen. Im Vergleich zu diversen, oftmals verzichtbaren, Javascripts und hippen Fremdeinbindungen hielte ich dieses Argument dann schon für Korinthenkackerei.