HTML5-Style-Richtlinien und Code-Übereinstimmungen

HTML-Codekonventionen

Web-Entwickler sind oft unsicher über die Code-Styles und -Syntax, die sie in HTML verwenden.

Zwischen 2000 und 2010 wechselten viele Web-Entwickler von HTML zu XHTML.

Durch XHTML mussten Entwickler effektives "gut formatiertes" Code schreiben.

HTML5 ist bei der Code-Validierung etwas lockerer.

Durch HTML5 müssen Sie Ihren eigenenBest Practices, Style Guides und Codekonventionen.

Intelligent und zukunftssicher

Die logische Verwendung von Stilen kann es anderen erleichtern, Ihr HTML zu verstehen und zu verwenden.

In Zukunft müssen möglicherweise Programme wie XML-Reader Ihr HTML lesen.

Verwenden Sie eine gut formatierte "quasi-XHTML"-Syntax, um intelligenter zu sein.

Anmerkung:Behalten Sie Ihre Stile immer intelligent, sauber, rein und gut formatiert bei.

Verwenden Sie den richtigen Dokumententyp

Stellen Sie immer die Dokumententypdeklaration am Anfang der Datei ein:

<!DOCTYPE html>

Wenn Sie konsequent kleine Tags verwenden, können Sie:

<!doctype html>

Verwenden Sie kleine Elementnamen

HTML5 ermöglicht die Verwendung von Gross- und Kleinbuchstaben in Elementnamen.

Wir empfehlen, kleine Elementnamen zu verwenden:

  • Mischung aus Gross- und Kleinbuchstaben ist nicht gut
  • Entwickler neigen dazu, kleine Namen zu verwenden (z.B. in XHTML)
  • Kleinbuchstaben erscheinen sauberer
  • Kleinbuchstaben sind einfacher zu schreiben

Nicht so gut:

<SECTION> 
  <p>Dies ist ein Absatz.</p>
</SECTION>

Schlecht:

<Section> 
  <p>Dies ist ein Absatz.</p>
</SECTION>

Nicht schlecht:

<section> 
  <p>Dies ist ein Absatz.</p>
</section>

Alle HTML-Elemente schließen

In HTML5 müssen Sie nicht alle Elemente schließen (z.B. <p>-Elemente).

Wir empfehlen, alle HTML-Elemente zu schließen:

Das sieht schlecht aus:

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

Das sieht gut aus:

<section>
  <p>Dies ist ein Absatz.</p>
  <p>Dies ist ein Absatz.</p>
</section>

Schließen Sie leere HTML-Elemente

In HTML5 ist das Schließen von leeren Elementen optional.

Das ist erlaubt:

<meta charset="utf-8">

Das ist auch erlaubt:

<meta charset="utf-8" />

Der Schrägstrich (/) ist in XHTML und XML obligatorisch.

Wenn Sie erwarten, dass XML-Software Ihre Seite anspricht, ist es eine gute Idee, diese Gewohnheit beizubehalten.

Verwenden Sie Kleinbuchstaben für Attributnamen

HTML5 erlaubt gemischte Groß- und Kleinschreibung für Attributnamen.

Wir empfehlen, Kleinbuchstaben für Attributnamen zu verwenden:

  • Mischung von Attributnamen ist nicht gut
  • Entwickler gewöhnen sich daran, Kleinbuchstaben für Attributnamen zu verwenden (z.B. in XHTML)
  • Kleinbuchstaben für Attributnamen sind rein
  • Kleinbuchstaben für Attributnamen sind einfacher zu schreiben

Das sieht schlecht aus:

<div CLASS="menu">

Das sieht gut aus:

<div class="menu">

Attributwerte in Anführungszeichen

HTML5 erlaubt Attributwerte ohne Anführungszeichen.

Wir empfehlen, Attributwerte in Anführungszeichen zu verwenden:

  • Wenn der Attributwert Werte enthält, müssen Anführungszeichen verwendet werden
  • Mischung von Stilen ist absolut schlecht
  • Wert in Anführungszeichen ist besser lesbar

Dieser Attributwert ist ungültig, da er Leerzeichen enthält:

<table class=table striped>

Das ist gültig:

<table class="table striped">

obligatorische Attribute

