Code Ansicht

Update Tutorials - Tricks & Tipps

Thema: PDF-Weiterleitungen mit PHP

Zum Tutorial

Überblick zu HTML5

HTML5 wurde am 28. Oktober 2014 vom W3C vorgelegt, als Kernsprache des Web und Nachfolgers von HTML4. Es sind also inzwischen 3 Jahre vergangen. Das ist eigentlich gar nicht so lange her.


Doch warum hat man HTML4 ersetzt? Grundsätzlich kann man sagen: Um zu erweitern und zu vereinfachen. Es wurden neue Befehle eingeführt, neue Methoden Medien wie Videos und Audio einzubinden. Und es sind eine Menge neuer semantischer Elemente hinzugekommen.
In diesem Tutorial möchte ich nur einen kleinen Aspekt von HTML5 ansprechen: Das Gliedern von Websiten mit den neuen Elementen und Tags.

 

Zu allererst: Die Doctype-Deklaration wurde verschlankt:

HTML5:

<!DOCTYPE>

 

Statt div-containern viele neue Tags:

 

  • - für Navigationsinhalte - "nav"
  • - für den Kopfbereich der Seite - "header"
  • - für den Hauptbereich - "main"
  • - für den Seitenbereich - "aside"
  • - für Bereiche/Artikel - "section" und "aside"
  • - für den Fußbereich der Seite - "footer"

 

Mit diesen Tags wollte man erreichen dass die teilweise stark verschachtelten div-Bereiche klar erkennbar sind. Statt jetzt fünf div's ineinander zu verschachteln, um einen Kopfbereich mit Navigation anzulegen, kann man jetzt zwei einfache Tags benutzen und ohne Angabe von ID`s oder Klassen sofort verstehen für was die Elemente genutzt werden sollen. Ebenso einfach sind sie auch die CSS-Anweisungen dazu. Nehmen wir einmal an ich baue mir meinen Header:

 

Im HTML

<header>Mein toller Kopfbereich!</header>

 

Im CSS

header{
background: green;
}

 

Einfach, oder?

Natürlich kann man diesen Tags auch Klassen und Id's zuordnen, wie man das von allen Tags her kennt:

 

Im HTML

<header>Mein toller Kopfbereich</header>

 

Im CSS


header#slider{
   background: red;
}

oder kürzer =

#slider{

background: red;

}

 

Noch nicht überzeugt?
Schauen wir uns einmal an, wie viel angenehmer der Code durch HTML5 wird.

 

HTML4:

 
 
 
HTML5:
 

 

HTML5 ist hier eindeutig leichter zu lesen, vorallem das verschachteln fällt deutlich leichter. Und wer schon einmal große Websites gebaut hat und vor lauter Div-Containern nicht mehr gewusst hat welches schließende div zu welchem öffnenden gehört, wird jetzt aufatmen können.

 

Werden Divs jetzt gar nicht mehr benutzt?

Doch. Es ist nur einfacher die Grundstruktur der Seite zu erfassen wenn man die neuen Tags benutzt.

 

Doch warum sollte ich es überhaupt benutzen?
Was hab ich davon HTML5 zu benutzen? HTML4 funktioniert doch auch.
Nun, das stimmt. "Never change a running system" sag ich da nur. Wer eine kleine Website hat, mit nur ein paar wenigen Seiten, braucht nicht unbedingt sofort umzustellen.
Webbrowser sind allesamt abwärtskompatibel. Im Moment ist es sogar so dass man bestimmte Tags aus HTML5 nicht allen Browsern verwenden kann. Auch wenn diese Tags nach und nach in die neuen Browser integriert werden - manchmal ist es auch gefährlich es einzusetzen, wenn man Cross Browser baut.

 

Gefährlich? Dann sollte ich HTML5 besser nicht nutzen?
Es sprechen viele Gründe für HTML5:
HTML5 bringt sehr starken Code mit, der uns dabei hilft ohne externe Plugins dynamische Inhalte einzustellen. Noch dazu bietet es Webentwicklern die Möglichkeit Inhalte besser zu strukturieren und für Devices wie Smartphone, Tablets oder große PC's zu coden. Browser werden immer besser was das verstehen und umsetzen von neuen HTML5 Tags angeht (der Nachhinker schlechthin - Internet Explorer mal wieder). Heutzutage muss man sich darum nicht mehr allzu große Sorgen machen, wie zum Beispiel vor zwei Jahren. Bei Unsicherheit ob ein Tag von allen Browser verstanden wird, einfach mal auf folgende Website schauen - http://caniuse.com.

(Übrigens: Die vorgestellten Gliederungselemente werden von allen Browsern erkannt. Sogar dem Internet Explorer 11!)

Wer also vorhat seine Seite zu erneuern oder im großen Stil umzubauen, sollte sich ernsthaft überlegen zu wechseln. Es ist kein allzu großer Schritt, wenn man sich schon mit HTML4 auskennt. Und Anfängern fällt das lernen so auch leichter. So oder so - auf lange Sicht kommt man um HTML5 nicht herum.