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 to “Abschlussprüfung Mediengestalter Sommer 2013, Konzeption und Gestaltung, Alle Fachrichtungen: U5 – HTML5-Struktur”

  1. [Als Spam markiert von Antispam Bee | Spamgrund: Server IP]
    […] U5: HTML5-Struktur […]

  2. [Als Spam markiert von Antispam Bee | Spamgrund: Server IP]
    […] Abschlussprüfung Mediengestalter Sommer 2013, Konzeption und Gestaltung, Alle Fachrichtungen: U5 &#… […]

  3. Ines

    Wofür benutze ich nochmal das (section) Tag?
    Welche Informationen umschließe ich am besten mit diesem Tag?

    Grüße

  4. 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/

  5. Ines

    Hallo Herr Reinert,

    vielen Dank für die Antwort das war verständlich erklärt Danke.
    Grüße

Leave a Comment

Ich akzeptiere