Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Semantisches HTML5: 10 Elemente, die du wahrscheinlich falsch nutzt

(Foto: © athomass – Fotolia.com)

Eines der wichtigsten Features von HTML5 ist die Möglichkeit, Inhalte in einen semantischen Kontext zu setzen. Gerade Googles Hummingbird zeigt uns, wohin die Reise gehen wird. In diesem Artikel zeigen wir euch, wie semantisches HTML5 zu schreiben ist. Mit dabei: Die Unterschiede zwischen em, i, strong und b.

Was bedeutet „Semantik“ in HTML5?

Web 3.0 oder das „Semantic Web“ – heutzutage dreht sich fast alles um Semantik und so natürlich auch in HTML5. Nicht umsonst. Das Semantische Web ist im Rahmen des „Internet der Dinge“ eine Notwendigkeit, um der schieren Datenflut durch die Zuordnung von bloßen Daten zu einem Kontext Herr zu werden und auch Suchmaschinen wie Google bevorzugen semantische Websites. Stichwort: Googles Such-Alogrithmus Hummingbird. Schon Ende 2013 beeinflusste der neue Algorithmus schon 90 Prozent aller Google-Suchanfragen und leitete damit einen wichtigen Schritt zu Tim Burners-Lees semantischem Web ein.

In einem Satz: Ihr setzt euren Inhalt durch Code in einen Kontext. Anders gesagt: Eure Inhalte brauchen Metainformationen, damit sie interpretiert und automatisiert weiterverarbeitet werden können.

sprache
Ein Crawler durchsucht deine HTML5- Website nach semantischen Inhalten. (Foto: © athomass - Fotolia.com)

Ein Beispiel: „String“ ist für Entwickler ganz klar eine Zeichenkette, für Physiker eine Theorie und für andere Unterwäsche. Ein Wort, drei unterschiedliche Bedeutungen. Das heißt, der abstrakte „String“ wird erst in einem Kontext zur Realität. Und das selbe Problem gibt es auch bei der Datenverarbeitung. Das Semantische Web – oder Web3.0 – soll durch HTML5 Abhilfe schaffen. Und so vermeidet ihr die häufigsten Fehler im Umgang mit HTML5:

Anzeige

1. Aufmerksamkeit erzeugen: Das i-Element ist nicht einfach nur „italic“

„Das gibt es doch gar nicht mehr, das wurde ja durch em ersetzt!“ Diesen Satz hört man inzwischen ziemlich oft, aber: Er ist falsch.

Das i-Element wurde nicht gestrichen, sondern es kennzeichnet Wörter, die anders betont, beziehungsweise ausgesprochen werden. Gründe dafür sind: Fremdsprachen, Transkription, Eigennamen oder um Fachbegriffe zu kennzeichnen. Wenn ihr das i-Element aufgrund einer Fremdsprache verwendet, vergesst nicht, die Sprache über das lang-Attribut anzugeben.

2. HTML5 und das em-Element

Dieses Element wird genutzt, um einzelner Wörter, oder ganzer Sätze herauszuheben beziehungsweise anders zu gewichten. Mit diesem Element könnt ihr die Bedeutung eines Satzes ändern, nur indem ihr einzelne Abschnitte betont:

<em>Bier</em> ist ein gutes Getränk
Bier <em>ist</em> ein gutes Getränk
Bier ist ein <em>gutes</em> Getränk

Jeder dieser Sätze ist für einen Computer identisch, durch die Betonung, die uns die Sprache ermöglicht, entsteht erst ein Unterschied. Dieses Element sorgt also dafür, dass diese drei Sätze unterschiedlich erfasst werden können, denn die Gewichtung ist bei jedem Satz eine andere.

Das em-Element ist also nicht ein allgemeines Element um „italic“ darzustellen. Genauso wenig wie es dazu da ist, um „Wichtigkeit“ zu vermitteln.

3. Das strong-Element

Wichtigkeit oder Dringlichkeit wird mit dem strong-Element gekennzeichnet. Dabei können Sätze mit strong gekennzeichnet werden, um wirklich Wichtiges von Unwichtigem trennen zu können. Das gleiche gilt, wenn eure Benutzer etwas zuerst lesen müssen, noch vor allem anderen.

Wichtig ist, dass die relative Wichtigkeit der einzelnen strong-Elemente, abhängig zu der Anzahl vorheriger strong-Elemente ist. Jedes strong-Element erhöht die Wichtigkeit seines Inhalts. Was meine ich damit? Im Gegensatz zu em oder i wird der Satz also in keinster Weise verändert.

Somit ist das folgende Beispiel durchaus sinnig, wenn „Kapitel 1:“ nur eine Formalität und der eigentliche und wichtige Inhalt „Die Praxis“ ist.

