CSS, HTML & Javascript mit {stil}

HTML <dfn> und <var> für Dokumentationen und Lehrbücher

dfn markiert den Begriff, der in einem Satz definiert wird und ist sinnvoll in technischen Dokumentationen, Glossaren und EPUBs zu Fachthemen. var markiert variablenhafte Begriffe, z. B. in Code, Formeln oder Mathematik. Beides wird nicht sehr häufig verwendet – ist aber semantisch korrekt und hilfreich, auch für Accessibility und automatische Verarbeitung.

HTML code tag

<dfn> – Definitionen im Text herausstellen

Im Ingenieurwesen, in der Forschung und technischen Dokumentationen ist es gängige Praxis, das erste Vorkommen eines Begriffs kursiv zu setzen – also stellen die Browser Text in dfn kursiv heraus.

Das direkte Elternelement des dfn-Tags (z.B. das p-Tag, dl oder section) soll die Definition des Begriffs enthalten.

<p><dfn>Tsundoku</dfn> (japanisch) Die Kunst, Bücher zu kaufen, 
    aber nicht zu lesen, sondern mit anderen ungelesenen Büchern zu stapeln.</p>

Tsundoku (japanisch) Die Kunst, Bücher zu kaufen, aber nicht zu lesen, sondern mit anderen ungelesenen Büchern zu stapeln.

dfn in dl-Listen

Wie alle HTML-Tags, die in den Icons der Editoren von Content Management Systeme nicht vertreten sind, sind def, var, kbd und samp wahre Raritäten.

dfn hat keinen bleibenden Eindruck in den Webseiten der letzten Jahrzehnte hinterlassen. Das W3C hat dem dfn-Tag eine neue Aufgabe zugewiesen: Weil das dl-Tag nicht länger ausschließlich auf Definitionslisten fixiert ist, empfiehlt das W3C, das dfn-Tag in dl-Listen einzusetzen. Innerhalb des dt-Tags soll dfn anzeigen, dass es sich hier tatsächlich um eine Definitionsliste handelt.

So richtig in Schwung kommt die Definitionsliste zusammen mit dfn, wenn wir Metadaten wie RDF oder schema.org einsetzen.

Autoren
Michael Meyers
Louis Lane
Lektorat
Jeannette Neumann
Kategorie
Technischer Artikel

HTML <var> – Text als Variable markieren

var kennzeichnet z.B. Variablen im Computer-Code von Handbüchern und mathematische Variablen im Text von Lehrbüchern per Vorgabe durch einen Italic-Font, also eine leichte Betonung.

Die Fläche A eines Kreises wird mit der Formel A = π × r2 berechnet, wobei

Die Fläche <var>A</var> eines Kreises wird mit der Formel 
    <var>A</var> = <var>π</var> × <var>r</var><sup>2</sup> berechnet, 
    wobei

Für Formeln ist MathML die bessere Wahl, aber hier ist var in der Erklärung gut aufgehoben.

a = b2 + c2
Der Satz des Pythagoras berechnet die Hypotenuse a eines Dreiecks mit den Seiten b und c.
<figcaption>
   Der <dfn>Satz des Pythagoras<dfn> berechnet die Hypotenuse 
   <var>a</var> eines Dreiecks mit den Seiten <var>b</var> und <var>c</var>.
</figcaption>

Phrase-Tags

code, kbd, samp, dfn und var sind Phrase-Tags, die für kurze Zeichenfolgen innerhalb von Sätzen und Fließtext gedacht sind und nicht zu einem Zeilenumbruch führen.

Phrase-Tags betonen einzelne Wörter innerhalb eines Textes und heben Begriffe vom Rest des Satzes ab, entweder durch eine Kursivschrift, durch einen Monospace-Font, eine Hintergrundfarbe oder durch fette Schrift.

Suchen auf mediaevent.de