Das i-Element in HTML5

Kursiv, „italic“ oder „schräg gestellt“ – es wurde nicht durch das Element „em“ ersetzt und ist auch nicht entfallen. Es kennzeichnet nun vielmehr Wörter, die anders betont bzw. ausgesprochen werden sollen. Gründe für den Einsatz wären: Fremdsprachen, Transkription, Eigennamen oder einfach nur Fachbegriffe. Aufgehorcht! Wer mit Fremdsprachen operiert, vergisst bitte das Attribut „lang“ nicht!

Das em-Element in HTML5

Mit diesem Element kann man Wörter und auch ganze Sätze herausheben bzw. gewichten. Mit diesem Element lässt sich die Bedeutung eines Satzes ändern, indem man nur Abschnitte betont:

Kaffee ist ein gutes Getränk.
Kaffee ist ein gutes Getränk.
Kaffee ist ein gutes Getränk.

Für die Suchmaschine ist jeder Satz identisch. Für uns Humanoide entsteht durch unterschiedliche Betonung in unserer Sprache erst ein Unterschied. Nutzt also das „em“-Element nicht für „italic“ oder zu vermittelnde Wichtigkeit.

Das strong-Element in HTML5

Da haben wir es dann auch schon: Wichtigkeit und Dringlichkeit wird mit „strong“ markiert. Dabei kann ein einzelnes Wort oder auch ein ganzer Satz mit „strong“ gekennzeichnet sein – um wirklich Wichtiges von Unwichtigem zu trennen. Zu beachten ist, dass die relative Wichtigkeit der einzelnen „strong“-Elemente abhängig der Anzahl vorheriger „strong“-Elemente ist. Übersetzt: Jedes „strong“-Element erhöht die Wichtigkeit seines Inhalts, verändert aber den Satz nicht wie die Elemente „em“ oder „i“.

Das mark-Element in HTML5

Verwende „mark“, wenn etwas markiert werden muss – es sollte weder wichtig, noch besonders zu lesen sein. Das „mark“-Element stellt Text in einen anderen Kontext, als ursprünglich angedacht. Wenn man sein Augenmerk auf eine besondere Textstelle legen soll, welche vom Autor nicht als besonders erachtet worden oder nur in einem bestimmten Kontext wichtig ist, dann ist das „mark“-Element die richtige Wahl.

Ein Beispiel hierzu: Ein beliebiger Text soll nach dem leckeren Getränk „Kaffee“ durchsucht werden. Jetzt muss dieses Wort gekennzeichnet werden, um die Aufmerksamkeit des Lesers auf die Treffer zu lenken. Inhalt und Sinn des Textes bleiben natürlich erhalten – aber hier wäre das „mark“-Element korrekt eingesetzt.

Das b-Element in HTML5

Das „b“-Element ist das letzte Mittel, um Aufmerksamkeit zu erzeugen bzw. zu steuern. Hierüber werden Texte oder Wörter gekennzeichnet, die weder die Aussprache verändern, noch Wichtigkeit oder Relevanz kennzeichnen. Beachtet, dass mit dem „b“-Element die Aufmerksamkeit gelenkt werden soll – semantisch aber keine Wichtigkeit vorliegt. Diese Technik findet man häufig bei „Teasern“ (dt.: Aufmachern) einschlägig bekannter Nachrichtenportale.

Das br-Element in HTML5

Puh, auch auf die Gefahr hin, dass ich mich lächerlich mache: Der gescheiterte Siegeszug von WYSIWYG-Editoren sorgte dafür, dass das „br“-Element durchweg falsch zum Einsatz kam. Das „br“-Element ist aber ein reiner Zeilenumbruch – wenn ich bspw. Gedichte strukturieren würde. Es gilt (und das schon immer): Abstände sollen mit CSS generiert werden! Wen ich dabei erwische, dass er/sie das „br“-Element als Abstandhalter zwischen DOM-Objekten nutzt, schuldet mir einen großen Becher Kaffee!

Das   in HTML5

