Abschlussprüfung Mediengestalter Sommer 2013, Konzeption und Gestaltung, Alle Fachrichtungen: U5 – HTML5-Struktur

HTML5 Logo

HTML5 bringt wesentliche neue semantische wie auch strukturelle Elemente mit, um die Outline eines HTML-Dokuments zu optimieren. So lässt sich der Dokumentfluss feiner steuern – die Seite wird dadurch u.a. auch besser maschinenlesbar und somit auch durch Suchmaschinen besser erfassbar.

Entgegen der früheren Lösung, Kernbereiche einer Seite durch <div> Tags mit bestimmten ID´s (Klassiker: „header“, „nav“, „content“, „sidebar“, „footer“) eindeutig zu kennzeichnen, bietet HTML5 dazu native Elemente. Dies hat für die Semantik des Dokuments einige Vorteile, die ich im folgenden darzustellen versuche.

Anmerkungen

Zur Veranschaulichung beziehe ich mich in weiten Teilen auf die beiden exzellenten Artikel zu dem Thema aus dem Smashingmagazine, die unter den Links am Ende dieses Beitrags als erste aufgeführt werden.

Um die Beispiele optimal nachvollziehen zu können die hier aufgeführt werden, möchte ich außerdem das Outlining-Tool von Geoffrey Sneddon dringend empfehlen.

Weitere Links und Informationen

5 thoughts on “Abschlussprüfung Mediengestalter Sommer 2013, Konzeption und Gestaltung, Alle Fachrichtungen: U5 – HTML5-Struktur

  1. Hallo Ines!
    Das <section>-Tag dient dazu, Inhalte innerhalb einer Webseite zu „sektionieren“. Anders als mit einem <div> hat dies aber nun auch eine semantische Bedeutung – für die inhaltsleere bzw. besser ‚bedeutungslose‘ Aufteilung einer Webseite sollte man also weiterhin auf das <div>-Tag zurückgreifen. Im Klartext: Muss ich einen Bereich rein optisch hervorheben oder anderweitig per CSS adressieren, nutze ich dazu weiterhin letzteres. Beispiel: Ein klassischer „Wrapper“ um das gesamte Layout einer Seite um diese zu zentrieren: DIV!
    Anders würdest Du es aber halten wollen, wenn Du einen Artikel in unterschiedliche Inhaltsabschnitte aufteilen möchtest, z.B. um die unterschiedlichen „Kapitel“ auf einer einzelnen Seite voneinander abzugrenzen. Dann würde Deine <section> z.B. alles von der ersten Headline <h1> bis zur nächsten umfassen.
    Hoffe, ich konnte das einigermaßen verständlich erklären :)

    Achja, einige gute Praxisbeispiele finden sich auch hier: http://www.zdnet.de/41558246/html5-so-nutzt-man-die-verschiedenen-sektionselemente-richtig/

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.