HTML(5)-Code-Konventionen

HTML-Code-Konventionen

Viele Webentwickler wissen sehr wenig über HTML-Code-Konventionen.

Von 2000 bis 2010 wechselten viele Webentwickler von HTML zu XHTML.

Entwickler, die XHTML verwendeten, entwickelten nach und nach bessere HTML-Codierungskonventionen.

Für HTML5 sollten wir gute Code-Konventionen ausbilden. Im Folgenden finden Sie einige vorgeschlagene Konventionen.

Verwenden Sie den korrekten Dokumenttyp

Die Dokumenttypdeklaration befindet sich in der ersten Zeile des HTML-Dokuments:

<!DOCTYPE html>

Wenn Sie wie bei anderen Tags Kleinbuchstaben verwenden möchten, können Sie den folgenden Code verwenden:

<!doctype html>

Verwenden Sie Kleinbuchstaben für Elementnamen

HTML5-Elementnamen können Groß- und Kleinbuchstaben verwenden.

Kleinbuchstaben werden empfohlen:

  • Das Mischen von Groß- und Kleinschreibung ist sehr schlecht.
  • Entwickler verwenden normalerweise Kleinbuchstaben (ähnlich wie XHTML).
  • Der Stil in Kleinbuchstaben sieht sauberer aus.
  • Kleinbuchstaben lassen sich leicht schreiben.

Nicht empfohlen:

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

Sehr schlecht:

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

Empfohlen:

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

Alle HTML-Elemente schließen

In HTML5 müssen nicht alle Elemente geschlossen werden (z. B. <p>-Elemente), aber wir empfehlen, jedem Element ein schließendes Tag hinzuzufügen.

Nicht empfohlen:

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

Empfohlen:

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

Leere HTML-Elemente schließen

In HTML5 müssen leere HTML-Elemente ebenfalls nicht geschlossen werden:

Wir können es so schreiben:

<meta charset="utf-8">

Oder so:

<meta charset="utf-8" />

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

Wenn Sie erwarten, dass XML-Software Ihre Seite verwendet, ist die Verwendung dieses Stils sehr gut.

Verwenden Sie Attributnamen in Kleinbuchstaben

HTML5-Attributnamen erlauben Groß- und Kleinbuchstaben.

Wir empfehlen, Attributnamen in Kleinbuchstaben zu verwenden:

  • Groß- und Kleinbuchstaben gleichzeitig zu mischen, ist eine sehr schlechte Angewohnheit.
  • Entwickler verwenden normalerweise Kleinbuchstaben (ähnlich wie XHTML).
  • Der Stil in Kleinbuchstaben sieht sauberer aus.
  • Kleinbuchstaben lassen sich leicht schreiben.

Nicht empfohlen:

<div CLASS="menu">

Empfohlen:

<div class="menu">

Attributwerte

HTML5-Attributwerte müssen keine Anführungszeichen verwenden.

Wir empfehlen, Attributwerte in Anführungszeichen zu setzen:

  • Wenn ein Attributwert Leerzeichen enthält, sind Anführungszeichen erforderlich.
  • Gemischte Stile werden nicht empfohlen; es ist ratsam, konsistent zu bleiben.
  • Die Verwendung von Anführungszeichen für Attributwerte ist leichter zu lesen.

Im folgenden Beispiel enthält der Attributwert Leerzeichen und verwendet keine Anführungszeichen, daher funktioniert es nicht:

<table class=table striped>

Im Folgenden werden doppelte Anführungszeichen verwendet, was korrekt ist:

<table class="table striped">

Bildattribute

Bilder verwenden normalerweise dasalt-Attribut. Wenn das Bild nicht angezeigt werden kann, kann es anstelle des Bildes angezeigt werden.

<img src="html5.gif" alt="HTML5">

Die Definition von Bildabmessungen kann während des Ladens den angegebenen Platz reservieren und Flackern reduzieren.

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

Leerzeichen und Gleichheitszeichen

Leerzeichen können vor und nach dem Gleichheitszeichen verwendet werden.

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

