HTML cite

HTML cite-Tag

Das cite-Tag ist ein Verweis auf ein Werk, entweder durch den Titel des Werks oder den Namen des Autors oder eine URL.

<p>In seiner Rede <cite>Die Schrecken der deutschen Sprache</cite> 
   machte Mark Twain ironische Vorschläge 
   zur <q>Verbesserung und Vereinfachung</q>
</p>

cite gehört zu den Phrase-Elementen. Phrase-Tags wie small, abbr, code oder mark heben ein oder mehrere Wörter innerhalb eines Satzes hervor, haben eine besondere Bedeutung, aber i.d.R. keine eigenen Attribute.

Als Zitat hätte das cite-Tag keine speziellen Attribute, um die Quelle des Zitats anzugeben. HTML cite unterstützt nur die globalen HTML-Attribute wie class, id, title und style.

Für Zitate ist das blockquote-Element zuständig.

Gäbe es die letzte Minute nicht, so würde niemals etwas fertig.

Für das blockquote-Tag gibt es dann ein cite-Attribut für die Quelle des Zitats, aber der Inhalt des cite-Attributs wird ohne CSS oder Javascript nicht angezeigt.

HTML q – Quotes

Das q-Tag (quotation) markiert Text mit Anführungszeichen. Die Browser sollen den Text automatisch mit den typografischen Anführungszeigen je nach Landessprache anzeigen (anstelle der lieblosen doppelten Hochkommas).

Im Text stellen doppelte Hochkommas meist ein kurzes Zitat oder wörtliche Rede dar.

<p>Um es mit Mark Twain zu sagen: 
   <q>Gäbe es die letzte Minute nicht, 
   so würde niemals etwas fertig.</q>
</p>

Mit dem HTML-Attribut lang="fr" setzen Safari, Chrome und Opera «französische» typografische Anführungszeichen, mit lang="de" „deutsche Anführungszeichen” unten und oben (Sprachcodes). IE11 ebenfalls, allerdings bleibt IE unbeeindruckt vom Wechsel der Sprache via Javascript.

Auch Firefox besteht auf den geraden doppelten Hochkommas oben – gleich welche Sprache dem Browser vorgesetzt wird.

Attribute für q

Natürlich ist es einfacher, gleich Hochkommas im Klartext schreiben. Das q-Tag hat aber – genauso wie blockquote – ein spezielles Attribut cite, um die Quelle des Zitats aufzuführen. Und dann hätten wir auch noch die Hoffnung, dass der Browser die typografischen Anführungszeichen (smart quotes) der Landessprache setzt.

cite

Referenz auf eine URL als Quelle. Die Browser rendern den Inhalt des Attributs nicht – die Quelle wird also nicht auf der HTML-Seite angezeigt. Das cite-Attribut des Inline-Zitats kann nur durch CSS oder Javascript sichtbar gemacht werden.

CSS für Anführungszeichen und Hochkommas

Wenn korrekte Hochkommas und Anführungszeichen wichtig sind, hat CSS eine spezielle Eigenschaft für das q-Tag in petto: quotes ersetzt die automatischen Anführungszeichen – z.B. je nach Sprache des Dokuments.

<style>
/** Deutsch **/
html[lang="de"] q { quotes: "»" "«" }
q:lang(de) { quotes: "»" "«" }

/** Für Schweiz und Frankreich **/
html[lang="ch"] q, 
html[lang="fr"] q  { quotes: "«" "»" }
q:lang(ch),
q:lang(fr) { quotes: "«" "»" }
</style>

Sinnvoll ist HTML q also in mehrsprachigen Dokumenten, in denen der Einsatz sprachspezifischer Kommapaare wie schweizer typografische Anführungszeichen oder deutsche typgrafische Anführungszeichen durch das lang-Attribut des HTML-Dokuments entschieden wird.

Verschachtelte Anführungszeichen

Handbücher und Tutorials zu Programmiersprachen setzen Ausdrücke mit Hilfe des q-Tags in verschachtelte Anführungszeichen.

<style>
   q { quotes: '"' '"' "'" "'" }
</style>
 …
<q>Num(<q>pi</q>)</q> is not a valid string

Sieht kompliziert aus? Geht so.

             +--- erstes öffnendes Anführungszeichen
             |
             |   +--- erstes schließendes Anführungszeichen
             |   |
q { quotes: '"' '"' "'" "'" }
                     |   |
                     |   +--- zweites schließendes Anführungszeichen
                     |
                     +--- zweites öffnendes Anführungszeichen