====== LU04a - HTML Styleguide ====== In der Webentwicklung spielt HTML eine zentrale Rolle bei der Strukturierung von Inhalten auf Webseiten. Wie bei jeder Programmiersprache ist es auch hier wichtig, einen konsistenten und effizienten Coding-Stil zu pflegen. In diesem Artikel werden wir einen einheitlichen Coding-Stil für HTML aufzeugen und gute und schlechte Beispiele für HTML-Code präsentieren. ===== Dateinamen in Kleinbuchstaben schreiben ===== Einige Webserver (Apache, Unix) unterscheiden bei Dateinamen zwischen Gross- und Kleinschreibung: Auf "london.jpg" kann nicht als "London.jpg" zugegriffen werden. Andere Webserver (Microsoft, IIS) unterscheiden nicht zwischen Gross- und Kleinschreibung: auf "london.jpg" kann als "London.jpg" zugegriffen werden. Wenn Sie eine Mischung aus Gross- und Kleinbuchstaben verwenden, müssen Sie sich dessen bewusst sein. Wenn Sie von einem Server, der Gross- und Kleinschreibung nicht beachtet, zu einem Server wechseln, der Gross- und Kleinschreibung beachtet, werden selbst kleine Fehler Ihre Applikation zerstören! Um diese Probleme zu vermeiden, sollten Sie Dateinamen immer in Kleinbuchstaben schreiben! ==== Elementnamen in Kleinbuchstaben schreiben ==== HTML erlaubt die Mischung von Gross- und Kleinbuchstaben in Elementnamen. Wir empfehlen jedoch, Elementnamen in Kleinbuchstaben zu verwenden, denn: * Die Vermischung von Gross- und Kleinbuchstaben sieht schlecht aus * Entwickler verwenden normalerweise Kleinbuchstaben * Kleinbuchstaben sehen sauberer aus * Kleinschreibung ist einfacher zu schreiben **Good:**

This is a paragraph.

 **Bad:**

This is a paragraph.

 ==== Kleinbuchstaben für Attributnamen verwenden ==== HTML erlaubt die Mischung von Gross- und Kleinbuchstaben in Attributnamen. Wir empfehlen jedoch die Verwendung von Attributnamen in Kleinbuchstaben, denn: * Die Vermischung von Gross- und Kleinbuchstaben sieht schlecht aus * Entwickler verwenden normalerweise Kleinbuchstaben * Kleinbuchstaben sehen sauberer aus * Kleinschreibung ist einfacher zu schreiben **Good:** Visit our HTML tutorial **Bad:** Visit our HTML tutorial ==== Attributwerte immer in Hochkomma setzen ==== HTML erlaubt Attributwerte ohne Anführungszeichen (double quotes) oder Hochkomma (single quote). Wir empfehlen jedoch, Attributwerte in Anführungszeichen zu setzen, denn: * Entwickler sind es sich gewohnt Attributwerte in Anführungszeichen zu setzen * In Anführungszeichen gesetzte Werte sind leichter zu lesen * Sie **müssen** sowieso Anführungszeichen verwenden, wenn der Wert Leerzeichen enthält **Good:** **Bad:**
**Very Bad:**
==== Alle HTML-Elemente schliessen ==== In HTML müssen Sie nicht alle Elemente schliessen (zum Beispiel das ''

''-Element). Wir empfehlen jedoch dringend, alle HTML-Elemente zu schliessen, etwa so: **Good:**

This is a paragraph.

This is a paragraph.

**Bad:**

This is a paragraph.

This is a paragraph.

==== alt, width und height für Bilder angeben ==== Geben Sie immer das ''alt''-Attribut für Bilder an. Dieses Attribut ist wichtig, wenn das Bild aus irgendeinem Grund nicht angezeigt werden kann. Geben Sie ausserdem immer die Breite ''width'' und Höhe ''height'' von Bildern an. Dies verringert das Flackern, da der Browser vor dem Laden Platz für das Bild reservieren kann. **Good:** HTML5 **Bad:** ==== Leerzeichen und Gleichheitszeichen ==== HTML erlaubt Leerzeichen um Gleichheitszeichen. Ein Text ohne Leerzeichen ist jedoch leichter zu lesen und gruppiert Einheiten besser zusammen. **Good:** **Bad:** ==== Vermeiden Sie lange Codezeilen ==== Wenn Sie einen HTML-Editor verwenden, ist es NICHT bequem, nach rechts und links zu scrollen, um den HTML-Code zu lesen. Versuchen Sie, zu lange Codezeilen zu vermeiden. ==== Leerzeilen und Einrückungen ==== Fügen Sie keine Leerzeilen, Leerzeichen oder Einrückungen ohne Grund ein. Fügen Sie zur besseren Lesbarkeit Leerzeilen ein, um grosse oder logische Codeblöcke zu trennen. Fügen Sie zur besseren Lesbarkeit zwei Leerzeichen als Einrückung ein. **Hinweis**: Webstorm ersetzt je nach Einstellung einen Tabulator automatisch mit Leerzeichen **Good:**

Famous Cities

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

London

London is the capital city of England. It is the most populous city in the United Kingdom.

Paris

Paris is the capital of France. The Paris area is one of the largest population centers in Europe.

 **Bad:**

Famous Cities

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

London

London is the capital city of England. It is the most populous city in the United Kingdom.

Paris

Paris is the capital of France. The Paris area is one of the largest population centers in Europe.

 **Good Table Example:**
Name Description
A Description of A
B Description of B
**Good List Example:**
  • London
  • Paris
  • Tokyo
 ==== -Element immer angeben==== Das ''<title>''-Element ist in HTML erforderlich. Der Inhalt eines Seitentitels ist sehr wichtig für die Suchmaschinenoptimierung (SEO)! Der Seitentitel wird von den Algorithmen der Suchmaschinen verwendet, um die Reihenfolge bei der Auflistung der Seiten in den Suchergebnissen zu bestimmen. Das ''<title>''-Element: * definiert einen Titel in der Browser-Symbolleiste * liefert einen Titel für die Seite, wenn sie zu den Favoriten hinzugefügt wird * zeigt einen Titel für die Seite in den Suchergebnissen der Suchmaschinen an * Versuchen Sie also, den Titel so genau und aussagekräftig wie möglich zu gestalten: <WRAP center round box 60%> <code html4strict> <title>HTML Style Guide and Coding Conventions ==== HTML-Kommentare==== Kurze Kommentare sollten in einer Zeile geschrieben werden, etwa so: Kommentare, die sich über mehr als eine Zeile erstrecken, sollten wie folgt geschrieben werden: Lange Kommentare sind besser zu erkennen, wenn sie mit zwei Leerzeichen eingerückt sind. ---- {{tag>m293-LU04 m293-H2G m293-H2F}} Frei nach den Beispielen von [[https://www.w3schools.com|w3school]]