HTML Gestaltungsrichtlinie
Ein konsistenter, sauberer und aufgeräumter HTML-Code erleichtert anderen das Lesen und Verstehen Ihres Codes.
Hier finden Sie einige Richtlinien und Tipps zum Erstellen von gutem HTML-Code.
Dokumenttyp immer deklarieren
Deklarieren Sie den Dokumenttyp immer als erste Zeile in Ihrem Dokument.
Der richtige Dokumenttyp für HTML ist:
<!DOCTYPE html>
Verwenden Sie Elementnamen in Kleinbuchstaben
HTML ermöglicht das Mischen von Groß- und Kleinbuchstaben in Elementnamen.
Wir empfehlen jedoch die Verwendung von Elementnamen in Kleinbuchstaben, weil:
- Das Mischen von Groß- und Kleinbuchstaben sieht schlecht aus
- Entwickler verwenden normalerweise Namen in Kleinbuchstaben
- Kleinbuchstaben sehen sauberer aus
- Kleinbuchstaben sind einfacher zu schreiben
Gut:
<body>
<p>This is a paragraph.</p>
</body>
Schlecht:
<BODY>
<P>This is a paragraph.</P>
</BODY>
Schließen Sie alle HTML-Elemente
In HTML müssen Sie nicht alle Elemente schließen (z. B. das Element <p>).
Wir empfehlen jedoch dringend, alle HTML-Elemente wie folgt zu schließen:
Gut:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
Schlecht:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
Verwenden Sie Attributnamen in Kleinbuchstaben
HTML ermöglicht das Mischen von Groß- und Kleinbuchstaben in Attributnamen.
Wir empfehlen jedoch die Verwendung von Attributnamen in Kleinbuchstaben, weil:
- Das Mischen von Groß- und Kleinbuchstaben sieht schlecht aus
- Entwickler verwenden normalerweise Namen in Kleinbuchstaben
- Kleinbuchstaben sehen sauberer aus
- Kleinbuchstaben sind einfacher zu schreiben
Gut:
<a href="https://www.w3schools.com/html/">Besuchen Sie unser HTML-Tutorial</a>
Schlecht:
<a HREF="https://www.w3schools.com/html/">Besuchen Sie unser HTML-Tutorial</a>
Attributwerte immer in Anführungszeichen setzen
HTML erlaubt Attributwerte ohne Anführungszeichen.
Wir empfehlen jedoch die Angabe von Attributwerten, weil:
- Entwickler geben normalerweise Attributwerte an
- Werte in Anführungszeichen sind einfacher zu lesen
- Sie MÜSSEN Anführungszeichen verwenden, wenn der Wert Leerzeichen enthält
Gut:
<table class="striped">
Schlecht:
<table class=striped>
Sehr schlecht:
Dies wird nicht funktionieren, da der Wert Leerzeichen enthält:
<table class=table striped>
Geben Sie immer Alt, Breite und Höhe für Bilder an
Geben Sie für Bilder immer das Attribut alt an. Dieses Attribut ist wichtig, wenn das Bild aus irgendeinem Grund nicht angezeigt werden kann.
Definieren Sie außerdem immer die width und height von Bildern. Dadurch wird das Flackern reduziert, da der Browser vor dem Laden Platz für das Bild reservieren kann.
Gut:
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Schlecht:
<img src="html5.gif">
Leerzeichen und Gleichheitszeichen
HTML erlaubt Leerzeichen um Gleichheitszeichen. Leerzeichen sind jedoch einfacher zu lesen und gruppieren Entitäten besser.
Gut:
<link rel="stylesheet" href="styles.css">
Schlecht:
<link rel = "stylesheet" href = "styles.css">
Vermeiden Sie lange Codezeilen
Bei Verwendung eines HTML-Editors ist es NICHT praktisch, nach rechts und links zu scrollen, um den HTML-Code zu lesen.
Vermeiden Sie zu lange Codezeilen.
Leerzeilen und Einrückungen
Fügen Sie keine Leerzeilen, Leerzeichen oder Einrückungen ohne Angabe von Gründen hinzu.
Fügen Sie zur besseren Lesbarkeit Leerzeilen hinzu, um große oder logische Codeblöcke zu trennen.
Fügen Sie zur besseren Lesbarkeit zwei Leerzeichen zum Einzug hinzu. Verwenden Sie nicht die Tabulatortaste.
Gut:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>
</body>
Schlecht:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>
</body>
Gutes Tischbeispiel:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
Gutes Listenbeispiel:
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
Überspringen Sie niemals das <title>-Element
Das Element <title> ist in HTML erforderlich.
Der Inhalt eines Seitentitels ist entscheidend für die Suchmaschinenoptimierung (SEO)! Der Seitentitel wird von Suchmaschinenalgorithmen verwendet, um die Reihenfolge beim Auflisten von Seiten in Suchergebnissen zu bestimmen.
Das <title>-Element:
- Definieren Sie einen Titel in der Browser-Symbolleiste
- stellt einen Titel für die Seite bereit, wenn sie zu den Favoriten hinzugefügt wird
- zeigt einen Titel für die Seite in den Suchmaschinenergebnissen an
Versuchen Sie also, den Titel so genau und aussagekräftig wie möglich zu gestalten:
<title>HTML-Styleguide und Codierungskonventionen</title>
<html> und <body> weglassen?
Eine HTML-Seite wird ohne die Tags <html> und <body> validiert:
Beispiel
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Try it Yourself »
Wir empfehlen jedoch dringend, immer die Tags <html> und <body> hinzuzufügen!
Das Weglassen von <body> kann in älteren Browsern zu Fehlern führen.
Das Weglassen von <html> und <body> kann auch zum Absturz von DOM- und XML-Software führen.
<head> weglassen?
Das HTML-Tag <head> kann auch weggelassen werden.
Browser fügen alle Elemente vor <body> zu einem Standardelement <head> hinzu.
Beispiel
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
Wir empfehlen jedoch die Verwendung des <head>-Tags.
Leere HTML-Elemente schließen?
In HTML ist es optional, leere Elemente zu schließen.
Erlaubt:
<meta charset="utf-8">
Auch erlaubt:
<meta charset="utf-8" />
Wenn Sie erwarten, dass XML/XHTML-Software auf Ihre Seite zugreift, behalten Sie den schließenden Schrägstrich (/) bei, da dieser in XML und XHTML erforderlich ist.
Fügen Sie das lang-Attribut hinzu
Sie sollten immer das Attribut lang in das Tag <html> einschließen, um die Sprache zu deklarieren der Webseite. Dies soll Suchmaschinen und Browsern helfen.
Beispiel
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
Metadaten
Um eine ordnungsgemäße Interpretation und korrekte Suchmaschinenindizierung sicherzustellen, sollten sowohl die Sprache als auch die Zeichenkodierung <meta charset="charset"> sein so früh wie möglich in einem HTML-Dokument definiert werden:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
Festlegen des Ansichtsfensters
Der Viewport ist der für den Benutzer sichtbare Bereich einer Webseite. Es variiert je nach Gerät – auf einem Mobiltelefon ist es kleiner als auf einem Computerbildschirm.
Sie sollten das folgende <meta>-Element in alle Ihre Webseiten einbinden:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Dadurch erhält der Browser Anweisungen, wie er die Abmessungen und die Skalierung der Seite steuern kann.
Der Teil width=device-width legt die Breite der Seite so fest, dass sie der Bildschirmbreite des Geräts folgt (die je nach Gerät variieren kann).
Der Teil initial-scale=1.0 legt die anfängliche Zoomstufe fest, wenn die Seite zum ersten Mal vom Browser geladen wird.
Hier ist ein Beispiel einer Webseite ohne dem Viewport-Meta-Tag und derselben Webseite mit dem Viewport-Meta-Tag:
Tipp: Wenn Sie diese Seite mit einem Telefon oder Tablet durchsuchen, können Sie auf die beiden Links unten klicken, um den Unterschied zu sehen.
HTML-Kommentare
Kurze Kommentare sollten wie folgt in einer Zeile geschrieben werden:
<!-- Dies ist ein Kommentar -->
Kommentare, die sich über mehr als eine Zeile erstrecken, sollten so geschrieben werden:
<!--
Dies ist ein Beispiel für einen langen Kommentar. Dies ist ein Beispiel für einen langen Kommentar.
Dies ist ein Beispiel für einen langen Kommentar. Dies ist ein Beispiel für einen langen Kommentar.
-->
Lange Kommentare sind leichter zu erkennen, wenn sie mit zwei Leerzeichen eingerückt werden.
Stylesheets verwenden
Verwenden Sie eine einfache Syntax für die Verknüpfung mit Stylesheets (das Attribut type ist nicht erforderlich):
<link rel="stylesheet" href="styles.css">
Kurze CSS-Regeln können wie folgt komprimiert geschrieben werden:
p.intro {font-family:Verdana;font-size:16em;}
Lange CSS-Regeln sollten über mehrere Zeilen geschrieben werden:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
- Platzieren Sie die öffnende Klammer in derselben Zeile wie der Selektor
- Verwenden Sie ein Leerzeichen vor der öffnenden Klammer
- Verwenden Sie zwei Einrückungszeichen
- Verwenden Sie nach jedem Eigenschafts-Wert-Paar ein Semikolon, einschließlich des letzten
- Verwenden Sie Anführungszeichen nur dann um Werte, wenn der Wert Leerzeichen enthält
- Setzen Sie die schließende Klammer in eine neue Zeile, ohne führende Leerzeichen
Laden von JavaScript in HTML
Verwenden Sie eine einfache Syntax zum Laden externer Skripte (das Attribut type ist nicht erforderlich):
<script src="myscript.js">
Zugriff auf HTML-Elemente mit JavaScript
Die Verwendung von „unordentlichem“ HTML-Code kann zu JavaScript-Fehlern führen.
Diese beiden JavaScript-Anweisungen führen zu unterschiedlichen Ergebnissen:
Beispiel
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML = "Hello";
Try it Yourself »
Besuchen Sie den JavaScript styleguide.
Verwenden Sie Dateinamen in Kleinbuchstaben
Einige Webserver (Apache, Unix) achten bei Dateinamen auf die Groß-/Kleinschreibung: Auf „london.jpg“ kann nicht als „London.jpg“ zugegriffen werden.
Andere Webserver (Microsoft, IIS) berücksichtigen nicht die Groß-/Kleinschreibung: Auf „london.jpg“ kann als „London.jpg“ zugegriffen werden.
Wenn Sie eine Mischung aus Groß- und Kleinschreibung verwenden, müssen Sie sich dessen bewusst sein.
Wenn Sie von einem Server, bei dem die Groß-/Kleinschreibung nicht berücksichtigt wird, auf einen Server umsteigen, bei dem die Groß-/Kleinschreibung nicht berücksichtigt wird, können selbst kleine Fehler Ihr Web zerstören!
Um diese Probleme zu vermeiden, verwenden Sie immer Dateinamen in Kleinbuchstaben!
Dateierweiterungen
HTML-Dateien sollten die Erweiterung .html haben (.htm ist zulässig).
CSS-Dateien sollten die Erweiterung .css haben.
JavaScript-Dateien sollten die Erweiterung .js haben.
Unterschiede zwischen .htm und .html?
Es gibt keinen Unterschied zwischen den Dateierweiterungen .htm und .html!
Beide werden von jedem Webbrowser und Webserver als HTML behandelt.
Standarddateinamen
Wenn eine URL am Ende keinen Dateinamen angibt (z. B. „https://www.w3schools.com/“), fügt der Server einfach einen Standarddateinamen hinzu, z. B. „index.html“, „index.htm“. ", "default.html" oder "default.htm".
Wenn Ihr Server nur mit „index.html“ als Standarddateinamen konfiguriert ist, muss Ihre Datei „index.html“ und nicht „default.html“ heißen.
Server können jedoch mit mehr als einem Standarddateinamen konfiguriert werden; normalerweise können Sie so viele Standarddateinamen einrichten, wie Sie möchten.