Verwenden Sie immer alt Attribute. Dies ist wichtig, wenn das Bild nicht angezeigt werden kann.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Definieren Sie immer die Bildgröße. Dies reduziert das Flackern, da der Browser vor dem Laden des Bildes Platz für das Bild reserviert.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Leerzeichen und Gleichzeichen

Die Leerzeichen auf beiden Seiten des Gleichzeichens sind gültig:

<link rel = "stylesheet" href = "styles.css">

Aber eine Verknappung der Leerzeichen ist lesbarer, But space-less is easier to read, and groups entities better together:

<link rel="stylesheet" href="styles.css">

Vermeiden Sie lange Codezeilen

Es ist unangenehm, HTML-Code mit dem Bildschirm zu scrolle, wenn Sie einen HTML-Editor verwenden.

Versuchen Sie, Codezeilen nicht über 80 Zeichen zu lassen.

Leerzeilen und Einzüge

Vermeiden Sie das unnötige Hinzufügen von Leerzeilen.

Erhöhen Sie die Lesbarkeit, indem Sie Leerzeilen hinzufügen, um große oder logische Codeblöcke zu trennen.

Erhöhen Sie die Lesbarkeit, indem Sie zwei Leerzeichen für den Einzug verwenden. Verwenden Sie keine TABs.

Verwenden Sie keine unnötigen Leerzeilen und Einzüge.

Unnötig:

<body>
  <h1>Bekannte Städte</h1>
  <h2>Tokyo</h2>
  <p>
    Tokyo ist die Hauptstadt Japans, das Zentrum des Greater Tokyo Area,
    und die bevölkerungsreichste Metropolregion der Welt.
    Es ist der Sitz der japanischen Regierung und des kaiserlichen Palastes,
    und die Heimat der japanischen kaiserlichen Familie.
  </p>
</body>

Besser:

<body>
<h1>Bekannte Städte</h1>
<h2>Tokyo</h2>
<p>
Tokyo ist die Hauptstadt Japans, das Zentrum des Greater Tokyo Area,
und die bevölkerungsreichste Metropolregion der Welt.
Es ist der Sitz der japanischen Regierung und des kaiserlichen Palastes,
und die Heimat der japanischen kaiserlichen Familie.
</p>
</body>

Tabellenbeispiel:

<table>
  <tr>
    <th>Name</th>
    <th>Beschreibung</th>
  <tr>
  <tr>
    <td>A</td>
    <td>Beschreibung von A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>Beschreibung von B</td>
  <tr>
</table>

Listenaufzugsbeispiel:

<ol>
  <li>LondonA</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

Wird <html> und <body> weggelassen?

Im HTML5-Standard können sowohl der <html>- als auch der <body>-Tag weggelassen werden.

Der folgende Code wird als HTML5 validiert:

Beispiel

<!DOCTYPE html>
<head>
  <title>Seitenüberschrift</title>
</head>
<h1>Dies ist eine Überschrift.</h1>
<p>Dies ist ein Absatz.</p>

Probieren Sie es selbst aus

Wir empfehlen nicht, die <html>- und <body>-Tags auszulassen.

Das <html>-Element ist der Wurzelelement des Textes. Es ist der ideale Ort, um die Sprache der Seite zu definieren.

<!DOCTYPE html>
<html lang="en-US">

Für zugängliche Anwendungen (Screenreader) und Suchmaschinen ist die Angabe der Sprache wichtig.

Das Auslassen von <html> oder <body> kann zu einem Absturz von DOM- und XML-Software führen.

Das Auslassen von <body> führt in alten Browsern (IE9) zu Fehlern.

Wird <head> weggelassen?

Im HTML5-Standard kann auch der <head>-Tag weggelassen werden.

Standardmäßig fügt der Browser alle Elemente vor dem <body> dem standardmäßigen <head>-Element hinzu.

Durch das Auslassen des <head>-Tags können Sie die Komplexität von HTML reduzieren:

Beispiel

<!DOCTYPE html>
<html>
<title>Seitenüberschrift</title>
<body>
  <h1>Dies ist eine Überschrift.</h1>
  <p>Dies ist ein Absatz.</p>
</body>
</html>

Probieren Sie es selbst aus

Anmerkung:Für Web-Entwickler ist das Auslassen von Tags ungewöhnlich. Die Erstellung von Regeln erfordert Zeit.

Metadaten

