Anzeige
Anzeige
UX & Design
Artikel merken

Semantisches HTML5: 10 Elemente, die du wahrscheinlich falsch nutzt

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.

Von Mario Janschitz
7 Min. Lesezeit
Anzeige
Anzeige

(Foto: © athomass – Fotolia.com)

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.

Anzeige
Anzeige

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

Anzeige
Anzeige

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:

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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>

Anzeige
Anzeige

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.

Anzeige
Anzeige

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?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
18 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

R. Steinmann

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

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

Antworten
E.

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

Antworten
non breaking space

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

Antworten
E.

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

Antworten
E.

& n b s p ;

E.

…wird nicht angezeigt :(

Antworten
kurni

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

Antworten
Mark Erhard

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

Antworten
Ben

Semantik. Reicht das nicht?

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

Antworten
Mario Janschitz

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

Antworten
ROP

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

Antworten
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. :-/

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

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

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

Marco Willi

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

Antworten
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 ;)

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige