====== 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 Groß- und Kleinschreibung: Auf "london.jpg" kann nicht als "London.jpg" zugegriffen werden. Andere Webserver (Microsoft, IIS) unterscheiden nicht zwischen Groß- und Kleinschreibung: auf "london.jpg" kann als "London.jpg" zugegriffen werden. Wenn Sie eine Mischung aus Groß- und Kleinbuchstaben verwenden, müssen Sie sich dessen bewusst sein. Wenn Sie von einem Server, der Groß- und Kleinschreibung nicht beachtet, zu einem Server wechseln, der Groß- 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 Groß- und Kleinbuchstaben in Elementnamen. Wir empfehlen jedoch, Elementnamen in Kleinbuchstaben zu verwenden, denn: * Die Vermischung von Groß- 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 Groß- und Kleinbuchstaben in Attributnamen. Wir empfehlen jedoch die Verwendung von Attributnamen in Kleinbuchstaben, denn: * Die Vermischung von Groß- 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 Hochkomma((In den Kursunterlagen verwenden wir Hochkomma, da wir dies von Python gewohnt sind. Sie dürfen auch Anführungszeichen verwenden, nutzen Sie aber immer den gleichen Codingstyle.)) oder Anführungszeichen. Wir empfehlen jedoch, Attributwerte in Hochkomma zu setzen, denn: * Entwickler sind es sich gewohnt Attributwerte in Hochkomma zu setzen * in Hochkomma gesetzte Werte sind leichter zu lesen * Sie MÜSSEN sowieso Hochkomma verwenden, wenn der Wert Leerzeichen enthält **Good:** **Bad:**
**Very Bad:**
==== Alle HTML-Elemente schließen ==== In HTML müssen Sie nicht alle Elemente schließen (zum Beispiel das ''

''-Element). Wir empfehlen jedoch dringend, alle HTML-Elemente zu schließen, 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 außerdem 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 große oder logische Codeblöcke zu trennen. Fügen Sie zur besseren Lesbarkeit zwei Leerzeichen als Einrückung ein. **Hinweis**: Webstorm ersetze 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]]