Grundlegende HTML-Syntax

HTML (HyperText Markup Language) ist eine Auszeichnungssprache, die Webbrowsern mitteilt, wie die von Ihnen besuchten Webseiten strukturiert werden sollen. Es kann so kompliziert oder einfach sein, wie der Webentwickler es möchte. HTML besteht aus einer Reihe von Elementen, die Sie verwenden, um verschiedene Teile des Inhalts einzuschließen, zu umschließen oder auszuzeichnen, um sie in einer bestimmten Weise erscheinen oder agieren zu lassen. Die umschließenden Tags können Inhalte in einen Hyperlink verwandeln, um zu einer anderen Seite zu verbinden, oder Wörter kursiv darstellen, und so weiter. Betrachten Sie zum Beispiel die folgende Textzeile:

My cat is very grumpy

Wenn wir möchten, dass der Text für sich allein steht, könnten wir spezifizieren, dass es sich um einen Absatz handelt, indem wir ihn in ein Absatz- (<p>) Element einschließen:

<p>My cat is very grumpy</p>

Lassen Sie uns unser Absatz-Element aus dem vorherigen Abschnitt näher betrachten:

Die Anatomie unseres Elements ist:

• Der öffnende Tag: Dieser besteht aus dem Namen des Elements (in diesem Beispiel p für paragraph), eingeschlossen in öffnende und schließende spitze Klammern. Dieser öffnende Tag markiert, wo das Element beginnt oder zu wirken beginnt. In diesem Beispiel geht es dem Anfang des Absatztextes voraus.
• Der Inhalt: Dies ist der Inhalt des Elements. In diesem Beispiel ist es der Absatztext.
• Der schließende Tag: Dies ist dasselbe wie der öffnende Tag, außer dass es einen Schrägstrich vor dem Elementnamen enthält. Dies markiert, wo das Element endet. Das Fehlen eines schließenden Tags ist ein häufiger Anfängerfehler, der seltsame Ergebnisse hervorrufen kann.

Das Element besteht aus dem öffnenden Tag, gefolgt von Inhalt, gefolgt von dem schließenden Tag.

Bearbeiten Sie die Zeile unten im "Bearbeitbaren Code"-Bereich, indem Sie sie mit den Tags <em> und </em>. umschließen. Um das Element zu öffnen, setzen Sie den öffnenden Tag <em> am Anfang der Zeile. Um das Element zu schließen, setzen Sie den schließenden Tag </em> am Ende der Zeile. Dadurch sollte die Zeile eine kursive Textformatierung erhalten! Sehen Sie Ihre Änderungen live im Ausgabe-Bereich.

Wenn Sie einen Fehler machen, können Sie Ihre Arbeit mit der Zurücksetzen-Taste löschen. Wenn Sie wirklich feststecken, drücken Sie die Lösung anzeigen-Taste, um die Antwort zu sehen.

<h2>Live output</h2>
<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%">
  This is my text.
</textarea>

<div class="controls">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution = "<em>This is my text.</em>";
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Elemente können innerhalb anderer Elemente platziert werden. Dies wird als Verschachtelung bezeichnet. Wenn wir sagen wollten, dass unser Kater sehr grummelig ist, könnten wir das Wort sehr in ein <strong>-Element einschließen, was bedeutet, dass das Wort eine stärkere Textformatierung haben soll:

<p>My cat is <strong>very</strong> grumpy.</p>

Es gibt einen richtigen und einen falschen Weg, um Verschachtelungen durchzuführen. Im obigen Beispiel haben wir zuerst das p-Element geöffnet, dann das strong-Element. Für eine richtige Verschachtelung sollten wir zuerst das strong-Element schließen, bevor wir das p-Element schließen.

Das folgende ist ein Beispiel für den falschen Weg der Verschachtelung:

<p>My cat is <strong>very grumpy.</p></strong>

Die Tags müssen so geöffnet und geschlossen werden, dass sie innerhalb oder außerhalb voneinander sind. Mit der Art von Überlappung im obigen Beispiel muss der Browser Ihre Absicht erraten. Diese Art von Raten kann zu unerwarteten Ergebnissen führen.

Nicht alle Elemente folgen dem Muster eines öffnenden Tags, Inhalts und eines schließenden Tags. Einige Elemente bestehen aus einem einzigen Tag, der typischerweise verwendet wird, um etwas in das Dokument einzufügen/einzubetten. Solche Elemente werden leere Elemente genannt. Zum Beispiel bettet das <img>-Element eine Bilddatei auf einer Seite ein:

