Ich muss zugeben, dass ich etwas überrascht war, dass neben den schon sehr webspezifischen Themen SQL und CSS3 auch noch die HTML5-Struktur auch für uns Mediengestalter mit dem Schwerpunkt print auf dem Programm für die Abschlussprüfung steht.

Da in der Praxis vermutlich die wenigsten damit in Berührung kommen, hier ein Rundumschlag über alles, was ich bei den Themen HTML, HTML5 und CSS für wichtig halte.

Dies beinhaltet

Was davon für die Prüfung tatsächlich relevant ist, weiß ich nicht. Im Zweifelsfall pickt man sich die Kapitel raus, die für einen selbst wichtig erscheinen.

Auf die U5: CSS-Kaskadierung werde ich nicht eingehen, da Kevin dazu schon einen sehr guten und verständlichen Artikel geschrieben hat.

Ich denke allerdings, dass man erstmal HTML grundsätzlich verstanden haben muss, um zu verstehen, was genau die Umstellung von HTML4 auf HTML5 bedeutet. Da gerade uns Printlern da die Erfahrung aus der Praxis fehlt, beginne ich einfach ganz vorne. Wer die Beispiele selber ausprobieren möchte, benötigt dazu im Grunde bloß einen Texteditor. Ich empfehle allerdings das kostenlose Notepad++. Das ist nicht schwer zu bedienen und im Notfall findet sich eine ziemlich gute Dokumentation auf der Website.

Was sind HTML und CSS eigentlich und was ist wofür zuständig

HTML ist die Abkürzung für Hyper Text Markup Language. Obwohl das gerne mal verwechselt wird, ist HTML keine Programmier- sondern eine Auszeichungssprache (Markup Language). Mit HTML beschreibt man die grundsätzlichen Elemente, die sich auf der Seite befinden und wie diese ineinander verschachtelt sind.

Typische Elemente sind beispielsweise Bilder, Texte, Links und Divs (Boxen). Wichtig ist, dass man mit HTML sagt, was für Elemente auf der Seite sind, aber nicht, wie diese aussehen. Man könnte es zwar machen, aber man sollte nicht. Warum das so ist kommt unter dem Punkt „Inline-Styles, das <style>-Tag und externe Stylesheets„.

Für das Aussehen der Elemente ist nämlich das CSS zuständig. CSS steht für Cascading Stylesheets. Mit CSS lässt sich bestimmen, wie die Elemente auf der Seite aussehen (z.B. Größe, Farbe, Hintergrund, Umrandung).

Wichtig ist, dass man beide Aspekte einer Website – Inhalt (HTML) und Aussehen (CSS) – strikt von einander trennt.

Grundaufbau von HTML

Eine Website setzt sich typischerweise aus unterschiedlichen HTML-Elementen zusammen. Jedes Element wird durch ein sogenanntes „Tag“ gekennzeichnet, dem unterschiedliche Attribute und ggf. auch Inhalte zugeordnet werden können. Bei fast allen Elementen gibt es ein öffnendes und ein schließendes Tag, wobei es hier auch Ausnahmen gibt.

Die grundsätzliche Syntax lautet:

Inhalt

Zum Beispiel steht das Tag <a> für „anchor“ und bezeichnet in der Regel einen Link. Es benötigt das Attribut „href„, dass angibt, wo der Link hinführen soll. Außerdem kann man ihm mittels dem Attribut „target“ vorgeben, ob sich der Link im selben oder in einem neuen Fenster öffnen soll. Der Inhalt entspricht in diesem Fall dem Text, der später anklickbar wird.


Hier geht es zur FW:Look!-Startseite

Das Resultat sieht dann so aus:

Hier geht es zur FW:Look!-Startseite

Die notwendigen und die zugelassenen Attribute unterscheiden sich von Element zu Element. Eine komplette Liste findet man auf der sehr hilfreichen SELFHTML-Website. Ich denke nicht, dass man die alle können muss, aber zumindest die notwendigen Attribute der wichtigsten Elemente wie Div (Boxen), a (Link), img (Bild), h1 – h6 (Überschriften) und p (Absatz) sollte man drauf haben.

Nun gibt es noch die Möglichkeit HTML-Elemente ineinander zu verschachteln, in so vielen Ebenen wie man möchte bzw. wie man braucht.

In dem Beispiel oben kann man beispielsweise statt des Textes ein Bild einbinden, das dann zum anklickbaren Link wird.

Der Tag für ein Bild heißt <img> und benötigt als Attribut „src“ (source) die Adresse, unter der das Bild, dass angezeigt werden soll, abgelegt ist. Außerdem kann man mit den Attributen „alt“ bzw. „titel“ Texte hinterlegen, die angezeigt werden, sollte aus irgendwelchen Gründen das Bild nicht gefunden werden oder wenn man den Mauszeiger einen kleinen Moment über dem Bild hält.

