HTML -Tutorial

HTML-HOME HTML-Einführung HTML-Editoren HTML-Basis HTML-Elemente HTML-Attribute HTML-Überschriften HTML-Absätze HTML-Stile HTML-Formatierung HTML-Zitate HTML-Kommentare HTML-Farben HTML-CSS HTML-Links HTML-Bilder HTML-Favicon HTML-Tabellen HTML-Listen HTML-Block und Inline HTML-Klassen HTML-ID HTML-Iframes HTML-JavaScript HTML-Dateipfade HTML-Kopf HTML-Layout HTML-responsiv HTML Computercode HTML-Semantik HTML-Styleguide HTML-Entitäten HTML-Symbole HTML-Emojis HTML-Zeichensatz HTML-URL-Codierung HTML vs. XHTML

HTML -Formulare

HTML-Formulare HTML-Formularattribute HTML-Formularelemente HTML-Eingabetypen HTML-Eingabeattribute HTML-Eingabeformularattribute

HTML -Grafiken

HTML-Leinwand HTML-SVG

HTML- Medien

HTML-Medien HTML-Video HTML-Audio HTML-Plugins HTML-YouTube

HTML -APIs

HTML-Geolokalisierung HTML-Drag/Drop HTML-Webspeicher HTML-Webworker HTML-SSE

HTML- Beispiele

HTML-Beispiele HTML-Quiz HTML-Übungen HTML-Zertifikat HTML-Zusammenfassung HTML-Barrierefreiheit

HTML -Referenzen

HTML-Tag-Liste HTML-Attribute Globale HTML-Attribute HTML-Browser-Unterstützung HTML-Ereignisse HTML-Farben HTML-Leinwand HTML-Audio/Video HTML-Doctypes HTML-Zeichensätze HTML-URL-Codierung HTML-Sprachcodes HTTP-Nachrichten HTTP-Methoden PX-zu-EM-Konverter Tastatürkürzel

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 altAttribut 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 widthund heightvon 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 langAttribut 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-widthTeil 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.0Teil 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.