Kapitel 15: Kommentare und Code-Richtlinien

📝 Lernziel: Sauberen, wartbaren HTML-Code schreiben - wichtig für Teamarbeit!

15.1 Einzeilige und mehrzeilige Kommentare

Kommentare werden vom Browser nicht angezeigt - sie dienen nur der Dokumentation.

Einzeilige Kommentare

html

<!-- Dies ist ein einzeiliger Kommentar -->
<p>Normaler Text</p>

Mehrzeilige Kommentare

html

<!-- 
  Dies ist ein mehrzeiliger Kommentar.
  Hier kann man ausführliche Erklärungen schreiben.
  Perfekt für längere Beschreibungen.
-->
<p>Normaler Text</p>

Verwendungszwecke:

Code dokumentieren
Codeabschnitte vorübergehend deaktivieren (Debugging)
Sich selbst oder anderen Entwicklern Hinweise geben
Abschnitte markieren (große Dateien)

15.2 Code-Einrückung und Namenskonventionen

Einrückung (Indentation)

✅ Gut lesbar:

html

<div>
  <p>Text</p>
  <ul>
    <li>Eintrag 1</li>
    <li>Eintrag 2</li>
  </ul>
</div>

❌ Schlecht lesbar:

html

<div>
      <p>Text</p>
        <ul>
      <li>Eintrag 1</li>
  <li>Eintrag 2</li>
        </ul>
          </div>

Namenskonventionen

Element	Konvention	Beispiel
Tag-Namen	Kleinschreibung	`<div>` nicht `<DIV>`
Klassen-Namen	Kebab-Case	`class="meine-klasse"`
IDs	camelCase oder kebab-case	`id="meineId"` oder `id="meine-id"`
Dateinamen	Klein, keine Leerzeichen	`index.html` nicht `Index.html`

Beispiel:

html

<!-- ✅ Gut -->
<div class="blog-post" id="post1">
  <h2 class="post-title">Titel</h2>
  <p class="post-content">Inhalt...</p>
</div>

<!-- ❌ Schlecht -->
<DIV CLASS="Blog_Post" ID="Post1">
  <H2 CLASS="Post_Title">Titel</H2>
  <P CLASS="Post_Content">Inhalt...</P>
</DIV>

15.3 Bedeutung von Kommentaren

Kommentare sind sehr wichtig für:

1. Eigene Wartbarkeit

html

<!-- TODO: Navigation später hinzufügen -->
<!-- FIXME: Link funktioniert noch nicht -->
<!-- NOTE: Dieser Bereich braucht CSS-Styling -->

2. Teamarbeit

html

<!-- 
  Autor: Max Mustermann
  Datum: 26.05.2026
  Beschreibung: Header-Bereich der Startseite
-->
<header>
  ...
</header>

3. Debugging

html

<!-- Problem mit dem Bild, temporär deaktiviert
<img src="bild.jpg" alt="Bild">
-->
<p>Bild wird gerade repariert.</p>

15.4 Anfänger-Falle: Kommentar-Fehler

Fehler 1: Kommentar nicht geschlossen

html

<!-- Dieser Kommentar ist nicht geschlossen
<p>Dieser Text wird auch kommentiert!</p>

✅ Richtig:

html

<!-- Dieser Kommentar ist geschlossen -->
<p>Dieser Text wird angezeigt.</p>

Fehler 2: Verschachtelte Kommentare

html

<!--
  <!-- Dieser Kommentar funktioniert nicht -->
-->

✅ Lösung: Vermeide verschachtelte Kommentare oder verwende unterschiedliche Strategien.

Fehler 3: Doppelte Bindestriche in Kommentaren

html

<!-- -- Dies funktioniert möglicherweise nicht in alten Browsern -- -->

✅ Richtig:

html

<!-- Dies ist ein gültiger Kommentar -->

15.5 Praxis: Sauberen HTML-Code schreiben

Aufgabe: Schreibe sauberen, gut kommentierten HTML-Code.

Lösung:

html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meine gut strukturierte Webseite</title>
  <!-- 
    Autor: [Dein Name]
    Datum: 26.05.2026
    Beschreibung: Startseite der Webseite
  -->
</head>
<body>
  <!-- Header-Bereich -->
  <header>
    <h1>Meine Webseite</h1>
    <nav>
      <ul>
        <li><a href="index.html">Start</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
      </ul>
    </nav>
  </header>
  
  <!-- Hauptinhalt -->
  <main>
    <section class="hero">
      <h2>Willkommen!</h2>
      <p>Dies ist eine gut strukturierte Webseite.</p>
      <!-- TODO: Call-to-Action Button hinzufügen -->
    </section>
    
    <section class="content">
      <h2>Neueste Artikel</h2>
      <article>
        <h3>Artikel 1</h3>
        <p>Inhalt des Artikels...</p>
      </article>
    </section>
  </main>
  
  <!-- Footer-Bereich -->
  <footer>
    <p>&copy; 2026 Meine Webseite</p>
    <!-- FIXME: Impressum-Link hinzufügen -->
  </footer>
</body>
</html>

Besonderheiten dieses Codes:

✅ Konsistente Einrückung (2 Leerzeichen)
✅ Beschreibende Kommentare
✅ Klare Abschnittstrennung
✅ Einheitliche Namenskonventionen
✅ lang="de" für Barrierefreiheit
✅ viewport meta-Tag für mobile Geräte

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

✅ Einzeilige und mehrzeilige Kommentare zu schreiben
✅ Code-Einrückung und Namenskonventionen
✅ Bedeutung von Kommentaren (Teamarbeit, Wartbarkeit)
✅ Häufige Fehler bei Kommentaren zu vermeiden
✅ Sauberen, gut dokumentierten HTML-Code zu schreiben

🎯 Nächster Schritt: In Kapitel 16 lernst du häufige HTML-Fehler und deren Behebung!

← Zurück zu Kapitel 14: HTML mit CSS/JS VerbindungWeiter zu Kapitel 16: Häufige Fehler und Fehlerbehebung →

Kapitel 15: Kommentare und Code-Richtlinien ​

15.1 Einzeilige und mehrzeilige Kommentare ​

Einzeilige Kommentare ​

Mehrzeilige Kommentare ​

15.2 Code-Einrückung und Namenskonventionen ​

Einrückung (Indentation) ​

Namenskonventionen ​

15.3 Bedeutung von Kommentaren ​

1. Eigene Wartbarkeit ​

2. Teamarbeit ​

3. Debugging ​

15.4 Anfänger-Falle: Kommentar-Fehler ​

Fehler 1: Kommentar nicht geschlossen ​

Fehler 2: Verschachtelte Kommentare ​

Fehler 3: Doppelte Bindestriche in Kommentaren ​

15.5 Praxis: Sauberen HTML-Code schreiben ​

✅ Zusammenfassung ​

Kapitel 15: Kommentare und Code-Richtlinien

15.1 Einzeilige und mehrzeilige Kommentare

Einzeilige Kommentare

Mehrzeilige Kommentare

15.2 Code-Einrückung und Namenskonventionen

Einrückung (Indentation)

Namenskonventionen

15.3 Bedeutung von Kommentaren

1. Eigene Wartbarkeit

2. Teamarbeit

3. Debugging

15.4 Anfänger-Falle: Kommentar-Fehler

Fehler 1: Kommentar nicht geschlossen

Fehler 2: Verschachtelte Kommentare

Fehler 3: Doppelte Bindestriche in Kommentaren

15.5 Praxis: Sauberen HTML-Code schreiben

✅ Zusammenfassung