Um unser Logo vom Seitenanfang anzuzeigen lautet der Code

FW:Look!-Logo

Dies führt zu diesem Resultat:
FW:Look!-Logo

Wer sieht den Unterschied zwischen dem <a>-Tag und dem <img>-Tag?

Das <img>-Tag ist eines der wenigen Tags, die kein schließendes Tag benötigen, da sie keinen Inhalt haben können. Das Ende des <img>-Tag wird mit dem Slash vor der schließenden Klammer gekennzeichnet. Diese Art von Tags nennt man „selfclosing“-Tags.

Nun kann man diese beiden Elemente verschachteln, um ein anklickbares Bild zu erhalten, das unsere Startseite in einem neuen Fenster öffnet.



FW:Look!-Logo

FW:Look!-Logo

Nach diesem Prinzip lassen sich jetzt beinahe unendlich viele Konstruktionen bauen, die alle zusammen letztendlich eine fertige Website ergeben.

Die jetzt weiter zu beleuchten würde den Rahmen hier deutlich sprengen und ich hoffe, dass die grundsätzliche Mechanik klar geworden ist. Um später die Neuerungen in HTML5 zu durchschauen ist es wichtig, dass man verstanden hat, …

  • … dass es eine Vielzahl unterschiedlicher HTML-ELemente gibt.
  • … dass diese durch Tags beschrieben werden und Attribute/Eigenschaften haben können.
  • … dass sich diese Elemente ineinander verschachteln lassen.

Um diese ganzen Codeschnipsel jetzt für einen Browser anzeigbar zu machen, muss man sie zu einem .html-Dokument zusammenfassen. Dieses muss bestimmte Vorgaben erfüllen, damit es von möglichst vielen Browsern fehlerfrei verarbeitet werden kann.

Aufbau eines HTML-Dokuments

Es ist wichtig, dass man diesen Aufbau versteht und verinnerlicht, da sich gerade hier durch die Umstellung auf HTML5 einige gewichtige Änderungen ergeben haben. Um später die Unterschiede zwischen HTML4 und HTML5 besser zeigen zu können, gehe ich hier erstmal vom Aufbau in HTML4 aus.

Jedes .html-Dokument gliedert sich grundsätzlich in einen <head>- und einen <body>-Bereich.

Im <head>-Bereich stehen Anmerkungen, die die Seite an sich beschreiben, Verknüpfungen zu externen CSS-Dateien und möglicherweise Javascripten. Im <body>-Teil befindet sich dann der eigentliche Inhalt der Seite, also alle die Elemente, die der Browser anzeigen soll.

Eingerahmt werden <head> und <body> von einem öffnenden <html>-Tag und einem schließenden </html>-Tag.

Zuletzt ist es noch wichtig, dem Browser mitzuteilen, was für eine Art von Datei er eigentlich vor sich hat. Dies geschieht mit dem <!DOCTYPE>-Tag. Das <!DOCTYPE>-Tag ist eines der Tags, das sich in HTML stark vereinfacht hat.

Eine minimale .html-Datei sieht also folgendermaßen aus:

Das Resultat wäre eine formal richtige, aber noch ziemlich leere Website, die man nun mit weiteren Inhalten füllen kann:




 
   Titel der Website
   
 

 
    

   
 

       
      
     

         

            Ein erster Textabsatz.
         

         

            Ein zweiter Textabsatz.

Da ist jetzt mit einem Mal eine ganze Menge dazu gekommen und ich kann mir gut vorstellen, dass das auf den ersten Blick ziemlich verwirrend aussieht.

Da hier nun einige Elemente verschachtelt wurden, macht man sich am besten erstmal klar, welche Elemente zusammen gehören und welche Elemente welche umschließen.

Zum Beispiel umfasst der <head>-Tag nun die beiden Tags <title> und <meta>. Mit <title> beschreibt man den Titel der Seite. Dieser ist zum einen wichtig für Suchmaschinen, zum anderen erscheint er in den meisten Browsern in der Titelleiste oder im jeweiligen Tab.

Das <meta>-Tag transportiert Beschreibungen über die Seite. In diesem Fall mit dem Attribut „author“ den Namen des Autoren.

Auf jedes einzelne Element einzugehen wäre eine Mammutaufgabe und ist nicht Ziel des Beitrags. Wer sich genauer über die einzelnen Elemente informieren möchte, findet wie gesagt auf SELFHTML.org eine sehr schöne Liste.

