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

Der Hauptinhaltsbereich einer Seite: <main>

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
HTML5 bringt mit main ein neues Element, das den wichtigsten Inhaltsbereich einer Seite kennzeichnet.

Transkript

Neu in HTML5 ist ein HTML-Element zum Auszeichnen des Hauptinhaltsbereich auf einer Webseite. Hier beim HTML5 Doktor ist oben der Kopfbereich der blaue Bereich. Darunter der graue Bereich, der fängt in der Mitte hier an und geht ganz weit runter, bis der Schatten unten aufhört. Da drunter kommt der Fußbereich. Wenn man sich diesen Bereich anschaut im Quelltext, "Element untersuchen", dann sehen Sie, das ist "main", und geht tatsächlich bis ganz hier unten. Ich zeige Ihnen noch mal kurz , bis da hört er auf. Der Schatten unten sieht sehr hübsch aus, ist aber nicht unser Thema im Augenblick. Da drunter kommt nur noch der Fußbereich. "Main" ist ein neues Element. Es war recht umstritten am Anfang, weil viele haben gesagt: "Das brauchen wir nicht." Alles, was nicht in Header oder Footer oder Nav ist oder so was, das ist automatisch der Hauptbereich, der Hauptinhaltsbereich. Hier ist "MAIN", der hat es doch geschafft in HTML5. Code-Snippet kurz anschauen, Sie sehen hier "

", geht runter, hört hier unten wieder auf mit "
". Ist recht simpel zu benutzen. Da drin sind ein paar Artikel, das kommt dann bei den Inhalten. "The main element is an exact analogue of ARIA's role='main'". Wenn man nicht weiß, was das ist, ist diese Aussage nicht sonderlich hilfreich, aber es hilft z.B. Screenreadern und anderen Hilfstechnologien beim Bestimmen des automatischen Inhalts. Das könnte z.B. irgendwann eine Suchmaschine sein, die einfach sagt: "Da, wo Main anfängt, fängt der Inhalt an." Das könnte ein Programm sein wie beim Reader im Safari, der einfach alles ausblendet und nur noch den Inhalt anzeigt; da gibt es verschiedene Möglichkeiten. Die werden zwar im Augenblick noch nicht benutzt, aber noch ist ja nicht aller Tage Abend, das kann durchaus noch kommen. Also möchte ich hier einmal nach oben scrollen, dann rüber in den Editor, und hier ein Main-Element einfügen. "
" und ganz unten "
". Dazwischen, damit ein bisschen Inhalt drin ist, mal eine Überschrift. Wenn man die später nicht braucht, wie z.B. im Nav-Bereich, da könnte man noch eine reinsetzen - könnte man die später wieder ausblenden. Jetzt einfach einen Absatz als Platzhalter, hier kommen später verschiedene Inhalte hin - "

". Speichern, noch ein bisschen aufräumen - schon haben wir einen Main-Bereich. Gespeichert ist, ich wechsle rüber in den Browser und lade hier mal neu. Schon haben wir einen Hauptinhaltsbereich, in den später noch weitere Inhalte reinkommen. Im Augenblick geht es ja mehr um die Inhaltsbereiche. Hier ist "
", "

", "

" usw. Es ist noch nicht viel Inhalt drin. Für einen Hauptinhaltsbereich ist das ziemlich mager. Nichtsdestotrotz - er ist hier. Im Überblick: Main für den Hauptinhalt markiert den Hauptinhalt einer Seite und darf im Gegensatz zu Header und Nav z.B. nur einmal auf einer Seite vorkommen. Ist also wie beim guten alten Highlander - es darf nur einen geben. Da ist es dann auch für andere Programme recht einfach zu bestimmen, wo der Hauptinhalt einer Seite ist.

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!