<img
  src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"
  alt="Firefox icon" />

Dies würde das folgende ausgeben:

Elemente können auch Attribute haben. Attribute sehen so aus:

Attribute enthalten zusätzliche Informationen über das Element, die nicht im Inhalt erscheinen. In diesem Beispiel ist das class-Attribut ein identifizierender Name, der verwendet wird, um das Element mit Stilinformationen zu versehen.

Ein Attribut sollte haben:

• Einen Abstand zwischen ihm und dem Elementnamen. (Bei einem Element mit mehr als einem Attribut sollten die Attribute ebenfalls durch Leerzeichen getrennt werden.)
• Den Attributnamen, gefolgt von einem Gleichheitszeichen.
• Einen Attributwert, eingeschlossen in Anführungszeichen.

Das <img>-Element kann eine Reihe von Attributen annehmen, einschließlich:

src

Das src-Attribut ist ein erforderliches Attribut, das den Speicherort des Bildes angibt. Zum Beispiel: src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png".

alt

Das alt-Attribut gibt eine Textbeschreibung des Bildes an. Zum Beispiel: alt="Das Firefox-Symbol".

width

Das width-Attribut gibt die Breite des Bildes an, wobei die Maßeinheit Pixel ist. Zum Beispiel: width="300".

height

Das height-Attribut gibt die Höhe des Bildes an, wobei die Maßeinheit Pixel ist. Zum Beispiel: height="300".

Bearbeiten Sie die Zeile unten im Input-Bereich, um sie in ein Bild zu konvertieren.

1. Finden Sie Ihr Lieblingsbild online, klicken Sie mit der rechten Maustaste darauf, und klicken Sie auf Bildlink/-adresse kopieren.
2. Fügen Sie im Bereich unten das src-Attribut hinzu und füllen Sie es mit dem Link aus Schritt 1.
3. Setzen Sie das alt-Attribut.
4. Fügen Sie die Attribute width und height hinzu.

Sie können Ihre Änderungen live im Output-Bereich sehen.

Wenn Sie einen Fehler machen, können Sie es immer mit der Zurücksetzen-Taste zurücksetzen. Wenn Sie wirklich feststecken, drücken Sie die Lösung anzeigen-Taste, um die Antwort zu sehen.

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 100px;width: 95%">
&lt;img alt="I should be an image" &gt;
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  '<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" alt="Firefox icon" width="100" height="100" />';
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Manchmal sehen Sie Attribute ohne Werte. Das ist völlig akzeptabel. Sie werden boolesche Attribute genannt. Wenn ein boolesches Attribut ohne Wert, oder mit irgendeinem Wert, sogar wie "false" geschrieben wird, ist das boolesche Attribut immer wahr. Andernfalls, wenn das Attribut nicht in einem HTML-Tag geschrieben ist, ist das Attribut falsch. Die Spezifikation erfordert, dass der Wert des Attributs entweder die leere Zeichenfolge (einschließlich wenn das Attribut keinen explizit angegebenen Wert hat) oder derselbe wie der Attributname ist, aber andere Werte funktionieren genauso. Zum Beispiel betrachten Sie das disabled-Attribut, das Sie Formulareingabeelementen zuweisen können. (Sie verwenden dies, um die Formulareingabeelemente zu deaktivieren, sodass der Benutzer keine Eingaben machen kann. Die deaktivierten Elemente haben typischerweise ein ausgegrautes Erscheinungsbild.) Zum Beispiel:

<input type="text" disabled="disabled" />

Als Abkürzung ist es akzeptabel, dies wie folgt zu schreiben:

<!-- using the disabled attribute prevents the end user from entering text into the input box -->
<input type="text" disabled />

<!-- text input is allowed, as it doesn't contain the disabled attribute -->
<input type="text" />

Zur Orientierung enthält das obige Beispiel auch ein nicht deaktiviertes Formulareingabeelement. Der HTML-Code aus dem obigen Beispiel erzeugt dieses Ergebnis:

