Optimierung - Tipps, Tricks und Vereinfachungen bei HTML5

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Was kann beim Erstellen von HTML5-Dateien vereinfacht werden?

21Mär2014

Tipps, Tricks und Vereinfachungen bei HTML5


Hier werde ich immer mal wieder ein paar Vereinfachungen bei HTML5 (HyperText Markup Language) vorstellen. Diese kleineren Tipps und Tricks beim Erstellen dieser Webseiten werden hier hintereinander aufgeschrieben und festgehalten.
Zum Beispiel die vereinfachte Schreibweise beim "Doctype", bei einem Zeilenumbruch, bei einer horizontalen Linie und noch vieles mehr.


Optimierungen

  • Der Doctype von HTML5 (HyperText Markup Language) lautet ganz einfach: "<!doctype html>" und sagt dem Browser, dass er in den Standardmodus schalten soll.
  • Die Zeichensatzangabe kann ebenfalls sehr einfach angegeben werden. Sie lautet in HTML5 (HyperText Markup Language): "<meta charset="UTF-8">".
  • Damit die verschiedenen Browser eine Webseite in der Größe der Gerätepixel (Bildschirmauflösung) anzeigen, benötigt man die Angabe des Viewports "<meta name="viewport" content="width=device-width, initial-scale=1">". Mit der Angabe "width=device-width" setzen wir die Breite (width) auf die Bildschirmbreite (device-width) und der Anfangs-Zoom wird mit "initial-scale=1" auf 1 gesetzt. Damit wird die Webseite 1:1 angezeigt und verhindert, dass der Browser versucht die Seite herunter zu skalieren.
  • Beim Einbinden eines Stylesheet darf man auf die Angabe des type-Attributs verzichten. Die vereinfachte Angabe lautet: "<link rel="stylesheet" href="style.css">".
  • Auch beim Einbinden eines JavaScripts (objektorientierte Programmiersprache) kann man auf die Angabe des type-Attributs verzichten. Es reicht dann lediglich die Angabe "<script src="script.js">"</script>".
  • Im "<header>"-Tag sollte sich der Kopf der Webseite und das Logo befinden. Auf diesen Seiten finden sich außerdem die "breadcrumb navigation", die Suchfunktion und das Menü wieder. Wichtig ist hierbei auch die Angabe einer Überschrift, die grundsätzlich für jedes Sektions-Element angegeben werden sollte. Dies ist auch für die Suchmaschinenoptimierung von Bedeutung. Mit dem Outliner-Tool lässt sich schnell überprüfen, ob zu jeder Sektion auf einer Webseite eine korrekte Überschrift angegeben wurde. Wenn nicht, wird an der Stelle ein "Untitled Section" ausgegeben. Sollte eine Überschrift mal keinen Sinn ergeben, kann diese dann mittels CSS (Cascading Style Sheet) versteckt werden.
  • Inhalte, die mit dem "<footer>"-Tag gekennzeichnet sind, haben eher einen beschreibenden Charakter für den Webauftritt. Hier sind unter anderem das letzte Änderungsdatum und der Copyright-Verweis aufgeschrieben.
  • Das "<br>"-Element sollte ausschließlich für Zeilenumbrüche (vom englischen break) genutzt werden. Dieses Element ist leer und musste in XHTML (HyperText Markup Language) durch einen Schrägstrich vor der schließenden Klammer geschlossen werden. Aber in HTML5 (HyperText Markup Language) ist der abschließende Schrägstrich nicht mehr nötig.
  • Das "<hr>"-Element sorgt für eine Trennlinie (vom englischen horizontal ruler - horizontale Linie). Das Element ist ebenfalls leer und in HTML5 (HyperText Markup Language) ist der abschließende Schrägstrich nicht mehr nötig, darf aber wie auch beim "<br>"-Element stehen bleiben.
  • Das "<img>"-Tag ist ein Platzhalter und bildet einen Verweis zu einem Bild in Webseiten. Es erfolgt kein Zeilenumbruch, weil das "<img>"-Tag ein Inlineelement erzeugt. In HTML5 (HyperText Markup Language) kann der abschließende Schrägstrich entfallen.

Zum Seitenanfang springen Λ