HTML5 Grundkurs

Überblick über semantische Elemente

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Semantische Elemente verraten welche Funktion bestimmte Blöcke einer Website haben. So stellt etwa <section> einen Abschnitt dar und <article> einen Artikel, während <header> und <footer> für Kopf- und Fußbereiche zuständig sind.
10:44

Transkript

Es gibt eine Reihe von semantischen Elementen, die neu sind in HTML5 und wir wollen die wichtigsten davon einmal uns ansehen und die Funktionsweise uns angucken. Ich erstelle eine neue HTML Datei, nenne es mal "semantik.html", und passe hier auch den 'meta'-Tag an. Nicht nötig, aber das ist ein bisschen so eine Geschmackssache. Und das erste Element, das ich mir anschauen möchte, das heißt 'section'. Und Sie sehen hier, bei der Verwendung von Webmatrix auch von anderen Editoren, dass wir tatsächlich so eine Art Vervollständigung bekommen, mit eben allen in Frage kommenden Elementen. Und deswegen kann ich jetzt 'section' entsprechend einfügen, mit wenig Tippfehler-Gefahr. Nun bei 'section' gibt der Name schon an, es handelt sich um eine Section, um einen Abschnitt, und zwar man sagt immer ganz gerne, einen Sinnabschnitt. Das heißt, wenn ich also ein Dokument habe und habe in dem mehrere Bestandteile und jeder Bestandteil besteht aus Inhalt, der irgendwie zusammengehört, zusammenpasst, dann ist 'Section' eigentlich ein ganz gutes Mittel zur Unterteilung. Normalerweise hätten wir vielleicht auf div gesetzt, aber eben Dinge die zusammengehören könnten in eine 'Section' gepasst werden. Das heißt, wir könnten eine Überschrift machen, "Mein Abschnitt", und dann vielleicht noch ein Absatz, "Informationen, Teil 1". Soweit also kein Problem und wenn wir das dann tatsächlich mal im Browser anschauen wollen, dann sehen wir auch, Seite wird standardmäßig 'index.html' geladen. Deswegen hängen wir noch "semantik.html" hinten dran. 'Mein Abschnitt', 'Information Teil 1'. Wir sehen also keine besonderen Inhalte, keine besonderen Funktionalitäten, auch keine besonderen Informationen. Das ist eine ganz normale h1-Überschrift, und das ist ganz normaler Text im Standardfont. Insofern also nichts Besonderes, und wie gesagt, nicht mit Funktionalität verknüpft. Alles was wir jetzt machen, könnten wir auch rein mit div-Elementen lösen. Es geht hier also tatsächlich, um die Anreicherung mit semantischen Informationen auf das diese irgendwann mal ausgewertet werden können. Jetzt ist es ja so, dass man in so einem Abschnitt mehrere Unterbereiche haben könnte. Beispielweise ein Überschriftsbereich, oder ein Footer-Bereich, oder ein Inhaltsbereich. Ein Inhaltsbereich, also Content, den gibt es nicht. Die anderen angesprochenen Bereiche allerdings schon. Für den Kopfbereich gibt es 'header'. Nicht zu verwechseln mit 'head'. 'Header' kommt eben im Inhalt eines Dokuments möglicherweise zu tragen. In diesem Header steht dann die Abschnittsüberschrift. Wenn Sie jetzt an eine Analogie denken, wie etwa eine Zeitung oder Zeitschrift, da haben wir häufig auch eine Hauptüberschrift, und dann vielleicht noch so ein Untertitel. Und das kann ich auch innerhalb des Headers angeben, weil es gehört ja quasi zur Headerinformation. Na ja, dann habe ich den Inhalt, und vielleicht habe ich am Ende da noch ein Footer. Eine Fußzeile, in welcher ich beispielsweise Copyright Information angeben könnte, wenn es die komplette Website ist. Und innerhalb einer Seite, wo ich vielleicht mehrere Abschnitte habe, vielleicht Quellen oder Fußnoten. Gebe ich also hier entsprechend an. Auch hier der Blick im Browser lohnt sich, ich lade einfach jedes Dokument neu. Auch hier ohne Stilinformation, ohne geändertes Layout. Reine semantische Information. Das ist also schon mal 'section', als entsprechender Bereich. Man kann sich jetzt auch überlegen, ob man den Footer immer ganz an das Ende stellt. Müßte man nicht, aber ich denke die Aufteilung zuerst, der Header und dann der Inhalt, dann der Footer, ist eigentlich die sinnvollste. Und wie gesagt man braucht auch kein Header, man braucht auch kein Footer. Das sind semantische Informationen. Davon abgesehen gibt es noch weitere Inhalte, die vorkommen können. Weitere Elemente, die auch wieder semantische Informationen enthalten. Zum Beispiel könnte man sich vorstellen, dass es eine Art Hinweiskasten gibt. Kennt man ja auch aus Büchern, und vor allem Zeitschriften, dass es da einen Kasten gibt, z.B. am Rand, der einfach irgendwelche weiterführenden Informationen enthält, aber jetzt nicht direkt in den Textfluß passt. Auch hier hätte man normalerweise mit einem div-Element gearbeitet, zumindest früher, aber in HTML5 gibt es dafür etwas Spezielles. Und zwar heißt das Ganze dann ''aside''. Und "aside" ist eben der Hinweiskasten und in dem stecken beispielweise "Weiterführende Informationen". So weit, auch so gut. Funktioniert also auch. Blick in den Browser. 'Weiterführende Informationen'. Wird also als Block-Element dargestellt. Liegt natürlich auch daran, dass wir hier mit 'p' einen Absatz gewählt haben, also auch ein Block-Element, aber 'aside' per se ist tatsächlich ein Blockelement. Wir brauchen das später nochmal, das heißt, ich entferne auch mal, die entsprechenden 'p'-Elemente, temporär. Denn das hat möglicherweise nachher noch Konsequenzen. Ich speichere, schalte wieder um zum Browser, und Sie sehen, das steht jetzt zwar ein bisschen näher beieinander, aber Umbruch, das heißt Blockelement. Von den weiteren Elementen ist meiner Meinung nach noch besonders interessant ein Bereich, der sich mit der Navigation beschäftigt. Stellen uns mal vor, dieser Abschnitt hier würde mehrere Informationen enthalten, und vor allem auch noch eine Navigation, hin zu anderen Seiten. Das ist ja auch ein klassisches Aufgabengebiet für so ein Header. Also wenn ich jetzt innerhalb eines Abschnitts navigieren möchte, also Sprungmarken, würde ich im Header-Bereich vielleicht erwarten, dass diese Sprungmarken hier als Navigationsblock erscheinen. Auf ein ganzes Dokument bezogen kann natürlich auch das komplette Dokument ein Header haben und dieser Header enthält dann beispielweise Navigationsinformationen. Das ist also beides möglich. Ich würde sagen, ich mache das einfach mal seitenweit. Also Header-Abschnit und im Header-Abschnitt habe ich dann meine Navigation. Die sieht ja meistens so aus, meistens eine Liste, die dann per CSS so hingestylt wird. dass sie nach allem aussieht, nur nicht nach einer Liste. Und dann habe ich irgendwelche Links. Ich habe jetzt natürlich nicht so viele Dateien. Das heißt, ich verlinke auf die eine, die ich habe und dann auf eine, die es vielleicht noch nicht gibt. Zum Beispiel eine Impressumsseite. So, ist also hier entsprechend hinterlegt, und auch hierfür gibt es jetzt ein neues HTML-Element, das eben darlegt: Das ist eine Navigation. Ist beispielsweise im Bereich Barrierefreiheit ganz interessant. Wenn möglicherweise ein Browser direkt diese Navigationsinformation extrahieren kann und dann den Bediener, der vielleicht Einschränkungen beim Sehen hat, eine direkte Sprungmöglichkeit zur Navigation liefert, oder die Navigation direkt überspringt und gleich zum Inhalt übergeht. Der Bereich heißt hier 'nav' von Navigation. Das heißt, den füge ich hier noch ein. Vorgesehen hatte ich ihn ja schon, durch die Leerzeilen. Und jetzt habe ich hier auch mein Navigationsbereich. Schauen wir es uns an im Browser, jetzt habe ich hier meine Auflistung. Die ist ja komplett umgestylt, aber von der Struktur her entsprechend so vorgesehen, wie es sich gehört. Schauen wir uns es nochmal an: also HTML-Dokument, mit dem entsprechenden HTML5 DOCTYPE, ich habe ein Header und in dem Header habe ich das nav-Element, also für die Navigation mit ein paar Links, ich habe einen Abschnitt. Kann auch mehrere Abschnitte haben. Auch dieser Abschnitt hat einen eigenen Header-Bereich mit Überschrift, Untertitel, et cetera. Dann, den eigentlichen Text. Ich habe mit 'aside' ein Hinweiskasten. Und ich habe mit Footer einen Bereich, in dem ich alle meine Informationen, möglicherweise auch einen Impressungs-Link, et cetera, hinterlegen kann. Von der Darstellung im Browser her, nichts Besonderes. Ginge alles auch mit div's. Aber jetzt hat ein wie auch immer gearteter Browser, eine wie auch immer geartete Suchmaschine, zumindest in der Theorie und mittelfristig garantiert, die Option diese semantische Information auszulesen, und dann den Benutzern möglicherweise eine besondere Bedienung anzubieten oder beim Ermitteln des Suchmaschinenrankings, diese semantische Informationen mit in die Berechnung der Position im Suchergebnis einbeziehen zu können. Wir hatten ja bereits das HTML5-Element 'Section' gesehen. Jetzt gibt es noch ein verwandtes Element und zwar dieses verwandte Element bezeichnet auch, ja eine Art von in sich abgeschloßenen Inhalt. Und zwar heißt dieses Element 'article', also die Artikel. Der Unterschied zwischen 'section' und 'article' ergibt sich jetzt nicht immer komplett. Ich denke, die Bezeichnung dieses Tags, gibt schon einen gewissen Hinweis darauf, wo man das verwenden könnte. Wenn man also bspw. eine Zeitschrift hat und auf einer Seite sind jetzt drei einzelne Artikel angezeigt, dann könnte jeder davon in so einem Artikelelement verwendet werden. Kann beispielweise auch Veröffentlichungsdatum angeben, wo das durchaus sinnvoll ist, bei einem normalen Abschnitt, bei einer Section wäre das nicht das erste, was einem in den Sinn käme. Auch eben bei Firmen-, Blocks-, Pressenachrichten, et cetera, ist 'article' möglicherweise ein guter Punkt um jetzt so einen in sich abgeschloßenen Inhalt darzustellen. Und eben durch einen Tag zu umschließen. Das wichtige ist, das der Inhalt von so einem Artikelelement, wenn man sich an diese semantische Philosophie hält, die eben vorgegeben wird, durch die HTML5 Spezifikation. Wenn man also so einen Artikel verwendet, dann muss der Inhalt für sich alleine stehen. Bei so einer Section ist es so, dass die Sachen, die dazugehören sinnlich zusammenpassen. aber kann natürlich gut sein, dass ein längerer Artikel in mehrere einzelne Abschnitte unterteilt ist. Diese Abschnitte haben vielleicht alle ein gemeinsames Thema, aber für sich alleine sind sie vielleicht nicht komplett abgeschloßen. Das heißt, haben vielleicht Abhängigkeiten zu vorherigen Absätzen, zu nachfolgenden Absätzen, et cetera. So ein Artikel, der soll in sich abgeschloßen sein und das ist so ein bisschen die Unterscheidung zwischen eben einer Section und einem Artikel. In der Praxis ist es so, dass zumindest nach meiner Erfahrung und auch nach der Praxis, die wir einsetzen, 'article' vergleichsweise selten vorkommt. Gerade weil man eher häufig nicht mehrere Artikel auf einer Seite hat. Außer eben diesen speziellen angesprochenen Bereichen, Section dagegen relativ häufig, weil sie ihnen vieles sinnhaft zusammenfassen lässt. Deswegen also, ist 'article' tatsächlich im Einsatz aber interessant ist freilich mehr 'section', eben weil wir die Abschnitte haben, die auch jeweils eigene Kopf- und Fußbereiche haben können, und dadurch sehr sehr universell einsetzbar sind.

HTML5 Grundkurs

Machen Sie sich mit HTML5 fit für das Webdesign von morgen, angefangen vom Erstellen einfacher HTML-Dokumente bis hin zur Gestaltung anspruchsvoller Layouts.

3 Std. 11 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!