HTML5 für Webdesigner

Ergänzenden Inhalt auszeichnen mit <aside>

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ergänzende Inhalte, die umgebenden Text erläutern, aber fürs Verständnis nicht zwingend nötig sind, werden in HTML5 mit dem Element aside ausgezeichnet.

Transkript

In HTML5 gibt es ein neues Element, das in Layouts oft als Sidebar, als Seitenspalte, dargestellt wird. So wie hier im Artikel-Archiv vom HTML5 Doctor ist hier zum Beispiel eine typische Seitenspalte. Wenn ich hier mit rechts drauf klicke zum Untersuchen des Elements, dann sehen Sie im Quelltext hier ein "Aside"-Element. Also "Aside" - an der Seite wörtlich übersetzt - hier, als Sidebar. Zusätzliche Informationen, Aside, ist hier die ganze Reihe runter und geht - wo hört er denn auf? Da ungefähr wird er wohl sein - da hört Aside also auf. Auch auf der Startseite, hier dieser Kommentarblock, das dürfte ein Aside sein. Hier sehen Sie - S1econdary - und da sind die Kommentare, dieser kleine Kommentarblock, als ergänzender Inhalt ausgezeichnet. Im Element-Index - schauen wir mal wieder rein - Aside, AS, da ist er, "represents a section of a page consisting of content that is tangentially related to the content around the Aside element". Or in German: Ein Abschnitt auf einer Seite mit Inhalt, der ergänzend, der tangentiell mit dem Hauptinhalt zu tun hat. Der hat also damit zu tun, man könnte ihn aber wegnehmen und der Hauptinhalt wäre immer noch verständlich. Solche Abschnitte werden im Print-Bereich oft als Sidebars, als Seitenspalten, realisiert, und im Web-Bereich auch durchaus. Ich schaue mal den Code-Snippet an, hier ganz simpel: "Aside - Überschrift - Link-Liste", das ist so ein typischer kleiner Block dabei. Das können auch Werbeblöcke sein, alles was irgendwie so ergänzend-- hier so etwas, das ist ein Aside. Es muss nicht immer daneben stehen, es kann auch durchaus unten drunter stehen als zusätzliche Information. Das ist Aside als Element, und das soll jetzt auf unserer Beispielseite hier eingebaut werden. Es kommt in den Hauptinhaltsbereich. Es ist immer für den umgebenden Inhalt. Wenn ich also hier ein Aside reinsetze und das steht im Main-Bereich, dann ist dieser zusätzliche, dieser ergänzende Inhalt, für den Main-Bereich. H3 packen wir hier mal rein. Ergänzender Inhalt. Wenn der unterhalb vom Main stünde, dann wäre das für die ganze Seite. D.h. immer das umgebende Element, darauf bezieht sich - inhaltlich gesehen - das Aside. Hier stehen zusätzliche Informationen. "/P". Einmal speichern, das kann man hier oben immer sehr schön sehen. "Aside H3/H3", ergänzender Inhalt, ein ganz normaler Absatz, "/Aside" steht innerhalb von "Main". Gespeichert ist, rüber in den Firefox, "Neu laden". Und anschauen im Seiten-Inspektor, hier ist das Aside. Auch das kann man natürlich später wunderbar gestalten, indem man es einfach irgendwie "hinfloatet". "Main" umgibt das Ganze. Sobald ich "Main" einklappe, sieht man, oben hervorgehoben ist hier im Quelltext das Aside weg, oben ist es umzingelt von dem Rahmen. Klappt also ganz wunderbar, wir haben ein Aside-Element. Nur noch kurz die Zusammenfassung zum Schluss: Aside für "complementary content" - für ergänzenden Inhalt - enthält zusätzliche Informationen für das umgebende Element für den umgebenden Text, wird im Layout oft als "Sidebar" - als Seitenspalte - realisiert. Und Beispiele sind kurze Erläuterungen, Gruppen von Links mit Überschriften, oder auch Werbeblöcke. Kurze Erläuterungen, da könnte man zum Beispiel so ein "Pull-Quote", so ein Zitat, was im Fließtext hervorgehoben ist, auch das könnte man durchaus als Aside auszeichnen. Denn auch, wenn man dieses Zitat, diesen "Pull-Quote" - dieses hervorgehobene Etwas - aus dem Text entfernt, der Rest bleibt verständlich. Aside für ergänzende Inhalte.

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!