Webseite auf HTML 5 Doctype umstellen – so geht’s

veröffentlicht:

aktualisiert:

Doctype in html5

Falls noch jemand einen älteren Doctype laufen hat, hier erkläre ich , wie man ganz einfach seine Seite auf HTML 5 umstellt.

Im Prinzip sind da nur die ersten beiden Zeilen zu ändern.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

egal, welche Version man noch laufen hat, so heißt es nun nur mehr

<!DOCTYPE html>
<html lang="de">  Hier die eigene Sprache einsetzen, bei mir eben de

Und  aus :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

wird

 <meta charset="utf-8">

Damit ist der Doctype auf  HTML 5 umgestellt.
Alles andere kann sogar bleiben, bzw. wird ebenfalls korrekt gelesen.

So sieht‘ s aus:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">	
	<title>PAGE TITLE</title>
	<!--[if lt IE 9]><script src="js/html5shiv-printshiv.js" 
           media="all"></script><![endif]-->
</head>
<body>
	<!-- This is a VERY bare bones version of a HTML5 template! -->
</body>
</html>

Quelle: html5bones
d
WOZU BRAUCHE ICH DIE SEMANTIK ?

Wer eine Webseite nur im Frontend ansieht, wird kaum einen Unterschied merken. Die Browser können im Prinzip alles lesen und geben es auch korrekt aus. Inzwischen auch eben HTML 5.

Wichtig ist allerdings eine gute Semantik für die Suchmaschinen. Diese “ tun sich leichter “ beim lesen, wenn der Quelltext korrekt „ausgezeichnet“ ist.

In HTML5 sind neue Tags hinzugekommen. Die wichtigsten, für eine einfache HTML5 Seite:

<header></header>     statt < div id=“header“ ></div>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>

und neu noch das
<main></main>

Während eine id nur einmal zu verwenden ist, kann mann z.B. <footer></footer> so oft verwenden, wie man möchte.

 

TIPP:

Es ist nicht semantisch zwingend, alle diese HTML 5 Tags zu verwenden.
Wer nur eine einfache Webseite gestaltet, der arbeitet auch dann semantisch korrekt, wenn er für seine Einteilung <div> Abschnitte verwendet.
Wurden die <div> Elemente ja ursprünglich erfunden

“ Für die Gruppierung zusammengehörender Inhalte, welche keine zusätzliche Bedeutung erhalten sollen. “ Zitat self.html

Weiters :

“ Wie immer ist die Präsentation des Inhaltes der Bedeutung desselben untergeordnet.“

Zitat self.html

Was so viel bedeutet, wie – m.E. – im Vordergrund steht der Inhalt , die Semantik folgt danach. So gut wie es geht und so viel wie möglich..

 

Wer sich generell über alle Doctypes informieren möchte – hier gibt es bei mediaevent eine wirklich tolle Übersicht.

FAZIT:

Einfach einmal mit HTML5 anfangen, ist die Desive. Wer den Doctype hat, ist mit dabei. Stück für Stück in die Praxis umsetzen, ist der beste Weg.
Hierzu ein empfehlenswertes Buch, was sowohl gekauft, als auch einfach kostenlos als pdf downgeloadet werden kann:

HTML5 Up and Running by Mark Pilgrim

 

GLOSSAR:
Semantik:

HTML ist eine Auszeichnunssprache, keine Programmiersprache. Sie beschreibt die einzelnen Teile eines Dokumentes. HTML enthält dafür Befehle zum Auszeichnen z.b. von Überschriften , Listen, Grafiken etc. Diese Auszeichnungen werden von den unterschiedlichen Browsern gelesen, ausgewertet und am Bildschirm sichtbar gemacht.

 

WEITERFÜHRENDE LINKS:

 

Blogartikel von mediendesign-quer. WordPress, Webdesign, Social Media .. Alle Neuigkeiten erfahren >> Werde Fan auf Facebook

Veröffentlicht in Kategorie:

Top