Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML-Tipps für Webentwickler: Jede Woche neu

Links, die mehrere Elemente, wie Überschriften und Absätze umfassen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
05:26
  Lesezeichen setzen

Transkript

Sie wollen einen Link, der mehr umfasst als ein Text nämlich beispielsweise eine Überschrift und einen Absatz? In HTML4 wäre das nicht ohne JavaScript zu bewerkstelligen. In HTML5 geht es einfach. Eine sehr praktische Neuerung in HTML5 ist, dass es erlaubt ist, ein Linkelement um Blockelemente oder Überschriften und Absätze zu machen. Wenn wir das überprüfen, dann erhalten wir keine Fehlermeldung, also keinen Fehler gefunden. In HTML4.01 war das hingegen nicht möglich. Ich verwende den DOCTYPE von HTML4.01. Ich erhalte an dieser Stelle Fehlermeldungen. Dass das so ist, liegt daran, dass in HTML4 streng definiert wurde, dass es zwei Typen von Elementen gibt, nämlich die Block-level-Elemente und die Inline-Elemente. Und die Block-level-Elemente dürfen Inline-Elemente und andere Block-level-Elemente enthalten. Hingegen dürfen Inline-Elemente nur Daten und andere Inline-Elemente enthalten, aber beispielsweise keine Block-Elemente. Diesem klaren System mit Inline- und Block-Elementen steht in HTML5.1 ein ganz anderes System entgegen. Das sind die Inhaltstypen, die in HTML5 definiert sind. Und Sie sehen an dieser Grafik auch, dass Elemente in verschiedene Kategorien fallen können. Was gibt es da alles? Es gibt "Heading", das ist ziemlich einfach, das sind die Überschriften. Dann gibt es die sogenannten "Sectioning"-Elemente, die ein Dokument gliedern. Dazu gehören "article", "aside", "nav" und "section". Dann gibt es die "Phrasing". Das ist das, was man wahrscheinlich sonst klassischerweise auch als Inline-Element bezeichnet hätte. "Embedded" dazu gehört beispielweise das "img"-Element. Es gibt "Metadaten" und es gibt die interaktiven Elemente. Dazu gehört dann auch das "a"-Element für Links, aber auch Formular-Elemente, wie zum Beispiel "select", "textarea" et cetera. Und das Umfassende ist der "Flow content". Das ist eigentlich alles, was innerhalb von Body stehen kann. Dazu gehören nur bestimmte Metadata-Elemente nicht. Wenn Sie bei einem Element nachsehen, dann finden Sie immer die Information, was für ein Inhaltstyp erwartet ist. Bei "a"-Element beispielsweise, also bei dem Link, sehen Sie zuerst einmal, in welche Kategorien das "a"-Element selber fällt. Das ist "Flow content", "Phrasing content", das ist hier dieses Inline-Element, was man früher so genannt hätte, und "Interactive content". Interessant ist dann das "Content model", und da erfahren Sie, was für einen Inhalt darf da stehen, und bei dem "a"-Element steht da "Transparent". Das erkläre ich gleich. Aber auch der wichtige Hinweis, dass das "a"-Element selbst nicht wieder interaktiven Content oder andere "a"-Elemente enthalten darf. Was bedeutet denn dieses "Transparent". "Transparent" bedeutet, dass der Inhalt, der an der entsprechenden Stelle erwartet wird, nicht nur von dem Element selber abhängt, sondern davon, wo dieses Element steht. Also wenn ich dieses Beispiel anschaue und ich möchte wissen, ob der Text korrekt ist, dann genügt es nicht, dass ich das "a"-Element alleine anschaue, sondern ich muss schauen, wo drinnen steht es überhaupt. Ein anderes Element mit ebenfalls diesem Contenttype "Transparent" ist das "del"-Element, und das heißt, Sie können das "del"-Element, um Entfernungen zu kennzeichnen, um eine Überschrift und einen Absatz drumrum schreiben oder auch innerhalb der Überschrift und innerhalb des Absatzes, aber man darf diese beiden Varianten natürlich nicht vermischen. Dieses Verhalten gilt für "a" und "del", aber natürlich nicht für alle Elemente, die man früher Inline-Elemente genannt hätte. Das "strong"-Element beispielsweise können Sie nicht um eine Überschrift drumrum machen, denn als "Content model" ist nur "Phrasing content" erlaubt. Die gute Nachricht, also es ist ganz einfach, ein "a"-Element um eine Überschrift und einen Absatz drumrum zu machen mit HTML5. Wann das genau erlaubt ist, solche Konstruktionen finden Sie immer beim Inhaltstyp angegeben. Und um diese Inhaltstypen zu verstehen, gibt es diese nützliche interaktive Grafik beim W3C, woran man auch deutlich sieht, dass ein Element natürlich zu mehreren Inhaltstypen gehören kann.