HTML cite-Tag

HTML cite Tag und HTML q Tag

Das HTML cite-Tag war ursprünglich für Zitate gedacht, aber mit HTML5 ist seine Bedeutung in Titel eines Werks oder auch Autor eines Werks umgewandelt worden. Die Browser setzen Text in cite in kursiver Schrift.

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.

In seiner Rede Die Schrecken der deutschen Sprache machte Mark Twain ironische Vorschläge zur Verbesserung und Vereinfachung

<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 cite, abbr und code 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-Tag vorgesehen.

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

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

Mit html lang="fr" setzen Safari, Chrome und Opera «französische» typografische Anführungszeichen, mit lang="de" „deutsche Anführungszeichen” unten und oben. 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 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 Hochkommas

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

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

Sieht kompliziert aus? Geht so.

             +--- erstes öffnendes Hochkomma
             |
             |   +--- erstes schließendes Hochkomma
             |   |
q { quotes: '"' '"' "'" "'" }
                     |   |
                     |   +--- zweites schließendes Hochkomma
                     |
                     +--- zweites öffnendes Hochkomma
<cite> </cite>