<h1>Chapter 1: <strong>The Praxis</strong></h1>

4. HTML5 und das mark-Element

Dieses Element wird benutzt, wenn etwas markiert werden muss, dass weder wichtig noch besonders zu lesen ist. Das mark-Element stellt den Text in einen anderen Kontext, als vom ursprünglichen Autor beabsichtigt. Wenn ihr also das Augenmerk auf eine besondere Texstelle legen wollt, die vom Autor nicht als besonders erachtet worden oder nur in einem bestimmten Kontext wichtig ist, dann muss die Wahl auf das mark-Element fallen.

Ein Beispiel: Es wird ein Text nach dem Wort „Bier“ durchsucht, das auch gefunden wird. Dieses Wort muss jetzt gekennzeichnet werden, um die Aufmerksamkeit des Lesers auf dieses Wort zu lenken. Dabei bleiben natürlich Inhalt und Sinn unverändert. Hier ist das mark-Element richtig eingesetzt. Oder: Eine Zahlenangabe in einem Textblock bezieht sich auf eine Zahl in einem Bild. Das Element zeigt also Relevanz an – nicht Wichtigkeit.

5. b-Element in HTML5

Das letzte Mittel, um Aufmerksamkeit zu steuern, ist das b-Element. Dabei werden Textstellen gekennzeichnet, die weder die Aussprache verändern, noch Wichtigkeit oder Relevanz kennzeichnen. Somit ist der Einsatz des b-Elements richtig, wenn die Aufmerksamkeit des Lesers gelenkt werden soll, semantisch aber keine Wichtigkeit vorliegt. Das liegt zum Beispiel vor, wenn ihr die erste Zeile eures Absatzes hervorheben wollt (zum Beispiel mit einer Fettung).

6. Der Zeilenumbruch mit br

Gerade von WYSIWYG-Editoren wird und wurde das br-Element regelmäßig falsch eingesetzt. Dabei handelt es sich um einen Zeilenumbruch, um Inhalte wie zum Beispiel Gedichte strukturieren zu können. Um Abstände zu generieren, sollte CSS verwendet werden, das heißt: Wenn ihr br-Elemente nur benutzt, um den Abstand zwischen zwei DOM-Objekten zu vergrößern, dann nutzt ihr das Element nicht der Dokumentation entsprechend.

Bonus: &nbsp;

Zugegeben, bei &nbsp; handelt es sich nicht um ein Element, sondern um eine „Character Entity“. Trotzdem wird sie häufig – ähnlich wie das br-Element – als Zeilenumbruch eingesetzt, was falsch ist.

Dabei handelt es sich eigentlich um ein geschütztes Leerzeichen. Wenn ihr also zwei Informationen durch eine Leertaste trennen wollt, da das eine ohne das andere keinen Sinn ergibt, dann solltet ihr diese Entity einsetzen. Beispiele für die Nutzung dieses Leerzeichen sind Werte und dazugehörige Maßeinheiten wie zum Beispiel 12&nbsp;m oder 200&nbsp;US-Dollar. Übrigens: Eine ausführliche Liste der Entitäten findet ihr hier.

7. Das Kleingedruckte: small-Element

Dieses Element ist ausschließlich dazu da, um rechtliche Hinweise oder kurze Disclaimer zu kennzeichnen. Ein praktisches Beispiel ist, unter welcher Lizenz ein Stockfoto steht oder die Kennzeichnung von Preisen, die keine Umsatzsteuer enthalten. Dabei wäre der Hinweis so zu schreiben: EUR 20<small>exkl. USt.</small>

Das Impressum oder die AGB sollten nicht mit dem small-Element gekennzeichnet werden, denn in diesem Fall sind die AGB der eigentliche Hauptinhalt der Seite.

8. Das hr-Element

Semantisch gesehen respresentiert das hr-Element einen thematischen Bruch auf Absatz-Ebene. Bei einem Szenenwechsel innerhalb eines Theaterstücks kann dieses Element eingesetzt werden, um diesen thematischen Bruch semantisch darzustellen.

Der Grund warum bei so einem Wechsel nicht das section-Element benutzt wird ist, dass aus der Perspektive der Semantik der Inhaltsabschnitt unverändert bleibt. Das Theaterstück ist immer noch das selbe Theaterstück – der Wechsel erfolgte „nur“ auf thematischer Ebene, was im Sinne der Semantik zu vernachlässigen ist.

Wichtig zu wissen ist, dass das hr-Element sich nicht auf den Outline-Algorithmus auswirkt.

9. Adressen mit dem address-Element?

Dieses Element wird häufig dazu benutzt, um die postalische Anschrift auf der Kontakt-Seite zu kennzeichnen. Das kann richtig sein, muss es aber nicht, denn in der Regel ist das p-Element ausreichend für postalische Anschriften.

