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

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

Thomas A. Reinert
Freelancer, MediaDesign, CEO TARThemes.com bei TAR MediaDesign
Thomas ist (hauptsächlich) Frontend-Entwickler auf Basis von HTML5, CSS3 und jQuery. Nach insgesamt 35 Jahren Programmiererfahrung, 20 davon als Webentwickler und knapp 10 Jahren Wordpress hat er einen guten Einblick in das Backend, die Theme- sowie Plugin-Programmierung und individuelle Anpassungen an die jeweiligen Projektvoraussetzungen. Zusätzlich unterrichtet er als freier Dozent in der Berufsbildung und ist seit 2013 im Prüfungsausschuss der IHK Köln für "Mediengestalter Digital und Print, Fachrichtung Digital" tätig.

5 Kommentare zu “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 eine Antwort

Deine E-Mailadresse wird nicht veröffentlicht Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>