Peter Kröner, Webtechnologie-Erklärbär

Als Erklärbär für HTML5 und andere Webtechnologien bekomme ich jede Woche neue Fragen rund um Webentwicklung gestellt. Da diese Fragen (und Antworten) viel zu schade sind, um sie in meinem E-Mail-Archiv verrotten zu lassen, hole ich sie im Rahmen der Artikelserie „Fragen zu HTML5 und Co“ regelmäßig ans Tageslicht – denn dumme Fragen gibt es schließlich nicht!

Wann welches Element verwenden?

Wann sollte man <mark> verwenden und wann <strong>, <em>, <b>, und <i>?

Es stimmt, dass all diese Elemente auf den ersten Blick so ziemlich das gleiche zu machen scheinen und es nicht immer ganz einfach, das richtige Element zu wählen. Anhand von Beispielen bekommt man am besten ein Gefühl dafür, was wann richtig ist und die gute Nachricht an dieser Stelle ist: es gibt in den HTML5-Spezifikationen offizielle Beispiele, hier für <em>. Eine der großen Errungenschaften von HTML5 ist nicht zuletzt die Qualität der Spezifikationen. Während man in den offiziellen Dokumenten zu HTML 4.01 nur sehr spärliche Erläuterungen und Beispiele findet (wenn überhaupt) sind die HTML5-Specs voll mit Beispielen, Tutorials und erklärender Prosa.

Wenn man also ein Beispiel oder eine Erklärung sucht, kann der Blick in den offiziellen Standard durchaus lohnen. Wem die offiziellen Specs mit ihrem monströsen Umfang etwas zu abschreckend erscheinen, könnte mit den Web Developer Editions von W3C und WHATWG (ja, davon gibt es gleich zwei, eine von jeder Arbeitsgruppe) glücklich werden.

Um aber die eigentliche Frage zu beantworten:

• <strong>: Wichtige Textpassagen, deren Wichtigkeit die Bedeutung des betroffenen Satzes nicht verändert.
• <em>: Betonte Textpassagen, deren Betonung die Bedeutung des betroffenen Satzes verändert.
• <b> und <i>: Textpassagen, die vom Rest abgesetzt, aber nicht auf- oder abgewertet werden sollen. Beispiele wären Produktnamen in einem Review oder Wörter aus anderen Sprachen. Dabei sollte man <b> verwenden, wenn die typografische Repräsentation der betroffenen Passage üblicherweise fetter Text wäre und <i>, wenn es kursiver Text wäre.
• <mark>: Hervorhebung von Textpassagen, die in einem nicht aus ihrem Ursprungskontext heraus eine Hervorhebung verdient hätten, sondern die nur aufgrund eines speziellen Umstandes relevant sind – z.B. weil sie ein Keyword sind, nach dem der Nutzer gesucht hat.

XLink und XHTML5

Für XML-basierte Sprachen wie z.B. SVG gibt es doch die Sprache XLink. Wäre es rein theoretisch auch möglich, sie in XHTML5 einzubinden?

XLink kann man theoretisch schon in XHTML verwenden. Es ist schließlich alles nichts weiter als XML und die (X)HTML5-Spezifikationen erlauben die Verwendung des XLink-Namespaces auch ausdrücklich. Das Problem ist nur, dass es meiner Recherche nach so gut wie gar keine Browserunterstützung gibt. Einzig der Firefox scheint Teile von XLink für SVG- und MathML-Dokumente zu implementieren.

<nav> und ARIA

Macht es Sinn, das <nav>-Element und WAI-ARIA in Kombination zu verwenden, also z.B. als <nav role="navigation">? Oder ist das doppelt gemoppelt? Das <nav> macht doch eigentlich schon deutlich, dass es sich um eine Navigation handelt …

Das ist in der Tat zumindest laut Standard doppelt gemoppelt, denn diese ARIA-Role wird Nav-Elementen automatisch zugeteilt. In der Realität sieht die Sache aber schwieriger aus. Wie man dieser Tabelle hier entnehmen kann, haben die wenigsten Browser heutzutage diese ARIA-Mappings auch wirklich standardkonform implementiert.

Was tun? Rumprobieren und testen. Es mag zwar falsch sein, role="navigation" zu verwenden, aber wenn das der einzige Weg ist, die Navigation auch für Screenreader als solche auszuzeichnen (und ich weiß nicht, ob das der Fall ist – was machen Browser, die <nav> unterstützen, lesen die dann zwei mal „Navigation“ vor?), dann sollte man sich nicht aufhalten lassen. Regeln sind da, um (nach Kenntnisnahme und gründlichem Nachdenken) gebrochen zu werden.

Selektive Anwendung von CSS-Regeln auf Links

Ich verwende Attributselektoren, um externe Links zu markieren. Hierfür suche ich jetzt eine Erweiterung: Ich habe einen Share-Button von Add this integriert und in der Javascript-Box stören diese Markierungen. Wie kann der Code a[target=_blank]{} erweitert werden, so dass die Regel nicht für eine bestimmte Ziel-URL gilt?

Hier gibt es zwei mögliche Lösungen und jeweils helfen die Attributselektoren für Substrings, die in CSS3 frisch eingeführt wurden. Zum einen kann man eine bestehende Markierung für alle Links, deren href-Attribut mit einer bestimmten URL beginnt, einfach zurücksetzen …

/* Externe Links markieren... */
a[target="_blank"]{
    background: yellow;
}

/* ... und die Markierung wieder zurücksetzen */
a[href^="http://www.facebook.com"]{
    background: none;
}

… oder man greift zur Negations-Pseudoklasse (:not()) und wendet die Markierung gar nicht erst auf Links mit der betreffenden URL an:

/* All-in-one-Lösung */
a[target="_blank"]:not([href^="http://twitter.com"]){
    background: yellow;
}

Beide Lösungen führen zum gleichen Ergebnis, allerdings funktioniert die :not()-Variante im Internet Explorer erst ab Version 9.

Weitere Fragen?

Eure Fragen zu HTML5, JavaScript und anderen Webtechnologien beantworte ich gerne! Einfach eine E-Mail schreiben oder Formspring bemühen und ein bisschen Geduld haben – falls ich gerade unterwegs bin, kann es mit Antwort manchmal etwas dauern, doch früher oder später schreibe ich garantiert zurück.