HTML5

An Anfang waren VI, Q-Edit, Notepad und andere Texteditoren die ersten Hilfsmittel zum Erstellen von HTML-Seiten und die Beschreibungssprache "HTML" war einfach, Design unkritisch und Bilder spärlich. Die wenigen Elemente wurden aber immer mehr verwässert. Eine Tabelle war ursprünglich zur Darstellung von Daten gedacht aber sehr schnell und für lange Zeit auch zur Steuerung des Layouts (Design) missbraucht. Die nächsten Schritte waren die Trennung von Layout und Inhalt mittels "Style Sheets" und "DIV-Tags. Anhand der DIV-Tags lässt sich aber nicht erkennen, ob der Block nun eine semantische Bedeutung hat oder "nur" für ein Design verwendet wird. 2008 wurde HTML5 angekündigt, wodurch mit zusätzlichen Tags der Inhalt auch logisch gekennzeichnet werden kann. So finden dann auch Suchmaschinen und andere Prozesse besser den "Inhalt" und können z.B. Inhaltsverzeichnisse vom Artikeltext besser unterscheiden.

HTML5 Beispiele

Ich habe mir einige HTML5-Quellen angeschaut und einige interessanter Tags gefunden, die ich in Webseiten für sinnvoll erachte

  • <header>
    Damit wird in der Webseite gekennzeichnet, welche Bereiche als "Kopf" einer Seite sich immer wiederholen. Da hier kein Artikeltext steht, kann eine Suchmaschine diesen Teil z.B.: ignorieren.
  • <article>
    Mit diesem Tag kann der eigentliche Inhalt der Seite eingefasst werden
  • <nav>
    Dieses Tag kennzeichnet Elemente, die zur Navigation der Seite dienen.
  • <menu>
    Dieses Element soll "Kontext-Menüs" kennzeichnen aber nicht das Menü der Navigation. Das Tag gab es schon früher und war in HTML4 nicht mehr definiert. Es dürfte also durchaus sowohl alte Seiten geben, die das Tag noch nutzen als auch neue Seite, bei denen der Webdesigner den Sinn nicht verstanden hat und die Navigation damit kennzeichnet.
  • <footer>
    Analog zum "Header" kann damit der Fußbereich einer Webseite definiert werden.
  • <section>
    Damit kann ein zusammenhängender Abschnitt, der in der Regel mit einer Überschrift beginnt, gekennzeichnet werden. Das passiert natürlich idealerweise in einem "<article>"-Abschnitt. Es kann aber auch umgekehrt sein.
  • <aside>
    Bei einem mehrspaltigem Layout kann damit z.B. eine Randleiste gekennzeichnet werden, die z.B. neben einem Artikel angezeigt wird. Im Druckbereich fällt oft der Begriff einer "Marginale"
  • Formularfelder
    Über entsprechende Tags können in Formularen die Felder gleich auf ihre korrekte Syntax von einem kompatiblen Browser verifiziert werden. Soe gibt es Tags wie "Telephone", "url", "email", "number", "range", "search"
  • <canvas>
    Mit diesem Tag lassen sich sogar Grafiken im Browser zeichnen.

Wer nicht viel lesen will, kann einem Video von Brad Neuberg (Google)

Introduction to HTML 5
https://vimeo.com/6691519   

HTML5 und die MSXFAQ

Da ich schon lange mit einer DWT-Vorlage arbeite, war es natürlich ein einfaches, die Bereiche auch mit dem entsprechenden HTML5-Tags zu kennzeichnen. Im Oktober 2015 habe ich mir mal die mühe gemacht, zumindest die Basis-Tags, die ich im vorherigen Abschnitt beschrieben habe, auch umzusetzen.

Sie können sich gerne den Quellcode anschauen. Ein Blick auf das Layout (Siehe Seite Layout 2013) zeigt, dass es ein paar relevante Blöcke gibt, die durch ID-Tags gekennzeichnet sind:

HTML-ID HTML5 Tag

Logo und Top

header

nav

nav

breadcromb

nav

content

article

keword

aside

footer

footer

Ich habe also einfach die Tags genommen und die HTM-5 Tags drum herum addiert. Das tag kann das oder die DIV-Tags umfassen oder direkt das erste Element nach dem DIV-Tag sein. Aktuell habe ich aber weiter die "DIV-Tags" für die Formatierung im Code.

Und natürlich "versteht" der Sharepoint Designer noch nicht HTML5 und kennzeichnet die neuen Tags als "ungültig", selbst wenn der Documenttype auf "html" steht:

Mittelfristig könnte ich nun noch anfangen, das Pagemenü als "Aside" zu kennzeichnen und auch jeden H2-Block als eigene Section. Das kommt dann sicher in der Zukunft mit dem nächsten Wechsel des Redaktionssystems.

Weitere Links