Wenn Sie sich den Code vieler anderer Seiten ansehen, stoßen Sie möglicherweise auf eine Reihe ungewöhnlicher Markup-Stile, einschließlich Attributwerte ohne Anführungszeichen. Dies ist unter bestimmten Umständen erlaubt, kann jedoch auch Ihren Markup unter anderen Umständen brechen. Das Element im folgenden Codeschnipsel, <a>, wird Anker genannt. Anker umschließen Text und verwandeln ihn in Links. Das href-Attribut gibt die Webadresse an, auf die der Link verweist. Sie können diese grundlegende Version unten schreiben, mit nur dem href-Attribut, so:

<a href=https://www.mozilla.org/>favorite website</a>

Anker können auch ein title-Attribut haben, eine Beschreibung der verlinkten Seite. Sobald wir jedoch in der gleichen Weise wie das href-Attribut das title hinzufügen, gibt es Probleme:

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>

Wie oben geschrieben, missinterpretiert der Browser das Markup, indem er das title-Attribut für drei Attribute hält: ein title-Attribut mit dem Wert The, und zwei boolesche Attribute, Mozilla und homepage. Offensichtlich ist dies nicht beabsichtigt! Es wird zu Fehlern oder unerwartetem Verhalten führen, wie im folgenden Live-Beispiel zu sehen ist. Versuchen Sie, über den Link zu fahren, um den Titeltext anzuzeigen!

Schließen Sie immer die Attributanführungszeichen ein. Das vermeidet solche Probleme und führt zu lesbarerem Code.

In diesem Artikel werden Sie auch feststellen, dass die Attribute in doppelte Anführungszeichen eingeschlossen sind. Sie könnten jedoch in einigen HTML-Codes einzelne Anführungszeichen sehen. Dies ist eine Frage des Stils. Sie können wählen, welche Sie bevorzugen. Beide dieser Zeilen sind gleichwertig:

<a href='https://www.example.com'>A link to my example.</a>

<a href="https://www.example.com">A link to my example.</a>

Achten Sie darauf, einzelne Anführungszeichen und doppelte Anführungszeichen nicht zu mischen. Dieses Beispiel (unten) zeigt eine Art von Mischform, die schiefgehen wird:

<a href="https://www.example.com'>A link to my example.</a>

Wenn Sie jedoch eine Art von Anführungszeichen verwenden, können Sie die andere Art von Anführungszeichen innerhalb Ihrer Attributwerte einschließen:

<a href="https://www.example.com" title="Isn't this fun?">
  A link to my example.
</a>

Um Anführungszeichen innerhalb anderer Anführungszeichen des gleichen Typs (einzelne Anführungszeichen oder doppelte Anführungszeichen) zu verwenden, verwenden Sie Zeichenreferenzen. Zum Beispiel wird dies nicht funktionieren:

<a href="https://www.example.com" title="An "interesting" reference">A link to my example.</a>

Stattdessen müssen Sie dies tun:

<a href="https://www.example.com" title="An &quot;interesting&quot; reference">A link to my example.</a>

Individuelle HTML-Elemente sind alleine nicht sehr nützlich. Als nächstes werfen wir einen Blick darauf, wie einzelne Elemente kombiniert werden, um eine gesamte HTML-Seite zu bilden:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

Hier haben wir:

1. <!doctype html>: Der Doctype. Als HTML jung war (1991-1992), sollten Doctypes als Links zu einer Reihe von Regeln fungieren, denen die HTML-Seite folgen musste, um als gutes HTML zu gelten. Doctypes sahen früher etwa so aus:

   html

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   

   In jüngerer Zeit ist der Doctype ein historisches Relikt, das enthalten sein muss, damit alles andere richtig funktioniert. <!doctype html> ist die kürzeste Zeichenkette, die als gültiger Doctype zählt. Das ist alles, was Sie wissen müssen!

2. <html></html>: Das <html>-Element. Dieses Element umschließt den gesamten Inhalt auf der Seite. Es wird manchmal als Wurzelelement bezeichnet.

3. <head></head>: Das <head>-Element. Dieses Element fungiert als Container für alles, was Sie auf der HTML-Seite aufnehmen möchten, was nicht der Inhalt ist, den die Seite den Betrachtern zeigt. Dazu gehören Schlüsselwörter und eine Seitenbeschreibung, die in Suchergebnissen erscheinen würde, CSS zur Stilisierung der Inhalte, Zeichensatzdeklarationen und mehr. Sie lernen mehr darüber im nächsten Artikel der Serie.