An dem Beispiel noch wichtig ist, dass man erkennt, dass die Seite hier mittels vier div-Boxen in unterschiedliche Bereiche eingeteilt wurde und das jede der Boxen eine eigene ID bekommen hat.

Da sind die Divs mit den IDs „header“ (VORSICHT! Nicht verwechseln mit <head>!) , „wrapper„, „navigation“ und „article„. Sie unterteilen die Seite in einen Kopfbereich, in dem z.B. ein Logo stehen könnte und einen Inhaltsbereich, der in sich nochmal in die Navigation und den einzelnen Artikel unterteilt wurde.

Was genau es mit den IDs auf sich hat, werden wir im Abschnitt „Grundaufbau von CSS“ sehen. Und warum diese Einteilung wichtig ist, kommt bei den Unterschieden zwischen HTML4 und HTML5 zum tragen.

Ich denke, dass nun jeder zumindest eine ungefähre Vorstellung davon hat, wie ein .html-Dokument und seine einzelnen Elemente aufgebaut sind und zusammenhängen.

Wer sich selbt überprüfen möchte, sollte versuchen die folgenden Fragen zu beantworten:

  1. Was ist die Aufgabe von HTML?
  2. Was ist die Aufgabe von CSS?
  3. Was unterscheidet die beiden?
  4. Was ist die grundsätzliche Syntax eines HTML-Elements?
  5. Nenne fünf unterschiedliche HTML-Elemente und mindestens ein benötigtes Attribut pro Element
  6. Welche vier Elemente muss jedes .html-Dokument enthalten?
  7. Was für Inhalte findet man im <head>-Bereich, was für welche im <body>?
  8. Wie lautet der Code für eine unsortierte Liste, die drei Links als Elemente enthält?

Die Lösungen sollten sich eigentlich aus dem bisherigen Teil ergeben. Wenn es dennoch Fragen gibt, werde ich die gerne in den Kommentaren beantworten.

Das HTML-Boxenmodell

Das Boxenmodell in HTML war wohl schon öfter mal Teil der Prüfung. Ob das auch unter dem Punkt HTML5-Struktur auftaucht halte ich für fraglich, aber man weiß ja nie. Außerdem schadet es nicht, wenn man es mal gehört hat.

HTML-Elemente sind eigentlich immer rechteckige Boxen. Man unterscheidet noch zwischen „Block“- und „Inline“-Elementen, aber das ist an dieser Stelle nicht wichtig.

Jede Box hat eine Höhe (height) und Breite (width). Die Abmessungen ergeben sich, wenn man sie nicht extra definiert, aus der Größe des Inhalts. Außerdem kann man jeder Box noch einen Außenabstand (margin), wie die Konturenführung in InDesign, einen Innenabstand (padding), gibt es bei InDesign nur bei Textrahmen, und einen Rahmen (border) geben.

Das Boxenmodell beschreibt nun, von wo nach wo welche Größe wirkt und wie sie sich auf die Gesamtgröße des Elements auswirkt.

Das HTML-Boxenmodell

Das HTML-Boxenmodell



Was man dabei beachten muss ist, dass „width“ nicht die Gesamtbreite der Box beschreibt, sondern nur die tatsächliche breite des Inhalts. Innenabstand, Rahmenbreite und Außenabstand müssen zur vollständigen Boxenbreite addiert werden. Gleiches gilt natürlich auch für die Höhe.

Hier könnte sich eine hinterhältige Rechenaufgabe verbergen!

Denkbar wäre, dass man anhand von diversen Größenangaben ausrechnen soll, wie viel Platz ein Element tatsächlich einnimmt. Zum Beispiel:

width = 600px
padding = 15px
border = 2px
margin = 20px

Wie breit ist Box tatsächlich?

Tatsächliche Breite = width + 2 × padding (links und rechts!) + 2 × border (links und rechts!) + 2 × margin (links und rechts!)

= 600px + 2 × 15px + 2 × 2px + 2 × 20px
= 600px + 30px + 4px +40px
= 674px

Obwohl die Breite mit 600 Pixeln angegeben wurde, ist die Box eigentlich ganze 674 Pixel breit.

Was das Ganze noch ein wenig komplizierter machen könnte ist, dass sich die Abstände für links, rechts, oben und unten auch einzeln und unterschiedlich angeben lassen.

z.B.:

margin-top: 20px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 10px;

Womit wir elegant den Übergang zum CSS geschafft hätten.

Grundaufbau von CSS

Wie anfangs beschrieben, ist es die Aufgabe von CSS das Aussehen der HTML-Elemente zu beschreiben.

Dazu legt man erst fest, was für ein Element man beschreiben möchte und gibt dann die Werte für einzelne Attribute an. Die Syntax für CSS lautet:

Selektor { Attribut: Wert(e); }

Selektoren gibt es eine ganze Menge unterschiedliche. Da es hier nur um Gundlagen geht, werde ich mich auf die drei gebräuchlichsten beschränken.

Der Universalselektor *

Mit dem Universalselektor spricht man alle Elemente der Seite an. Sollte ich beispielsweise wollen, dass wirklich alle Elemente auf meiner Seite einen roten 1 Pixel breiten Rahmen bekommen, würde das so aussehen:

* { border: 1px #f00; }

#f00 entspricht dabei der Farbe Rot im Hexadezimalsystem. Einen sehr ausführlichen Artikel über Farbangaben in CSS gibt es hier.

Typselektor

Mit dem Typselektor kann ich alle Elemente eines bestimmten Typs auf meiner Seite auswählen. Möchte ich zum Beispiel, dass nicht alle Elemente, sondern nur die Links einen roten Rahmen bekommen, kann ich diese über ihren Typ „a“ direkt ansprechen:

a { border: 1px #f00; }

Man kann diese Typenangaben auch kombinieren. Beispielsweise könnte ich wollen, dass alle Links und alle Bilder den gleichen Rahmen bekommen.

a, img { border: 1px #f00; }

Wichtig ist hier das Komma zwischen den beiden Typen. Würde man dies weglassen, würde man nicht alle Links und alle Bilder ansprechen, sondern alle Bilder, die sich innerhalb eines Links befinden, wie z.B. in dem Beispiel mit unserem Logo weiter oben.

a img { border: 1px #f00; }

Die beiden sehen sich sehr ähnlich, ergeben aber unterschiedliche Resultate.

ID-Selektor #

Wie in dem Beispiel für den Aufbau eines .html-Dokuments gesehen, kann man einzelnen Elementen IDs zuweisen. Wichtig ist, dass sich IDs immer nur genau einem Element zuweisen lassen. Es darf also z.B. keine zwei Divs mit der ID „wrapper“ geben.

Mit dem ID-Selektor lassen sich jetzt einzelne Elemente gezielt ansprechen.

#wrapper {
   width: 800px;
   background: #ddd;
}

#navigation {
   margin: 5px;
}

Klassenselektor .

Während man eine ID immer nur an genau ein Element vergeben darf, kann man einer Klasse mehrere Elemente zuordnen. Dies ist vor allem dann sinnvoll, wenn es auf der Website wiederkehrende Elemente gibt. Ein Beispiel wären Infoboxen, von denen es mehrere in einem Text geben könnte.

 
    

   
 

      

         Box mit Infos 1
      

      

         Hier steht ganz viel Text
      


      

         Box mit Infos 2
      

      

         Hier steht ganz viel Text
      


      

         Box mit Infos 3
      

      

         Hier steht ganz viel Text

Damit die Infoboxen leicht also solche wiedererkannt werden, bietet es sich, dass sie alle gleich aussehen.

Deshalb haben sie alle die Klasse „infobox“ bekommen, die man nun an einer Stelle definieren kann. Die Angaben wirken sich auf alle Elemente mit dieser Klasse aus.

.infobox {
   width: 60px;
   height: 50px;
   background: #000;
   border: 1px #0f0;
}

Mehr Informationen zu Selektoren, deren Kombination und Kaskadierung findet man in diesem Artikel und in Kevins Beitrag zur CSS-Kaskade.

Inline-Styles, das <style>-Tag und externe Stylesheets

Nachdem wir jetzt gesehen haben, wie man mittels CSS das aussehen unterschiedlicher Elemente verändern kann, bleibt noch die Frage offen, wo man diese CSS-Definitionen notiert.

Dafür gibt es drei Möglichkeiten:

Inline-Styles

Inline-Styles heißen Inline-Styles, da man sie direkt im HTML-Quelltext notiert. Zum Beispiel ein Absatz in roter Schrift:

Hier der Text

Inline-Styles werden aus vielerlei Gründen nicht mehr genutzt. Der Hauptgrund ist, dass man versucht Content und Design möglichst voneinander zu trennen. Die Design-Anweisung direkt in den Quelltext zu schreiben ist da das genaue Gegenteil.

Außerdem müsste man für jeden Absatz, den man gerne rot haben möchte, die Anweisung erneut notieren. Das ist, gerade bei großen Websites nicht nur aufwändig, sondern auch sehr fehleranfällig. Auch wenn sich am Layout mal etwas ändert, müsste man diese Änderung an jedem einzelnen Absatz korrigieren.

Aus diesen Gründen gibt es meines Wissens nach nur noch einen einzigen Einsatzort für Inline-Styles. HTML-Newsletter haben keinen <head>-Bereich, in dem man Styles notieren könnte und erlauben auch kein Einbinden von externen Stylesheets. Deshalb muss man hier auf die Inline-Styles zurückgreifen. Sollte noch jemand einen Einsatzort kennen, lasse ich mich aber gerne eines Besseren belehren.

Das <style>-Tag im <head>

Die zweite Möglichkeit ist, dass man die CSS-Anweisungen für eine .html-Datei zentral im <head>-Bereich der Seite definiert. Dazu schreibt man die Anweisungen zwischen ein öffnendes <style> und ein schließendes </style>.


Styles im Headbereich




   

      Informationen

Diese Art der Definition hat gegenüber den Inline-Styles den Vorteil, dass man Inhalt und Design wieder zumindest ein Stück weit voneinander getrennt hat. Außerdem hat man die Anweisungen etwas übersichtlicher und zentraler.

Allerdings bleibt, gerade bei Webseiten mit vielen Seiten, der Nachteil, dass man bei Änderung die Korrektur an jeder einzelnen Seite wiederholen müsste. Das ist unpraktisch und immernoch ziemlich fehleranfällig.

Externe Stylesheets

Um Style-Definitionen nurnoch an genau einer Stelle zu haben, kann man die CSS-Anweisungen in eine externe Datei auslagern und diese auf den einzelnen Seiten im <head> einbinden.

Dies hat den Vorteil, dass man nun Content und Design endgültig in zwei unterschiedlichen Dateien getrennt hat. Ändert man in der formate.css etwas, wirkt sich dies automatisch auf alle Seiten, in denen diese Datei eingebunden ist, aus. Änderungen müssen nur noch an genau einer Stelle vorgenommen werden.

Aus diesen Gründen nutzt man in der Praxis eigentlich fast nur noch diese Variante.

Nun sollte jeder ein Grundverständnis dafür haben, was HTML und CSS sind, wofür sie gut sind, wie sie funktionieren und wie zusammenhängen.

Was hat es nun also mit HTML5 auf sich?

Unterschiede zwischen HTML4 und HTML5

Mit HTML5 wurden eine Reihe neuer Tags eingeführt. Einige alte haben sich verändert und einige sind ganz weggefallen.

Auf jedes einzelne Tag einzugehen wäre jetzt etwas sehr mühselig, weshalb ich mich auf die größten Neuerungen beschränken werde.

Tags zur Strukturierung

In HTML5 gibt es eine ganze Reihe von Tags, die den Inhalt der Seite strukturieren sollen. Das, was ich in diesem Beispiel mit den IDs gemacht habe, bringt HTML5 jetzt gleich selbst mit.

So sah eine sehr einfache Struktur in HTML4 aus:




 
   Titel der Website
   
 

 
    

   
 

      

         Box mit Infos 1
      

      

         Hier steht ganz viel Text
      


      

         Box mit Infos 2
      

      

         Hier steht ganz viel Text

In HTML5 sind nun die Tags <header>, <nav>,<article>, <section>, <aside>, <hgroup> und <footer> dazu gekommen, mit denen sich die IDs einsparen lassen.

Das Beispiel von oben sähe in HTML5 dann in etwa so aus:




 
   Titel der Website
   
 

 
   

   
 
   

   
 

      

         

            
Überschrift erster Ordnung

            
Unterzeile

         

      

      

      

         Hier steht ganz viel Text
      

      

      

      

         Hier steht ganz viel Text
      

      

      

      

         Zusätzliche Informationen
      

      


   
 

   

   

      Zusätzliche Informationen

Das <header>-Tag definiert jetzt den Kopf zusammengefasster Elemente. VORSICHT! man darf es nicht mit dem <head>-Tag verwechseln, dass den Meta-Bereich des .html-Dokuments kennzeichnet.

Es kann sich dabei auf die gesamte Seite beziehen, wie zum Beispiel einen Bereich am Seitenanfang, in dem sich das Logo und ein Motto oder Ähnliches befindet. Allerdings kann man auch für einzelne Unterbereiche wie <article> Header definieren.

Mit <nav> definiert man den Bereich für die Navigation.

Ein <article> ist eine inhaltlich vollständige und abgeschlossene Einheit. Sie soll unabhängig vom Rest der Seite für sich alleine stehen können. Beispiele wären ein Forumseintrag oder ein vollständiger Blogpost.

Mit der neuen <section> kann man Seiten in kleinere Einheiten Unterteilen. Dies können zum einen inhaltliche Unterteilungen, wie z.B. einzelne Kapitel innerhalb es eines Artikels sein, aber auch formale Einheiten wie der Header oder der Footer.

Das <aside>-Tag nutzt man, um Anmerkungen zum Inhalt zu kennzeichnen. Der Inhalt des <aside>-Tags soll eine Ergänzung zu den ihn umgebenen Inhalten sein, beispielsweise eine Infobox mit Erklärungen von Fremdwörtern, die im Text neben der Box auftauchen.

Eine <hgroup> dient dazu Überschriften verschiedener Ordnung zusammenzufassen. Sinnvoll ist dies, wenn man eine große <h1>-Überschrift hat und diese mit einer <h2> Vor- oder Unterzeile ergänzen möchte.

Werden diese beiden mit einer <hgroup> umschlossen, werden sie vom Browser und den Suchmaschinen als eine Einheit erkannt und nicht als zwei unabhängige Überschriften.

In dem mit <footer> markierten Bereich sollen sich laut Definition Informationen zu dem Element befinden, in dem sich der <footer> befindet.

Typischerweise wären das Informationen zum Autor, wenn es sich um einen Forums- oder Blogpost handelt, Links zum Impressum, beim Footer einer ganzen Seite, oder Ähnliches.

Wichtig ist auch hier, dass man sich nicht dadurch verwirren lässt, dass der Begriff „Footer“, ähnlich wie „Header“, häufig in zwei Bedeutungen verwendet wird.

Bisher sprach man als „Footer“ in der Regel vom unteren Teil einer gesamten Seite. In unserem Fall zum Beispiel wäre dies der Kasten mit den Links ganz unten. Mit „Header“ war in der Regel der oberste Teil einer Website gemeint. Auf FW:look! wäre das der Bereich mit der Navigation und dem Logo.

In HTML5 kann man nun für jedes einzelne Element, wie Artikel oder Sektionen, einzelne „Header“ und „Footer“ definieren.

Funktionen, die früher durch Scripte gelöst wurden

Einige Funktionen und Effekte, für die man vor HTML5 noch die Hilfe von Javascript oder anderen zusätzlichen Sprachen brauchte, lassen sich nun direkt in HTML5 lösen.

Zum Beispiel ermöglicht das <details>-Tag einen Bereich zu definieren, der erst nach dem Anklicken der Zusammenfassung ( <summary> ) geöffnet wird.

Auch beim <input>-Feld hat sich einiges getan. Es sind eine ganze Reihe neuer Arten von Eingabefeldern hinzugekommen, mit denen sich jetzt sehr genau beschreiben lässt, was für eine Art der Eingabe das Feld erwartet und verarbeitet. Die Validierung, also Überprüfung, ob der Inhalt korrekt ist, übernimmt jetzt der Browser direkt.

Zum Beispiel beim Feld „E-Mail“ in einem Kontaktformular soll sichergestellt sein, dass der Nutzer dort auch wirklich eine E-Mailadresse angibt.

In HTML4 gab es als Eingabemöglichkeit nur das Textfeld

Um nun zu überprüfen, ob dort tatsächlich eine E-Mailadresse eingetragen wurde, musste man den Inhalt des Feldes beispielsweise mit Javascript auslesen und mit verschiedenen Text-Operationen rausfinden, ob der Inhalt wirklich der Form Name@Provider.de entspricht.

In HTML5 gibt es nun den Typus „email“.

Tippt man in so einem Feld etwas ein, überprüft der Browser ganz von alleine, ob der Inhalt der Syntax einer E-Mailadresse entspricht. Gleiches gilt z.B. für die Typen „date“ oder „url„. Hier gibt es eine Liste aller Attribute des <input>-Feldes und alle verfügbaren Typen.

Darüber hinaus unterstützt HTML5 nun einige Javascriptfeatures deutlich besser. Zum Beispiel kann man mit dem <canvas>-Tag nun Bereiche definieren, in denen man mittels Javascript direkt auf der Website interaktiv zeichnen kann.

Ein weiteres Beispiel ist die Implementierung des Drag&Drop-Mechanismus, der es dem Nutzer erlaubt Elemente auf einer Website mit der Maus zu „packen“ und zu verschieben, wie man es von Dateien im Windows-Explorer oder Finder gewohnt ist.

Einbinden von Multimedia-Inhalten

Wollte man in HTML4 ein Video oder eine Sound-Datei einbinden, so benötigte man dafür in der Regel ein externes Plugin wie Flash, Quicktime oder Realtime.

HTML5 stellt nun eine Reihe von Elementen zur Verfügung, mit denen dies nun auch direkt über HTML geht und man auf zusätzliche und störungsanfällige Erweiterungen verzichten kann.

Mit dem <audio>-Tag muss man nun nurnoch den Pfad zu einer Audio-Datei angeben. Den Player samt Bedienelementen und Abspieloptionen stellt HTML selbst zur Verfügung.

Auf die selbe Weise lassen sich nun auch Videos mit dem <video>-Tag im Grunde ganz einfach in eine Website integrieren.

Ist man dennoch auf Content aus einem Plugin angewiesen, kann man nun mit dem <embed>-Tag einen Container für dieses Plugin definieren. Dadurch sind Plugin und restlicher Quelltext sauber voneinander getrennt.

Die DOCTYPE-Deklaration

Die Doctype (Document-Type) Deklaration teilt dem Browser mit, was für eine Art von Datei er zu erwarten hat. Daher sollte sie die erste Zeile in jedem .html-Dokument sein.

In HTML4 gibt es insgesamt drei verschiedene Arten von diesen Deklarationen, die sich darin unterscheiden, wie streng die Regeln bezüglich der Deklaration der einzelnen Elemente angewandt wurden. Die strengste ist HTML 4.01 Strict

In HTML5 fällt diese Überprüfung der Regelanwendung weg. Daher ist es nicht mehr nötig anzugeben, welche angewandt werden soll und die ganze Deklaration wird erheblich handlicher.

Wer sich gerne mehr mit der DOCTYPE-Deklaration beschäftigen möchte, findet hier einige Infos. Für uns Mediengestalter ist aber eigentlich nur wichtig, dass die Deklaration nun deutlich einfacher geworden ist.

Neben den hier vorgestellten Neuerungen gibt es noch viele andere Tags, die mehr oder weniger große Veränderungen erfahren haben. Allerdings sind die Neustrukturierung, das Ersetzen von Scripten, das native Einbinden von Multimedia-Inhalten und die Änderung der DOCTYPE-Deklaration die meiner Meinung nach wirklich wichtigen.

Alles, was darüber hinaus geht, führt dann schon sehr tief in die Materie und ist für alle nicht-Onliner kaum noch relevant. Wer dennoch den Ehrgeiz besitzt da tiefer einzutauchen, findet beispielsweise hier eine Liste aller neuen HTML5-Tags samt Erklärungen und Attributen.

Warum und wofür HTML5 gut ist

Nachdem wir nun die Unterschiede zwischen HTML4 und HTML5 herausgearbeitet haben, bleibt natürlich noch die Frage, warum man das alles macht.

Seit Jahren wird versucht, dass Netz maschinell semantisch durchsuchbar zu machen. Soll heißen: Eine Suchmaschine soll nicht nur den reinen Inhalt einer Website erkennen, sondern auch ablesen können, in welcher Verbindung ein Teil der Website zu einem anderen steht.

Das was der Leser ganz automatisch macht, war für die Algorithmen bisher unmöglich. Mit den Tags zur Strukturierung macht HTML5 einen großen Schritt in Richtung „Semantisches Netz„.

Werden diese konsequent und konsistent eingesetzt, ist es für Suchmaschinen bald viel einfacher zu erkennen, welche Text- und Bildteile zueinander gehören, welche den tatsächlichen Kern der Seite ausmachen und was Ergänzungen oder Anmerkungen sind. Sollte sich dies durchsetzen, wird die Qualität der Suchergebnisse noch deutlich steigen. Darüber hinaus ergeben sich noch ganz neue Möglichkeiten, da dann maschinell die Website nicht nur in technische, sondern vor allem in inhaltliche Abschnitte unterteilt werden kann.

Mit den Tags zum Einbetten von Multimedia-Inhalten versucht man sich der lästigen Plugins zu erledigen.

Vermutlich hat jeder schon mal erlebt, dass man bestimmte Inhalte nicht ankucken konnte, da das passende Plugin veraltet war oder gleich ganz fehlte.

Da man Sounds und Videos nun direkt mittels HTML einbinden kann, entfällt das lästige Pluginsuchen und -updaten. Die ganze Arbeit übernimmt der Browser.

Kein Flash in iOS

Kein Flash in iOS

Dies ist besonders wichtig, wenn das Ausgabegerät bestimmte Plugins gar nicht erst unterstützt. Beispielsweise verweigert Apple ja bekanntermaßen das Ausführen von Flash auf den iPhones und iPads. Flashbasierte Multimediaplayer werden dort einfach nicht ausgeführt oder erzeugen eine Fehlermeldung.

Ein weiterer ganz großer Vorteil ist, dass sich nun Audio-Daten und Videos als HTML-Elemente wie Bilder per CSS ansprechen und stylen lassen. Auch für Javascript werden die Elemente nun deutlich einfacher erfassbar. Was für Möglichkeiten zur Websitegestaltung sich daraus ergeben, lässt sich derzeit noch gar nicht absehen. Wir dürfen uns allerdings schon auf sehr ausgefallene und beeindruckende Anwendungen freuen!

Das HTML5 einige Funktionen mitbringt, die vorher nur mittels zusätzlicher Scripte realisierbar waren oder zumindest bessere Schnittstellen anbietet, ist vor allem für Entwickler eine deutliche Erleichterung.

Aber auch die Nutzer werden davon profitieren, denn um so mehr man als Entwickler selbst hinzufügen muss, um so mehr Möglichkeiten für Fehler oder Schwierigkeiten mit Kompatibilität von unterschiedlichen Elementen gibt es.

Außerdem werden Seiten deutlich performanter, sprich schneller, um so weniger zusätzliche Scripte oder Plugins zusätzlich zum HTML und CSS geladen werden müssen. Dies ist besonders interessant, da die Internetnutzung über mobile Geräte wie Handys oder Tablets immer weiter steigt, und diese aufgrund von Tarifen und Übertragungsraten nach einer möglichst geringen Datenmenge verlangen.

Warum und wofür HTML5 nicht gut ist

Wenn HTML5 so viele tolle Funktionen bietet, warum nutzt das noch nicht jeder?

Einerseits ist HTML5 einfach noch zu neu. Es werden längst noch nicht alle Tags von allen Browsern korrekt interpretiert und wiedergegeben. Gerade bei älteren Browsern kann es passieren, dass die die Website überhaupt nicht verarbeiten können.

Da man nie voraussehen kann, mit was für Software der Nutzer versucht die Seite zu laden, müsste man also sowohl eine HTML4- als auch eine HTML5-Version zur Verfügung stellen können. Dies bedeutet zwar größeren Komfort, aber auch einen sehr viel größeren Pflege- und Wartungsaufwand.

Andererseits haben sich bei vielen Tags noch keine einheitlichen Standards durchgesetzt. Beispielsweise beim <video>-Tag akzeptieren Browser jeweils nur unterschiedliche Formate:

Browser MP4 WebM Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES NO NO
Opera 10.6+ NO YES YES

– Quelle

Solange sich die Browserhersteller nicht geeinigt haben, werden wohl noch viele zögern ihre Webseiten komplett auf HTML5 umzustellen.

Ganz davon abgesehen ist es natürlich auch ein ganz enormer Aufwand eine bestehende Website komplett umzustellen, da man, will man HTML5 wirklich konsequent anwenden, bis ans absolute Grundgerüst ran muss. Um so größer eine Webseite ist, um so mehr Arbeit macht das und um so größer ist die Gefahr, dass man eigentlich funktionierende Mechanismen stört.

Ich hoffe, ich konnte auch Gestaltern, die mit der Gestaltung fürs Web sonst nicht so viel zu tun haben einen ausreichenden Überblick verschaffen.

Teilt eure Fragen, Ergänzungen oder Kritik gerne in den Kommentaren. Ich bin mir sicher, dass das Thema HTML5 groß genug ist, dass man hier noch eine Menge anfügen kann.

Zusätzliche Links und Resourcen

  • Eine sehr sehr große Fülle an Informationen rund um HTML und CSS bietet die w3school. Wer gerne sein Wissen testen möchte, findet dort beispielsweise ein HTML5-Quiz.
  • Viele nützliche Tools und Artikel gibt es auf selfhtml5.org. Unter anderem eine interaktive Karte, die die einzelnen HTML-Elemente ähnlich einem Periodensystem auflistet.
  • Natürlich hat auch die Wikipedia einen sehr ausführlichen Beitrag zum Thema HTML5, der aber weit über das, was wir brauchen, hinausgeht.
  • Auf html5rocks.com gibt es einige Beispiele, wie HTML5 in der Praxis genutzt werden kann. Dort kann man sich auch einige der Elemente in kleinen Beispielen ansehen und auch ausprobieren, wie z.B. die unterschiedlichen Input-Typen.
  • Und auch zum „semantischen Web“ gibt es auf Wikipedia einen umfangreichen Artikel mit einer Menge Hintergrundinformationen. Viel spannender finde ich allerdings diesen Artikel „Let’s Talk about Semantics„, der sich mit den Vor- und Nachteilen des semantischen Webs in der Praxis beschäftigt.

Auf YouTube habe ich noch diese Serie gefunden, die HTML5 ziemlich unterhaltsam vorstellt, auch wenn sie mehr oder weniger auffällig mit Werbung für den Internetexplorer gespickt ist.

https://www.youtube.com/watch?v=SJTyY2csya8

Wenn man sich diese Teile auch noch alle gönnt, sollte eigentlich nichts mehr schiefgehen!

Viel Erfolg!