Wir empfehlen jedoch, weniger Leerzeichen zu verwenden:

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

Lange Codezeilen vermeiden

Bei HTML-Editoren ist das seitliche Scrollen durch den Code unpraktisch.

Versuchen Sie, jede Codezeile unter 80 Zeichen zu halten.

Leerzeilen und Einrückung

Fügen Sie nicht ohne Grund Leerzeilen hinzu.

Fügen Sie für jeden logischen Funktionsblock Leerzeilen hinzu, um das Lesen zu erleichtern.

Verwende für Einrückungen zwei Leerzeichen; die Verwendung von TAB wird nicht empfohlen.

Verwende keine unnötigen Leerzeilen und Einrückungen zwischen relativ kurzem Code.

Unnötige Leerzeilen und Einrückungen:

<body>

  <h1>Beispiel</h1>

  <h2>HTML</h2>

  <p>
Zum Beispiel: Was du lernst, ist nicht nur Technologie, sondern auch Träume.
Zum Beispiel: Was du lernst, ist nicht nur Technologie, sondern auch Träume.
Zum Beispiel: Was du lernst, ist nicht nur Technologie, sondern auch Träume,
Zum Beispiel: Was du lernst, ist nicht nur Technologie, sondern auch Träume.
  </p>

</body>

Empfohlen:

<body>

<h1>Beispiel</h1>

<h2></h2>
<p>Zum Beispiel: Was du lernst, ist nicht nur Technologie, sondern auch Träume.
Zum Beispiel: Was du lernst, ist nicht nur Technologie, sondern auch Träume.
Zum Beispiel: Was du lernst, ist nicht nur Technologie, sondern auch Träume.
Zum Beispiel: Was du lernst, ist nicht nur Technologie, sondern auch Träume.</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>

Listenbeispiel:

<ol>
  <li>London</li>
  <li>Paris</li>
  <li>Tokio</li>
</ol>

<html> und <body> weglassen?

Im Standard HTML5 können die <html>- und <body>-Tags weggelassen werden.

Das folgende HTML5-Dokument ist korrekt:

Beispiel:

<!DOCTYPE html>
<head>
  <title>Seitentitel</title>
</head>

<h1>Dies ist eine Überschrift</h1>
<p>Dies ist ein Absatz.</p>

Selbst ausprobieren »

Das Weglassen der <html>- und <body>-Tags wird nicht empfohlen.

Das <html>-Element ist das Wurzelelement des Dokuments und wird verwendet, um die Sprache der Seite zu beschreiben:

<!DOCTYPE html>
<html lang="zh">

Die Angabe der Sprache ist hilfreich für Screenreader und Suchmaschinen.

Das Weglassen von <html> oder <body> führt in DOM- und XML-Software zu Abstürzen.

Das Weglassen von <body> verursacht Fehler in alten Browsern (IE9).

<head> weglassen?

In Standard-HTML5 kann das <head>-Tag weggelassen werden.

Standardmäßig fügen Browser den Inhalt vor <body> einem Standard-<head>-Element hinzu.

Beispiel

<!DOCTYPE html>
<html>
<title>Seitentitel</title>

<body>
  <h1>Dies ist eine Überschrift</h1>
  <p>Dies ist ein Absatz.</p>
</body>

</html>

Selbst ausprobieren »
Note Das Weglassen des head-Tags wird derzeit noch nicht empfohlen.

Metadaten

In HTML5 ist das <title>-Element erforderlich; der Titelname beschreibt das Thema der Seite:

<title>Beispiel-Tutorial</title>

Der Titel und die Sprache können Suchmaschinen schnell das Thema Ihrer Seite verstehen lassen:

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Beispiel-Tutorial</title>
</head>

HTML-Kommentare

Kommentare können in<!--und-->:

<!-- Dies ist ein Kommentar -->

Längere Kommentare können in<!--und-->mit Zeilenumbrüchen geschrieben werden:

<!--
Dies ist ein längerer Kommentar. Dies ist ein längerer Kommentar. Dies ist ein längerer Kommentar.
Dies ist ein längerer Kommentar. Dies ist ein längerer Kommentar. Dies ist ein längerer Kommentar.
-->

