Erste Schritte mit HTML5 und CSS3

HTML5 zieht sich gerade wie eine kleine Revolution durch das Internet. Nach und nach rüsten viele große Webseiten nach und präsentieren ihre Inhalte in dem neuen Standart. Doch was bietet mir HTML5 eigentlich?

  • Offline / Storage
  • Web SQL Datenbank
  • Application Cache
  • Real Time Communication über Web Sockets
  • File und Hardware Access
  • Drag and Drop
  • Geolocation
  • Speech Input (Formular)
  • Rich Media

Darüber hinaus zeichnet sich HTML5 auch durch eine viel bessere und einfachere Semantik aus als sein Vorgänger XHTML 1.0

Nehmen wir uns als Beispiel folgendes Layout vor.

Es gibt einen Header-Bereich, einen großen Inhaltsbereich wo z.B. bei einer Nachrichtenseite/Blog der Feed dargestellt wird und die Sidebar, sowie einen Footer. Bildet man das ganze mit XHTML 1.0 ab, so kommt man auf den folgenden Quelltext.

Auffallend groß ist hierbei die Document Type Declaration. Eine HTML5 Seite beginnt mit folgendem Doctype:

<!DOCTYPE html>

Im head Element  befindet sich auch die meta Deklaration. Auch hier glänzt HTML5 wieder durch Einfachheit. Es reicht, wenn man folgendes schreibt:

<meta charset=“utf-8″ />

Wenden wir uns nun den weiteren Elementen zu. Das Element mit der id container ist in diesem Fall ein Wrapper um die ganzen Elemente, damit wir die Seite zentriert darstellen  können. Spannender sind die Elemente da drin. In unserem header Element möchten wir später mal unser Logo platzieren. Da das Motto von HTML5 scheinbar „Keep it simple“ lautet, ist es nicht verwunderlich, dass der Bedarf nach einem eigenen Tag dafür erkannt wurde. Ab sofort braucht man seinen header nicht mehr als DIV Box schreiben, sondern verwendet einfach:

<header>

Es gibt eine Menge neuer Tags, um den Quellcode besser lesbar zu machen und um den Inhalten in den einzelnen Elementen eine Bedeutung zu geben. So kann man seinen Feed durch das section Element umrunden. Dieses ist gedacht für „a thematic grouping of content, typically with a heading„. Hat man einzelne Artikel darin, kann man dafür das article Element verwenden. Unsere Sidebar verpacken wir in das aside Element (nur wenn der Inhalt darin sich auf den Inhalt in section bezieht) und für den Footer gibt es jetzt den footer Tag, so dass unser HTML5 Quelltext für unsere Seite jetzt wie folgt aussieht:

Und schon haben wir unsere erste HTML5 Seite geschrieben.

In der folgenden kleinen Serie möchte ich ein HTML5 Theme erstellen und Features von CSS3 näher betrachten. Ich freue mich über Anregungen und Wünsche.

Be Sociable, Share!

One thought on “Erste Schritte mit HTML5 und CSS3

  1. Pingback: webventil » Wie gestalte ich eine Webseite in HTML 5 – Teil 1.