Das <title>-Element ist in HTML5 obligatorisch. Erstellen Sie so viele sinnvolle Titel wie möglich.

<title>HTML5 Syntax und Coding Style</title>

Um eine angemessene Interpretation und eine korrekte Suchmaschinenindizierung sicherzustellen, sollte die Definition der Sprache und des Zeichensatzes im Dokument so früh wie möglich erfolgen:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax und Coding Style</title>
</head>

HTML-Kommentar

Kurze Kommentare sollten in einer Zeile geschrieben werden und nach <!-- einen Leerzeichen hinzufügen, und vor --> einen Leerzeichen hinzufügen:

<!-- Dies ist ein Kommentar -->

Lange Kommentare, die über mehrere Zeilen gehen, sollten durch <!-- und --> in unabhängigen Zeilen 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. Dies ist ein Beispiel für einen langen Kommentar. Dies ist ein Beispiel für einen langen Kommentar.
-->

Lange Kommentare sind leichter zu beobachten, wenn sie zwei Leerzeichen eingerückt sind.

Stilblätter

Verwenden Sie eine einfache Syntax, um Style-Sheets zu verknüpfen (das Attribut type ist nicht erforderlich):

<link rel="stylesheet" href="styles.css">

Kurze Regeln können in einer Zeile zusammengefasst werden, wie folgt:

p.into {font-family:"Verdana"; font-size:16em;}

Lange Regeln sollten in Zeilen unterteilt werden:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Öffnende Klammern und Selektoren sind auf einer Zeile
  • Verwenden Sie vor dem Öffnenden Klammer ein Leerzeichen
  • Verwenden Sie zwei Zeichen für den Einzug
  • Verwenden Sie nach jedem Attribut und seinem Wert ein Kolon gefolgt von einem Leerzeichen
  • Verwenden Sie nach jedem Komma oder Semikolon ein Leerzeichen
  • Verwenden Sie nach jedem Attributwertpaar (einschließlich des letzten) ein Semikolon
  • Verwenden Sie Anführungszeichen nur, um Werte mit Leerzeichen zu umgeben
  • Setzen Sie den Schließungsclammer auf eine neue Zeile, ohne davor Leerzeichen zu verwenden
  • Vermeiden Sie es, jede Zeile über 80 Zeichen zu haben

Anmerkung:Nach Komma oder Semikolon ein Leerzeichen hinzufügen, ist eine allgemeine Regel für alle Schreibarten.

JavaScript im HTML laden

Verwenden Sie eine einfache Syntax, um externe Skripte zu laden (das Attribut type ist nicht erforderlich):

<script src="myscript.js">

HTML-Elemente mit JavaScript erreichen

Die Konsequenzen eines "unsauberen" HTML-Stils können zu JavaScript-Fehlern führen.

Diese beiden JavaScript-Anweisungen erzeugen unterschiedliche Ergebnisse:

var obj = getElementById("Demo")
var obj = getElementById("demo")

Probieren Sie es selbst aus

Verwenden Sie, wenn möglich, die gleiche Namenskonvention wie in HTML (wie JavaScript).

Besuchen Sie die JavaScript-Style-Guide.

Verwenden Sie kleine Dateinamen

Die meisten Webserver (Apache, Unix) sind sensibel gegenüber der Groß-/Kleinschreibung von Dateinamen:

Es ist nicht möglich, auf London.jpg zuzugreifen, um London.jpg zu erreichen.

Andere Webserver (Microsoft, IIS) sind unempfindlich gegenüber Groß-/Kleinschreibung:

Es ist möglich, auf London.jpg oder London.jpg zuzugreifen, um London.jpg zu erreichen.

Bei gemischter Groß-/Kleinschreibung müssen Sie eine hohe Konsistenz wahren.

Wenn Sie von einem auf Groß-/Kleinschreibung unempfindlichen Server zu einem auf Groß-/Kleinschreibung sensiblen Server wechseln, werden diese kleinen Fehler Ihre Website ruinieren.

Um diese Probleme zu vermeiden, verwenden Sie immer Dateinamen in Kleinbuchstaben (wenn möglich).

Dateierweiterungen

HTML-Dateinamen sollten die Erweiterung .html(statt .htm)

CSS-Dateien sollten die Erweiterung .css.

JavaScript-Dateien sollten die Erweiterung .js.