Rücken Sie das erste Zeichen eines langen Kommentars um zwei Leerzeichen ein, damit er leichter zu lesen ist.

Stylesheets

Verwenden Sie eine prägnante Syntax für Stylesheets (das type-Attribut ist nicht erforderlich):

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

Kurze Regeln können in einer Zeile geschrieben werden:

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

Lange Regeln können auf mehrere Zeilen geschrieben werden:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Setzen Sie die linke geschweifte Klammer in dieselbe Zeile wie den Selektor.
  • Füge ein Leerzeichen zwischen der linken geschweiften Klammer und dem Selektor ein.
  • Verwende zwei Leerzeichen für die Einrückung.
  • Füge ein Leerzeichen zwischen dem Doppelpunkt und dem Eigenschaftswert ein.
  • Verwende ein Leerzeichen nach Kommas und Symbolen.
  • Verwende ein Semikolon am Ende jeder Eigenschaft und jedes Wertes.
  • Verwende Anführungszeichen nur, wenn Attributwerte Leerzeichen enthalten.
  • Setze die schließende geschweifte Klammer in eine neue Zeile.
  • Jede Zeile sollte nicht mehr als 80 Zeichen enthalten.
Note Das Einfügen eines Leerzeichens nach Kommas und Doppelpunkten ist eine gängige Regel.

JavaScript in HTML laden

Verwende eine prägnante Syntax, um externe Skriptdateien zu laden (das type-Attribut ist nicht erforderlich):

<script src="myscript.js">

Verwenden von JavaScript für den Zugriff auf HTML-Elemente

Schlechte HTML-Formatierung kann zu JavaScript-Ausführungsfehlern führen.

Die folgenden beiden JavaScript-Anweisungen geben unterschiedliche Ergebnisse aus:

Beispiel

var obj = getElementById("Demo")

var obj = getElementById("demo")

Selbst ausprobieren »

Versuchen Sie, konsistente Namenskonventionen für JavaScript in HTML zu verwenden.

Siehe JavaScript Code Conventions。

Verwenden Sie Dateinamen in Kleinbuchstaben

Bei den meisten Webservern (Apache, Unix) wird zwischen Groß- und Kleinschreibung unterschieden: Auf london.jpg kann nicht als London.jpg zugegriffen werden.

Bei anderen Webservern (Microsoft, IIS) wird nicht zwischen Groß- und Kleinschreibung unterschieden: Auf london.jpg kann als London.jpg oder london.jpg zugegriffen werden.

Sie müssen einen konsistenten Stil beibehalten. Wir empfehlen, immer Dateinamen in Kleinbuchstaben zu verwenden.

Dateiendungen

HTML-Dateiendungen können.html(oder.htm) sein).

Die CSS-Dateiendung ist.css 。

Die JavaScript-Dateiendung ist.js 。

Unterschied zwischen .htm und .html

Dateien mit den Endungen .htm und .html sind im Wesentlichen gleich. Browser und Webserver behandeln sie als HTML-Dateien.

Der Unterschied ist:

.htm wurde in frühen DOS-Systemen verwendet, wo Dateiendungen auf drei Zeichen beschränkt waren.

In Unix-Systemen gibt es keine besondere Begrenzung für Dateiendungen, daher wird .html häufig verwendet.

Technischer Unterschied

Wenn eine URL keinen Dateinamen angibt (z. B. http://www.example.com/css/), gibt der Server einen Standarddateinamen zurück. Übliche Standarddateinamen sind index.html, index.htm, default.html und default.htm.

Wenn der Server nur mit "index.html" als Standarddatei konfiguriert ist, müssen Sie die Datei "index.html" nennen, nicht "index.htm".

Server erlauben jedoch normalerweise mehrere Standarddateien, und Sie können die Standarddateinamen nach Bedarf konfigurieren.

In jedem Fall ist die vollständige Erweiterung für HTML ".html".

Weitere Erweiterungen