Das address-Element bedeutet mehr – nämlich die semantische Darstellung einer Kontaktmöglichkeit des im DOM naheliegendsten article- oder body-Eltern-Elements. Ist also das address-Element im body-Element, gelten die Kontaktinformationen für dieses eine body-Element beziehungsweise diese Seite – sie könnten sich aber auch auf ein article-Element beziehen. Üblicherweise befindet sich das address-Element in einem footer-Element.

Wichtig dabei ist, dass dieses Element nicht nur postalische Informationen beinhalten kann, sondern auch Links. Es ist also nicht definiert, welche Art von Kontaktinformation angegeben werden kann, sondern nur DASS welche, in Relation zu anderen DOM-Objekten, angegeben werden können.

10. Zitate mit blockquote, cite und q

Beim Zitieren merkt man, dass das Web der akademischen Welt entsprungen ist. Das cite-Element wird benutzt, um eine Referenz auf ein kreatives Werk setzen zu können. Es kann den Titel des Werks, den Namen des Autors oder eine URI beinhalten. Dabei gilt als Werk:

Creative works include a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, a web site, a web page, a blog post or comment, a forum post or comment, a tweet, a written or oral statement, etc.W3.org

Das heißt, das cite-Element bildet die Herkunft beziehungsweise eine Referenz ab, und dient somit nicht zur Darstellung des eigentlichen Zitats. Folglich ist dieses Codefragment falsch:

<p><cite>This is wrong!, said Hillary.</cite> is a quote from the 
   popular daytime TV drama When Ian became Hillary.</p>

Für Zitate ist das q-Element zu verwenden. Das obige Beispiel in der semantisch richtigen Form sieht so aus:

<p><q>This is correct, said Hillary.</q> is a quote from the 
   popular daytime TV drama <cite>When Ian became Hillary</cite>.</p>

Somit wird die eigentliche Phrase des Zitats mit dem q-Element umschlossen, wobei der Herkunft durch das cite-Element beschrieben wird. Allerdings muss nicht immer ein cite-Element angegeben werden, und q-Elemente sind auch ineinander verschachtelbar.

Das blockquote-Element ist semantisch nicht auf dem Text-Level, sondern gruppiert Inhalte. Da es keine einheitliche Regelung gibt, wie Zitate auf Code-Ebene mit blockquote dargestellt werden sollen, wird zur Referenzangabe aber die Verwendung des footer- oder cite-Elements vorgeschlagen.

<blockquote>
 <p>I contend that we are both atheists. I just believe in one fewer
 god than you do. When you understand why you dismiss all the other
 possible gods, you will understand why I dismiss yours.</p>
 <footer>— <cite>Stephen Roberts</cite></footer>
 </blockquote>
<p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p>
<blockquote cite="http://quotes.example.org/s/sonnet130.html">
  <p>My mistress' eyes are nothing like the sun,<br>
  Coral is far more red, than her lips red,<br>
  ...
<p>He began his list of "lessons" with the following:</p>
<blockquote>One should never assume that his side of 
the issue will be recognized, let alone that it will 
be conceded to have merits.</blockquote>
<p>He continued with a number of similar points, ending with:</p>
<blockquote>Finally, one should be prepared for the threat 
of breakdown in negotiations at any given moment and not 
be cowed by the possibility.</blockquote>
<p>We shall now discuss these points...

Alle drei oben genannten Varianten sind richtig und möglich. Das blockquote-Element kann aber auch Überschriften, Listen und sogar Bilder enthalten und ist somit für umfangreichere Zitate konzipiert, kann aber das q-Element auch ersetzen.

Wenn ihr mehr über article-, section-, aside-, nav- und header-Elemente lesen wollt, dann werdet ihr im Artikel „Semantik im Web 3.0: Wir zeigen euch, wie HTML5 dem Web mehr Bedeutung verleiht“ fündig. Oder ihr kämpft euch durch die HTML5-Dokumentation.

Was ist eure Meinung zum Semantischen Web?

Finde einen Job, den du liebst

18 Reaktionen
Sahagin
Sahagin

Sehr sehr schöner Artikel, ich glaub´ jetzt traue ich mich wieder mit b- und i-Tags zu arbeiten :D
Übrigens der Link bei &nbsp funktioniert nicht, würde mir gerne mal die Liste ansehen ;)

Marco Willi
Marco Willi

Danke für den kleinen Wiederauffrischungskurs!
Und das "String"-Beispiel find ich ziemlich gelungen :D

irgendeinem Spinner
irgendeinem Spinner

Auf Entitäten wie das angesprochene nbsp kann man gut und gerne Verzichten und stattdessen die richtigen Zeichen nutzen. Dank Unicode/UTF-8 ist das zum Glück schon lange kein Problem mehr.

