Jedes HTML-Dokument sollte mit einer Document Type Declaration beginnen:
<!DOCTYPE html>
Damit erkennt der Browser, dass diese Datei ein HTML-Dokument ist und versucht dieses optimal darzustellen. Dieses Tag darf außerdem nur einmal und zwar ganz oben im ganzen Dokument vorkommen!
Ein valides HTML5-Grundgerüst beinhält mindestens die folgenden Elemente.
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> </body> </html>
Der HTML-Tag beinhält anschließend das eigentliche HTML-Dokument. Wobei der Head-Bereich nur Metainformationen und der Body-Bereich alle sichtbaren Elemente des Dokuments beinhält.
Noch besser wäre die Angabe einer Sprache (lang) und weiteren Meta-Informationen im Head-Bereich:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Titel</title> </head> <body> </body> </html>
Man sollte immer die Zeichencodierung festlegen:
<meta charset="utf-8">
Beachte: Wenn man für HTML-Dokumente die Zeichencodierung durch <meta charset=„utf-8“> festlegt, muss man darauf achten, dass sich diese Angabe vollständig innerhalb der ersten 1024 Bytes des Dokuments befindet. Des Weiteren muss das Dokument auch mit dieser Zeichencodierung vom Server ausgeliefert werden, dafür einfacherweise auch in derselben Zeichencodierung abgespeichert sein.
Um zu verhindern, dass Mobilgeräte die gesamte Web-Seite in einer sehr kleinen Ansicht darstellen, kann man eine Viewportangabe einstellen. Ohne Angabe setzen Browser die Breite einer Webseite auf 960px und verkleinern, sodass es in den Viewport passt. So erhält der Nutzer zwar einen Überblick, Text wird aber erst nach dem hineinzoomen lesbar.
Mit folgender Einstellung erreicht man, dass die Seite sich an den Viewport anpasst, aber dennoch ein Skalieren ermöglicht:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
Folgende Angaben sind möglich:
Da hiermit etwas eingestellt wird, das mit der Darstellung zu tun hat, ist eine Metaangabe natürlich nicht ideal. Langfristig wird diese Metaangabe auch entfallen können und statt dessen in CSS erfolgen. Die entsprechende Regel @viewport {} ist aber auch schon wieder zurückgezogen worden.
Man kann dieses meta-Element ohne jegliche Nebenwirkungen für jede Webseite einsetzen, um die Darstellung auf Mobilgeräten zu verbessern. Die Benutzbarkeit und der Komfort werden auf keinen Fall leiden.
Empfehlung: Unterbinde das Zoomen auf Mobilgeräten nicht. Verwende
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In HTML sind insgesamt 6 verschiedene (<h1> bis <h6>) Überschriften definiert
<h1>Wichtig</h1>
definiert die wichtigste und größte Überschrift
<h6>Nicht ganz so wichtig</h6>
definiert die unwichtigste und kleinste Überschrift
Bsp.: Code vs. Browseransicht
HTML Paragraphen werden wie folgt mit <p>Inhalt</p> definiert:
HTML Links werden wie folgt mit <a href=„URL“>Text</a> definiert und verkörpern die Grundidee des Internets.
Dabei ist das Ziel des Links im Attribut href definiert. Attribute beinhalten zusätzliche Informationen für den jeweiligen Tag.
Bilder werden wie folgt mit <img src=„“> definiert:
Das Attribut src beinhaltet wiederum den Pfad der Bildquelle. Das Bild muss dabei im Webverzeichnis des Webservers liegen, damit es angezeigt werden kann.
Das Attribut alt definiert einen alternativen Text, der dann angezeigt wird, wenn das Bild nicht eingeblendet werden kann.
Elemente können auch verschachtelt werden (d.h. ein Element beinhält ein anderes Element).
Z.B.: Das Body-Element beinhaltet viele andere Tags wie <h1>, <p>,.