Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

HTML5 für Webdesigner

HTML5-Elemente für Inhalte im Überblick

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieser Film bietet Ihnen einen Überblick über Elemente, die in erster Linie zur Auszeichnung von Inhalten eingesetzt werden.

Transkript

In diesem Film möchte ich Ihnen kurz die neuen HTML5-Elemente für "Inhalt" vorstellen, also nicht für Layout-Bereiche, sondern zum Auszeichnen von Inhalten. Wobei der Übergang natürlich manchmal fließend ist, denn wenn man eine große Gruppe von Inhalten hat, dann kann das optisch gesehen zumindest durchaus schon Ähnlichkeiten mit einem Layout-Bereich haben.  Beginnen möchte ich auf der Startseite vom HTML5-Doktor. Etwas weiter unten auf der Seite gibt es einen hellgrauen Bereich, der einen HTML5-Element-Index hat. Einige aus diesem Element-Index qualifizieren als Layout-Bereich. Wir haben also gesehen hier HTML Head, Title, Link, Meta, alle, die im Kopfbereich sitzen. In der Gruppe "Sections" hier, da gibt es den Body natürlich, als oberste Section. Darin "Nav" für Navigationsbereiche, "Aside" für zusätzliche Inhalte, "Sidebars", "Header" und "Footer" für die Seite. Aber wir hatten schon gesagt, dass "Header" und "Footer" auch in anderen Abschnitten auftauchen können. Die Überschriften sowieso. "Main" für den Hauptinhalt, und "Address" steht hier auch noch dabei, da meistens irgendwo eine Kontaktadresse unten im "Footer" sitzt. Noch nicht erfasst von den Layout-Bereichen hier ist "Article", "Aside" hatten wir, "Section". "Article" und "Section", die sind typisch für Inhalte. Und in dem nächsten Abschnitt hier, im "Grouping", dort gibt es "Figure" und "Fig caption", das sind zwei Dinge, die zur Beschriftung benutzt werden, sehr gerne und sehr häufig, die lösen ein uraltes Problem. Und ganz am anderen Rand hier vom Element-Index, da gibt es Neuigkeiten. Hier gibt es wenig neue Elemente, also neu ist eigentlich nur "Mark" und "Time", die ich Ihnen vorstellen werde. Aber Änderungen gibt es beim "A", bei "EM", "Strong", "I" und "B", alle diese werden etwas umdefiniert. Und "Small" zum Beispiel auch. Das sind Elemente, Inline-Elemente, wie man das früher nannte, Text-Level heißen die heute offiziell. Alle diese Elemente werde ich Ihnen nach und nach vorstellen, was sich da geändert hat. Das es noch ein paar mehr gibt, ist hier ganz offensichtlich. Neue Elemente, die wichtigsten davon, ganz kurz hier im Überblick. Vom Inhaltstyp her, Abschnitte einteilen, traditionell hat man das immer mit einem "Div" gemacht, mit diversen Klassen oder IDs dazu - da gibt es so viele, da gibt es keine typischen. In HTML5 gibt es das neue Element "Section". Für Beiträge oder Artikel, auch das wurde früher oft von einem "Div" umgeben, die hatten dann "ID" oder "Classes" wie "Boast" oder "Article" oder "Beitrag" oder irgend so etwas in der Art. Dafür gibt es das neue Element "Article". Für Beschriftungen aller Art hat man sich mit teilweise abstrusen Konstruktionen beholfen. Schon etwas so simples wie eine Beschriftung eines Bildes, da gab es nichts dafür bisher. Man hat entweder, wie immer, "Divs" genommen, die neutralen Elemente, oder eine Definitionsliste hat man auch oft gesehen, mit "DL", "DT" und "DD" drin. Das Bild war der Definitionsbegriff und "DD" wurde dann zur Beschriftung benutzt. Aber das sind alles Hilfsmittel, das war Notwehr sozusagen. Die hatten dann "IDs" oder "Classes" wie "Build" oder "Caption" oder Beschriftung. In HTML5 gibt es "Figure" und "Fig Caption", mit denen man Bilder, Tabellen und Code-Beispiele beschriften kann. Zeit und Datumsangaben waren immer so ein bisschen behelfsmäßig, da gab es so viele Möglichkeiten mit "IDs" oder "Classes", wie Datum, Info, Post, Beitrags-Veröffentlichkeitsdatum oder, was weiß ich. Es gibt jetzt das Element "Time", das für diese Dinge zuständig ist. Und zum Hervorheben, ganz besonders z.B. in Suchergebnissen, hat man sich immer mit dem neutralen "Span" geholfen und dem eine Class wie "Highlight" gegeben. Dafür gibt es jetzt "Mark", wie ein Text-Marker.

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 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!