Mario Janschitz
Mario Janschitz

Hallo! Wie nutzt du das Zeichen in deinem Workflow? Ich finde es ist einfacher nbsp zu schreiben als das Zeichen via UFT-8 zu setzen.

irgendeinem Spinner
irgendeinem Spinner

Einfacher als AltGr+Leertaste zu drücken? Das erschließt sich mir jetzt nicht. Über AltGr oder AltGr+Umschalt lassen sich eigentlich alle gebräuchlichen Sonderzeichen leicht erreichen und schnell einfügen, so auch typografisch korrekte Anführungszeichen.

Das gilt zumindest für Gnome und OSX, wie das bei Windows ist, da bin ich nicht auf dem laufenden.

dazzle
dazzle

Sorry, nichts gegen den Inhalt des Artikels, aber Korrekturleser habt ihr nicht wirklich, oder?

"Eure Inhalte brauchen Metainformationen, damit sie interpretiert und automatisiert weiterverarbeitet können."

Ich vermute, dass dort ein "werden" fehlt. :-/

ROP
ROP

Übrigens: Unter „Bonus (…)“ ist die „Liste der Entitäten“ nur farblich hervorgehoben, aber leider nicht verlinkt. ;)

Mario Janschitz
Mario Janschitz

Danke für eure Gedanken!
Finde auch, dass Semantik mehr Potential hat, als derzeit ausgeschöpft.

Umsatz-Einbußen
Umsatz-Einbußen

Das Problem mit Semantik-Auszeichnungen (und auch bei SVG) ist, das die Großen Anbieter kein automatisches Auslesen ohne Bezahlung wollen.

Für die vielen kleinen Anbieter wäre allerdings sehr nett wenn man im Browser eine Adresse markiert und vollautomatisch der Drucker ein Adresslabel drucken oder Word einen Brief mit der Adresse an der richtigen Stelle erzeugen würde.
Viel überzeugender wäre wenn das Smartphone oder Desktop-PC beim klicken auf die Telefon-Nummer wählen würde.
Oder das man dem Taxifahrer die GPS-Adresse nennt wo man zum Vorstellungs-Gespräch erscheinen oder das Ersatzteil kaufen kann. Dann würden die guten Shops ihre GPS-Position ihres Lieferanten-Einganges und Kunden-Einganges oder aller Briefkästen und Leerungszeiten Semantisch im Web aufführen. Ähnliches für EAN-Nummern und natürlich den Preisen für z.b. Toner-Patronen welche kleine Kunden meist erst bei Bedarf ordern.

Gleiches für Termine auf Webseiten die man bisher immer noch mühselig per Ical mühselig importieren muss. Immer mehr Leute nutzen Web am SmarTV, FireTV usw. Interoperabilität mit dem Equipment im Büro oder Zuhause oder am Körper (Termine aufs Smartphone schicken um früh genug geweckt bzw. erinnert zu werden) wäre nett und trivial. Leider machts kaum jemand um fassend. Die Browser-Hersteller wären gefragt um das Web nutzbarer zu machen.

Semantic-Web hat bisher nicht mal angefangen. Bisher gibts eher nur Krücken. Schade um die (bei guten Browsern) vermeidbare Mühe welche Rentner und Leute ohne viel Frust-Potential viele Transaktionen (Geschäfte,...) vermeiden lässt weil es zu Aufwendig ist :-( Für lokale Shops sind das Umsatz-Einbußen.

mebulon
mebulon

Für mich wäre jetzt mal ein Artikel interessant, der mir zeigt, was der Autor einer Seite davon hat die alle zu nutzen. Ein paar simple Gründe fallen mir auch ein aber die sind Nicht immer so motivierend um es dann tatsächlich so umzusetzen. Vielleicht schafft ihr da mehr Motivation, wenn ihr ein paar mehr Vorteile für mich aufzählt :)

Ben
Ben

Semantik. Reicht das nicht?

kurni
kurni

Ich find's ja geil, dass das das beispielhaft angeführte Zitat mit und nicht wie gleich darunter erklärt mit ausgezeichnet wird :)

E.
E.

...wird nicht angezeigt :(

non breaking space
non breaking space

Wie man mit nem   nen Zeilenumbruch hin bekommt würde mich echt interessieren. ;-)

E.
E.

Stimmt :DD
vermutlich so :D
& n b s p ;

E.
E.

& n b s p ;

R. Steinmann

Danke, der Artikel hat auch bei mir ein wenig Unwissen beseitigen können!

Rechtschreiber: Punkt 4, 3. Satz "Texstelle" => "Textstelle"

E.
E.

Wow! Das habe ich sogar mit Hinweis übersehen. Dein Name merke ich mir falls ich mal jemanden brauch, zum lektorieren! Supi! :))

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot