CSS, HTML und Javascript mit {stil}

HTML cite-Tag / q-Tag

HTML blockquote

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

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

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>

Wenn sich ein Zitat über mehrere Zeilen erstreckt, ist ein blockquote-Tag besser angebracht.

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

HTML q – Quotes

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.

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