Und da haben wir auch schon den nächsten Patienten: Dies ist ein „Character Entity“ und wird – wie das „br“-Element – genauso falsch eingesetzt.   ist ein geschütztes Leerzeichen. Bei meinem eigens betriebenen Fußballmanager fussball:xxl habe ich häufiger das Problem, dass ein Wert und seine Maßeinheit nicht getrennt werden sollen. Als Beispiel: 1.000 EUR. Würde das Feld zu klein werden, um den Betrag mit seiner Maßeinheit zu zeigen, würde der Browser zwischen dem Betrag und EUR trennen – und das will man nicht (das gilt für Prozent, Meter, Zentimeter u. v. m.).   sorgt nun dafür, dass Wert und Maßeinheit nicht getrennt werden. Auch hier gilt: Wen ich erwische, der zahlt hier dann schon Kaffee & Käsebrötchen in meine Richtung!

Das small-Element in HTML5

Dieses Element soll ausschließlich dazu da sein, um kurze Bestimmungen oder rechtliche Hinweise anzuzeigen. Das wohl typischste Beispiel wäre, unter welcher Lizenz ein vorliegendes Bild liegt. Auch der Hinweis auf bspw. „exkl. Umsatzsteuer“ unter einem Einkaufswert ist ein gutes Beispiel. Wer jetzt meint, er könne sein Impressum oder die AGB mit dem „small“-Element ausstatten, hat es noch nicht verstanden.

Das hr-Element in HTML5

Aus semantischer Sicht ist das „hr“-Element gleichzusetzen mit einem thematischen Bruch innerhalb der Absatz-Ebene. Hierzu findet man häufig den Vergleich mit einem Theaterstück, in dem ein Szenenwechsel stattfindet: Das Theaterstück ist immer noch das selbe – der Wechsel erfolgte nur auf thematischer Ebene (was im Sinne der Semantik zu vernachlässigen wäre, da es diese nicht stört).

Adressen mit address in HTML5

Dieses Element trifft man häufiger dabei an, wie es postalische Anschriften oder Kontakt-Informationen kennzeichnet. Das kann richtig sein – muss es aber nicht (denn eigentlich ist ein „p“-Element genauso wirkungsvoll für die eigene Anschrift).

Das „address“-Element bedeutet mehr: die semantische Darstellung einer Kontaktmöglichkeit des im DOM naheliegendsten „article“- oder „body“-Eltern-Elements. Steht das „address“-Element im „body“, gilt die Kontaktinformation darin für diese Seite – steht dies aber mit in einem „article“-Element, bezieht es sich auf diesen Teil im DOM.

Semantisch korrekt dargestellt, befindet sich das „address“-Element zu einem „article“-Element im eigenen „footer“-Element.

Zitate in HTML5

Wer Zitieren verwendet, erkennt, dass das Web einer akademischen Welt entsprungen ist.

Das „cite“-Element nutzt man, um eine Referenz auf ein kreatives Werk zu setzen. Es kann den Titel, den Namen des Autors oder eine URL beinhalten. Das bedeutet, dass das „cite“-Element die Herkunft abbildet – es ist nicht korrekt, es für die Darstellung eines Zitats zu verwenden!

Für Zitate ist das „q“-Element zu verwenden.

Ein Beispiel:
<p><q>Kaffee rettet den Tag, sagte Sascha.</q> ist ein typischer Satz aus dem Top-Seller <cite>Gehege-Wahnsinn mit SEOfant</cite></p>

Somit wird die eigentliche Phrase des Zitats mit dem „q“-Element umschlossen, wobei die Herkunft mit dem „cite“-Element ergänzt wird. Das „cite“-Element ist allerdings optional und natürlich lassen sich „q“-Elemente ineinander verschachteln.

Bei dem Element „blockquote“ gruppiert man Inhalte. Eine echte Regelung hierfür liegt nicht vor, allerdings wird zur Referenzangabe die Verwendung eines „footer“-Elements mit „cite“-Element vorgeschlagen.

„blockquote“ kann aber auch Überschriften, Listen oder Bilder enthalten und ist somit für umfangreichere Zitate ausgelegt.