HTML -Styleguide
Ein konsistenter, sauberer und aufgeräumter HTML-Code erleichtert es anderen, Ihren Code zu lesen und zu verstehen.
Hier sind einige Richtlinien und Tipps zum Erstellen von gutem HTML-Code.
Dokumenttyp immer deklarieren
Deklarieren Sie den Dokumententyp immer als erste Zeile in Ihrem Dokument.
Der richtige Dokumenttyp für HTML ist:
<!DOCTYPE html>
Verwenden Sie Elementnamen in Kleinbuchstaben
HTML erlaubt das Mischen von Groß- und Kleinbuchstaben in Elementnamen.
Wir empfehlen jedoch, Elementnamen in Kleinbuchstaben zu verwenden, da:
- Das Mischen von Groß- und Kleinbuchstaben sieht schlecht aus
- Entwickler verwenden normalerweise 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 (zB das <p>
Element) schließen.
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 erlaubt das Mischen von Groß- und Kleinbuchstaben in Attributnamen.
Wir empfehlen jedoch, Attributnamen in Kleinbuchstaben zu verwenden, da:
- Das Mischen von Groß- und Kleinbuchstaben sieht schlecht aus
- Entwickler verwenden normalerweise Kleinbuchstaben
- Kleinbuchstaben sehen sauberer aus
- Kleinbuchstaben sind einfacher zu schreiben
Gut:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Schlecht:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Attributwerte immer in Anführungszeichen setzen
HTML erlaubt Attributwerte ohne Anführungszeichen.
Wir empfehlen jedoch, Attributwerte in Anführungszeichen zu setzen, weil:
- Entwickler zitieren normalerweise Attributwerte
- Angegebene Werte 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 das alt
Attribut für Bilder immer an. Dieses Attribut ist wichtig, wenn das Bild aus irgendeinem Grund nicht angezeigt werden kann.
Definieren Sie außerdem immer das 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. Aber leerzeichenlos ist einfacher zu lesen und gruppiert Entitäten besser zusammen.
Gut:
<link rel="stylesheet" href="styles.css">
Schlecht:
<link
rel = "stylesheet" href = "styles.css">
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 hinzu.
Fügen Sie aus Gründen der Lesbarkeit Leerzeilen hinzu, um große oder logische Codeblöcke zu trennen.
Fügen Sie zur besseren Lesbarkeit zwei Einrückungen 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.
It is the
seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</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.
It is the
seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>
Gutes Tabellenbeispiel:
<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>
Beispiel für eine gute Liste:
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
Überspringen Sie niemals das <title>-Element
Das <title>
Element ist in HTML erforderlich.
Der Inhalt eines Seitentitels ist sehr wichtig für die Suchmaschinenoptimierung (SEO)! Der Seitentitel wird von Suchmaschinenalgorithmen verwendet, um die Reihenfolge beim Auflisten von Seiten in den Suchergebnissen festzulegen.
Das <title>
Element:
- definiert einen Titel in der Symbolleiste des Browsers
- 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
Style Guide and Coding Conventions</title>
Auslassen von <html> und <body>?
Eine HTML-Seite wird ohne die Tags <html>
und
validiert:<body>
Beispiel
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Wir empfehlen jedoch dringend, immer die Tags <html>
und
hinzuzufügen <body>
!
Das Weglassen <body>
kann in älteren Browsern zu Fehlern führen.
Das Weglassen
kann auch DOM- und XML-Software zum Absturz <html>
bringen .<body>
<Kopf> weglassen?
Das HTML-<head>-Tag kann auch weggelassen werden.
Browser fügen alle Elemente vor <body>
, zu einem Standardelement hinzu <head>
.
Beispiel
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Wir empfehlen jedoch die Verwendung des <head>
Tags.
Leere HTML-Elemente schließen?
In HTML ist es optional, leere Elemente zu schließen.
Dürfen:
<meta
charset="utf-8">
Ebenfalls erlaubt:
<meta charset="utf-8" />
Wenn Sie erwarten, dass XML/XHTML-Software auf Ihre Seite zugreift, behalten Sie den abschließenden Schrägstrich (/) bei, da er in XML und XHTML erforderlich ist.
Fügen Sie das lang-Attribut hinzu
Sie sollten das lang
Attribut immer in das <html>
Tag einfügen, um die Sprache der Webseite anzugeben. 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>
Metadaten
Um eine korrekte Interpretation und korrekte Suchmaschinenindexierung zu gewährleisten, sollten sowohl die Sprache als auch die Zeichenkodierung so früh wie möglich in einem HTML-Dokument definiert werden:<meta charset="charset">
<!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 - es ist auf einem Mobiltelefon kleiner als auf einem Computerbildschirm.
Sie sollten das folgende <meta>
Element in alle Ihre Webseiten aufnehmen:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Dadurch erhält der Browser Anweisungen zum Steuern der Seitenabmessungen und -skalierung.
Der width=device-width
Teil legt die Breite der Seite so fest, dass sie der Bildschirmbreite des Geräts folgt (die je nach Gerät unterschiedlich ist).
Das initial-scale=1.0
Teil legt die anfängliche Zoomstufe fest, wenn die Seite zum ersten Mal vom Browser geladen wird.
Hier ist ein Beispiel für eine Webseite ohne das Viewport-Meta-Tag und dieselbe 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:
<!-- This is a comment -->
Kommentare, die sich über mehr als eine Zeile erstrecken, sollten so geschrieben werden:
<!--
This is a long comment example. This is
a long comment example.
This is a
long comment example. This is a long comment example.
-->
Lange Kommentare sind leichter zu erkennen, wenn sie mit zwei Leerzeichen eingerückt sind.
Verwendung von Stylesheets
Use simple syntax for linking to style sheets (the
type
attribute is not necessary):
<link rel="stylesheet" href="styles.css">
Short CSS rules can be written compressed, like this:
p.intro {font-family:Verdana;font-size:16em;}
Long CSS rules should be written over multiple lines:
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}
- Place the opening bracket on the same line as the selector
- Use one space before the opening bracket
- Use two spaces of indentation
- Use semicolon after each property-value pair, including the last
- Only use quotes around values if the value contains spaces
- Place the closing bracket on a new line, without leading spaces
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the
type
attribute is not necessary):
<script src="myscript.js">
Accessing HTML Elements with JavaScript
Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:
Example
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML
= "Hello";
Visit the JavaScript Style Guide.
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".
If you use a mix of uppercase and lowercase, you have to be aware of this.
If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!
To avoid these problems, always use lowercase file names!
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences Between .htm and .html?
There is no difference between the .htm and .html file extensions!
Both will be treated as HTML by any web browser and web server.
Default Filenames
When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".
If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".
However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.