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.

HTML5 für Webdesigner

Abschnitte erstellen mit <section>

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Element section dient dem Erstellen von inhaltlichen Abschnitten auf Webseiten. Es ist kein Ersatz für das neutrale div.

Transkript

Ein neues Element zur Gruppierung von Inhalten ist das Element "Section", das ich Ihnen in diesem Film kurz vorstellen möchte. Ich bin wieder auf HTML5 Doctor, auf der Elementindex-Seite, und springe zum SW-Section, hier "samp" und "script" überspringen wir, das sind nicht nicht so interessant im Moment. Hier haben wir Section "represents a generic document or application section". Also ein allgemeiner Abschnitt in einem Dokument oder auch in einer App. In diesem Kontext in diesem Zusammenhang, ist ein Abschnitt eine thematische Gruppierung von Inhalt, darum geht es mir, dass ist eine thematische, eine inhaltliche Gruppierung. Beginnt oft mit einem Header, hat manchmal auch einen Footer. Sie sehen also das Layoutbereichselement "Header" gibt es nicht nur für die ganze Seite, sondern Header gibt es auch innerhalb von einzelnen Abschnitten unter Umständen nochmal, genau wie den Footer. Beispiele, die gennant werden, sind Kapitel in einem Buch oder "Tapped Pages", also Reiter auf Seiten in einem Dialog. Oder eben auch hier nummerierte Abschnitte - die Gliederung - von einer Thesis, einer Doktorarbeit, von einer Magisterarbeit, von einer allgemeinen akademischen Arbeit, wobei man das wohl nicht so oft benutzen wird auf den normalen Webseiten. Ich springe hier einmal zum Artikel über Section - "Die Prognose der Doktoren". Hier wird es etwas genauer vorgestellt und am Anfang als HTML5 noch neu war, wurde Section oft missbraucht als schlichter Ersatz für "Diff". Auch die Doktoren selbst haben das gemacht. Der Artikel ist von 2009 bereits, die entschuldigen sich hier ganz am Anfang und haben gesagt, dafür gibt es "Diff", das gibt es nach wie vor, nicht Section. Section ist inhaltlich. Das heißt, wenn man nur etwas gruppieren will, um es per CSS zu gestalten, dann benutzt man nach wie vor das gute alte "Diff" und nicht Section. Section ist hier völlig in Ordnung als inhaltliche Thematisierung, oder wie man das nennen möchte. Ich zeige Ihnen einfach einmal ein Beispiel mit der "Web developer toolbar" gibt es im Abschnitt "Outline" hier - Kontur heißt es auf Deutsch - habe ich das Element "Namen" einmal eingeschaltet und damit können wir, ohne in den Quellentext zu gucken, jetzt einmal Sections auf den Seiten einmal anschauen. Die werden jetzt rot umrandet. Hier sehen wir schon typisches Einsatzgebiet von Section hier in der Sidebar, die einzelnen Abschnitte. Hier ist ein Werbeblock, der kommt sicher mit Fremdcode, deswegen hat er noch keine Section, sondern wahrscheinlich nur ein "Diff". Wenn das perfekt ausgezeichnet wäre, wäre das natürlich auch eine Section. Hier kommt wieder einer, und hier ist wieder ein Abschnitt. Hier im Artikel gibt es "Sections". Alles das sind Abschnitte. Ich wechsle einmal die Startseite, und hier sehen wir auch, den Elementindex, den Sie vielleicht in einem einen oder anderen Film gesehen haben. Auch hier zeige ich die Anwendung von Sections. Und man sieht sehr schön, der ganze Elementindex ist ein Abschnitt, der ist unterteilt in Unterabschnitte. Sie sehen die Section "Head" Sections "Groupings", "Tables" und so weiter. Die sind einfach nebeneinander "gefloatet". Das ist also Sections zur allgemeinen Gruppierung von Inhalten, die in irgendeiner Form inhaltlich zusammengehören.  In dem Editor. Der klassische Einsatz von Sections, das möchte ich Ihnen hier ganz kurz einmal zeigen, ist schlicht und einfach in der Sidebar, dass ich hier eine Section reinsetze für das bereits vorhandene und diese Section auch wieder schließe und dann hier noch einmal eine Section mache. Auch die bekommt wieder eine Überschrift, die nennen wir einmal "neue Produkte". Diese wird dann auch wieder geschlossen und dann ein Überblick über neue Produkte und die Section muss dann wieder geschlossen werden. Damit man die Sections auseinander halten kann, gibt man denen eine "Class" oder "ID". Den oberen nennen wir einmal "Blog New", neue Blogbeiträge - oder so etwas - würde da reinkommen. Hier machen wir ein bisschen deutlicher die optische Unterscheidung. Hier kommt "Class ist gleich Product new". Optisch erkennt man hier überhaupt keinen Unterschied im Browser. Hier ist noch einmal eine Überschrift und noch eine Überschrift. Jetzt können wir das einmal gestalten. Das sind aber inhaltliche Abschnitte. In Sidebars findet man das sehr häufig. Natürlich kann man wenn man mehr Inhalt hat im Hauptbereich, kann man das auch in Sections unterteilen.  Jetzt kommt hier die Kurzzusammenfassung: Inhalte in Abschnitte unterteilen, thematische Gruppierung von Inhalten, dazu ist Section da. Beginnt typischerweise mit einer Überschrift. Wenn es einen längerer Abschnitt ist, kann es auch einen eigenen Header oder einen eigenen Footer enthalten. Kann Unterabschnitte mit Section enthalten, also Section darf man verschachteln, und es ist in keinster Weise ein Ersatz für das semantisch neutrale "Diff". Also "Diff" benutzt man immer dann, wenn man irgendetwas gruppieren will, nur um es anschließend mit CSS zu gestalten.

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!