4. <meta charset="utf-8">: Das <meta>-Element. Dieses Element stellt Metadaten dar, die nicht durch andere HTML-Meta-bezogene Elemente wie <base>, <link>, <script>, <style> oder <title> dargestellt werden können. Das charset-Attribut spezifiziert die Zeichenkodierung für Ihr Dokument als UTF-8, das die meisten Zeichen aus dem überwiegenden Teil der von Menschen geschriebenen Sprachen umfasst. Mit dieser Einstellung kann die Seite jetzt jeden Textinhalt verarbeiten, den sie möglicherweise enthält. Es gibt keinen Grund, dies nicht zu setzen, und es kann helfen, einige Probleme später zu vermeiden.

5. <title></title>: Das <title>-Element. Dies setzt den Titel der Seite, was der Titel ist, der im Browser-Tab erscheint, in dem die Seite geladen ist. Der Seitentitel wird auch verwendet, um die Seite zu beschreiben, wenn sie als Lesezeichen gesetzt wird.

6. <body></body>: Das <body>-Element. Dies enthält alle Inhalte, die auf der Seite angezeigt werden, einschließlich Text, Bilder, Videos, Spiele, abspielbare Audiospuren oder was auch immer.

Wenn Sie experimentieren möchten, indem Sie einige HTML auf Ihrem lokalen Computer schreiben, können Sie:

1. Kopieren Sie das oben aufgeführte HTML-Seitenbeispiel.
2. Erstellen Sie eine neue Datei in Ihrem Texteditor.
3. Fügen Sie den Code in die neue Textdatei ein.
4. Speichern Sie die Datei als index.html.

Sie können diese Datei jetzt in einem Webbrowser öffnen, um zu sehen, wie der gerenderte Code aussieht. Bearbeiten Sie den Code und aktualisieren Sie den Browser, um zu sehen, was das Ergebnis ist. Zunächst sieht die Seite etwa so aus:

In dieser Übung können Sie den Code lokal auf Ihrem Computer bearbeiten, wie zuvor beschrieben, oder Sie können ihn im Beispielfenster unten bearbeiten (das bearbeitbare Beispielfenster stellt nur den Inhalt des <body>-Elements dar, in diesem Fall). Schärfen Sie Ihre Fähigkeiten, indem Sie die folgenden Aufgaben durchführen:

• Fügen Sie direkt unter dem öffnenden Tag des <body>-Elements einen Haupttitel für das Dokument hinzu. Dieser sollte in einem <h1>-Tag beginnen und mit einem </h1>-Tag schließen.
• Bearbeiten Sie den Absatzinhalt, um Text über ein Thema einzuschließen, das Sie interessant finden.
• Heben Sie wichtige Wörter fett hervor, indem Sie sie in einem <strong>-Tag öffnen und mit einem </strong>-Tag schließen.
• Fügen Sie Ihrem Absatz einen Link hinzu, wie früher im Artikel erklärt.
• Fügen Sie Ihrem Dokument ein Bild hinzu. Platzieren Sie es unter dem Absatz, wie früher im Artikel erklärt. Verdienen Sie Bonuspunkte, wenn es Ihnen gelingt, auf ein anderes Bild zu verlinken (entweder lokal auf Ihrem Computer oder irgendwo anders im Web).

Wenn Sie einen Fehler machen, können Sie es immer mit der Zurücksetzen-Taste zurücksetzen. Wenn Sie wirklich feststecken, drücken Sie die Lösung anzeigen-Taste, um die Antwort zu sehen.

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 100px;width: 95%">
  &lt;p&gt;This is my page&lt;/p&gt;
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h1 {
  color: blue;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

img {
  max-width: 100%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  '<h1>Some music</h1><p>I really enjoy <strong>playing the drums</strong>. One of my favorite drummers is Neal Peart, who plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>. My favorite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p> <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg" alt="Rush Moving Pictures album cover">';
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

In den obigen Beispielen haben Sie vielleicht bemerkt, dass viel Leerraum im Code enthalten ist. Dieser ist optional. Diese beiden Codeschnipsel sind gleichwertig:

<p id="noWhitespace">Dogs are silly.</p>

<p id="whitespace">Dogs
    are
        silly.</p>

Unabhängig davon, wie viel Leerraum Sie innerhalb des HTML-Elementinhalts verwenden (was ein oder mehrere Leerzeichen, aber auch Zeilenumbrüche umfassen kann), reduziert der HTML-Parser jede Leerraumsequenz auf ein einziges Leerzeichen, wenn der Code gerendert wird. Warum also so viel Leerraum verwenden? Die Antwort ist Lesbarkeit.

Es kann einfacher sein, zu verstehen, was in Ihrem Code passiert, wenn dieser schön formatiert ist. In unserem HTML haben wir jede verschachtelte Ebene um zwei Leerzeichen mehr eingerückt als die vorherige. Es liegt an Ihnen, den Formatierungsstil (wie viele Leerzeichen für jede Einrückungsebene, zum Beispiel) zu wählen, aber Sie sollten darüber nachdenken, es zu formatieren.

Sehen wir uns an, wie der Browser die beiden Absätze oben mit und ohne Leerzeichen rendert:

const noWhitespace = document.getElementById("noWhitespace").innerHTML;
console.log(noWhitespace);
// "Dogs are silly."

const whitespace = document.getElementById("whitespace").innerHTML;
console.log(whitespace);
// "Dogs
//    are
//        silly."

In HTML sind die Zeichen <, >, ", ', und & Sonderzeichen. Sie sind Teile der HTML-Syntax selbst. Wie fügt man also eines dieser Sonderzeichen in Ihren Text ein? Beispielsweise, wenn Sie ein Kaufmanns-Und-Zeichen oder ein Kleiner-als-Zeichen verwenden wollen, ohne das es als Code interpretiert wird.

Sie machen dies mit Zeichenreferenzen. Dies sind spezielle Codes, die Zeichen darstellen sollen, die genau in diesen Situationen verwendet werden sollen. Jede Zeichenreferenz beginnt mit einem Ampersand (&) und endet mit einem Semikolon (;).

Die entsprechenden Zeichenreferenzen sind leicht zu merken, da der Text, den sie verwenden, als weniger als für <, als Zitat für " und ähnlich für andere gesehen werden kann. Um mehr über Entitätsreferenzen zu erfahren, siehe Liste von XML- und HTML-Zeichenentitätsreferenzen (Wikipedia).

Im folgenden Beispiel gibt es zwei Absätze:

<p>In HTML, you define a paragraph using the <p> element.</p>

<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>

Im Live-Output unten können Sie sehen, dass der erste Absatz schiefgegangen ist. Der Browser interpretiert die zweite Instanz von <p> als beginnenden neuen Absatz. Der zweite Absatz sieht korrekt aus, weil er mit Zeichenreferenzen eingeklammerte Winkelklammern hat.

HTML hat einen Mechanismus, um Kommentare im Code zu schreiben. Browser ignorieren Kommentare und machen Kommentare effektiv unsichtbar für den Benutzer. Der Zweck von Kommentaren besteht darin, Ihnen zu ermöglichen, Notizen in den Code einzufügen, um Ihre Logik oder Codierung zu erklären. Dies ist sehr nützlich, wenn Sie zu einem Code zurückkehren, nachdem Sie so lange weg waren, dass Sie sich nicht mehr vollständig daran erinnern. Ebenso sind Kommentare wertvoll, wenn verschiedene Personen Änderungen und Aktualisierungen vornehmen.

Um einen HTML-Kommentar zu schreiben, umschließen Sie ihn mit den speziellen Markierungen <!-- und -->. Zum Beispiel:

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

Wie unten zu sehen, wird nur der erste Absatz im Live-Output angezeigt.

Sie haben es bis zum Ende des Artikels geschafft! Wir hoffen, Sie haben Ihre Tour durch die Grundlagen von HTML genossen.

An diesem Punkt sollten Sie verstehen, wie HTML aussieht und wie es auf grundlegender Ebene funktioniert. Sie sollten auch in der Lage sein, einige Elemente und Attribute zu schreiben. Die nachfolgenden Artikel dieses Moduls gehen tiefer auf einige der hier eingeführten Themen ein und präsentieren weitere Konzepte der Sprache.

• Sobald Sie beginnen, mehr über HTML zu lernen, denken Sie darüber nach, die Grundlagen von CSS (Cascading Style Sheets) zu lernen. CSS ist die Sprache, die verwendet wird, um Webseiten zu stylen, wie das Ändern von Schriftarten oder Farben oder das Ändern des Seitenlayouts. HTML und CSS arbeiten gut zusammen, wie Sie bald entdecken werden.

• Anwenden von Farbe auf HTML-Elemente mit CSS

• Übersicht: Strukturierung von Inhalten mit HTML
• Weiter