1. HTML Grundlagen & Struktur

Grundlegende HTML-Struktur

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine erste Webseite</title>
</head>
<body>
    <h1>Willkommen auf meiner Webseite!</h1>
    <p>Das ist mein erster HTML-Text.</p>
</body>
</html>

LIVE DEMO

Willkommen auf meiner Webseite!

Das ist mein erster HTML-Text.

HTML-Dokumente beginnen mit <!DOCTYPE html> und haben eine klare Struktur: head für Metadaten, body für sichtbaren Inhalt.

HTML-Tags verstehen

<!-- Kommentare sind nicht sichtbar -->

<!-- Container-Tags (haben Öffnungs- und Schliesstag) -->
<h1>Überschrift</h1>
<p>Absatz mit Text</p>
<div>Allgemeiner Container</div>

<!-- Selbstschliessende Tags (keine Schliesstags) -->
<br> <!-- Zeilenumbruch -->
<hr> <!-- Horizontale Linie -->
<img src="bild.jpg" alt="Beschreibung">

<!-- Tags mit Attributen -->
<p class="wichtig" id="erster-absatz">Absatz mit Attributen</p>

Tags sind in spitze Klammern eingeschlossen. Container-Tags haben Öffnungs- und Schliesstags, selbstschliessende Tags stehen allein.

2. Text-Elemente

Überschriften und Absätze

<!-- Überschriften von h1 (grösste) bis h6 (kleinste) -->
<h1>Hauptüberschrift (h1)</h1>
<h2>Unterüberschrift (h2)</h2>
<h3>Weitere Überschrift (h3)</h3>
<h4>Kleinere Überschrift (h4)</h4>
<h5>Noch kleinere Überschrift (h5)</h5>
<h6>Kleinste Überschrift (h6)</h6>

<!-- Absätze -->
<p>Das ist ein normaler Absatz mit Text.
Mehrzeilige Texte werden automatisch verbunden.</p>

<p>Das ist ein zweiter Absatz.
Zwischen Absätzen entstehen automatisch Abstände.</p>

LIVE DEMO

Hauptüberschrift (h1)

Unterüberschrift (h2)

Weitere Überschrift (h3)

Kleinere Überschrift (h4)

Noch kleinere Überschrift (h5)

Kleinste Überschrift (h6)

Das ist ein normaler Absatz mit Text. Mehrzeilige Texte werden automatisch verbunden.

Das ist ein zweiter Absatz. Zwischen Absätzen entstehen automatisch Abstände.

h1 ist die wichtigste Überschrift (nur einmal pro Seite verwenden). Absätze (p) haben automatische Abstände.

Text-Formatierung

<p>
    Normaler Text mit <strong>wichtigem Text</strong> und <em>betontem Text</em>.
</p>

<p>
    Text kann auch <b>fett</b> oder <i>kursiv</i> dargestellt werden.
</p>

<p>
    Weitere Formatierungen: <u>unterstrichen</u>, 
    <mark>markiert</mark>, 
    <small>kleiner Text</small>
</p>

<p>
    Mathematische Formeln: H<sub>2</sub>O oder E=mc<sup>2</sup>
</p>

<!-- Zeilenumbrüche und Trennlinien -->
<p>Erste Zeile<br>Neue Zeile nach Umbruch</p>
<hr>
<p>Text nach horizontaler Linie</p>

LIVE DEMO

Normaler Text mit wichtigem Text und betontem Text.

Text kann auch fett oder kursiv dargestellt werden.

Weitere Formatierungen: unterstrichen, markiert, kleiner Text

Mathematische Formeln: H₂O oder E=mc²

Erste Zeile
Neue Zeile nach Umbruch

Text nach horizontaler Linie

strong und em haben semantische Bedeutung, b und i sind nur visuell. sub/sup für tiefgestellt/hochgestellt.

3. Listen

Ungeordnete und geordnete Listen

<!-- Ungeordnete Liste (Punkte) -->
<h3>Einkaufsliste:</h3>
<ul>
    <li>Milch</li>
    <li>Brot</li>
    <li>Äpfel</li>
    <li>Käse</li>
</ul>

<!-- Geordnete Liste (Nummern) -->
<h3>Anleitung:</h3>
<ol>
    <li>Computer einschalten</li>
    <li>Browser öffnen</li>
    <li>Webseite aufrufen</li>
    <li>HTML lernen</li>
</ol>

<!-- Verschachtelte Listen -->
<h3>Programmiersprachen:</h3>
<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>PHP</li>
            <li>Python</li>
        </ul>
    </li>
</ul>

LIVE DEMO

Einkaufsliste:

Milch
Brot
Äpfel
Käse

Anleitung:

Computer einschalten
Browser öffnen
Webseite aufrufen
HTML lernen

Programmiersprachen:

Frontend
- HTML
- CSS
- JavaScript
Backend
- PHP
- Python

ul für ungeordnete Listen (Punkte), ol für geordnete Listen (Nummern). Listen können verschachtelt werden.

Definitionslisten

<!-- Definitionslisten für Begriffserklärungen -->
<h3>HTML-Begriffe:</h3>
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - Sprache zur Strukturierung von Webseiten</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets - Sprache für das Design von Webseiten</dd>

    <dt>Tag</dt>
    <dd>HTML-Element in spitzen Klammern, z.B. &lt;p&gt;</dd>

    <dt>Attribut</dt>
    <dd>Zusätzliche Information für HTML-Tags, z.B. class="wichtig"</dd>
</dl>

LIVE DEMO

HTML-Begriffe:

HTML: HyperText Markup Language - Sprache zur Strukturierung von Webseiten
CSS: Cascading Style Sheets - Sprache für das Design von Webseiten
Tag: HTML-Element in spitzen Klammern, z.B. <p>
Attribut: Zusätzliche Information für HTML-Tags, z.B. class="wichtig"

Definitionslisten (dl) bestehen aus Begriffen (dt) und Definitionen (dd). Ideal für Glossare und Erklärungen.

4. Links und Navigation

Verschiedene Link-Arten

<!-- Externe Links -->
<p>
    Besuche <a href="https://www.google.com">Google</a> für Suchen.
</p>

<!-- Link in neuem Tab öffnen -->
<p>
    Lerne <a href="https://developer.mozilla.org" target="_blank">HTML bei MDN</a> (neuer Tab).
</p>

<!-- Interne Links (andere Seiten) -->
<nav>
    <a href="index.html">Startseite</a> | 
    <a href="about.html">Über uns</a> | 
    <a href="contact.html">Kontakt</a>
</nav>

<!-- Email und Telefon Links -->
<p>
    Kontakt: <a href="mailto:info@example.com">Email senden</a> oder 
    <a href="tel:+41-123-456-789">anrufen</a>
</p>

<!-- Download-Link -->
<p>
    <a href="dokument.pdf" download>PDF herunterladen</a>
</p>

LIVE DEMO

Besuche Google für Suchen.

Lerne HTML bei MDN (neuer Tab).

Kontakt: Email senden oder anrufen

PDF herunterladen

href definiert das Ziel. target="_blank" öffnet neuen Tab. mailto: und tel: für Email/Telefon.

Anker-Links (Sprungmarken)

<!-- Inhaltsverzeichnis mit Sprungmarken -->
<h2>Inhaltsverzeichnis</h2>
<nav>
    <ul>
        <li><a href="#einleitung">Einleitung</a></li>
        <li><a href="#hauptteil">Hauptteil</a></li>
        <li><a href="#fazit">Fazit</a></li>
    </ul>
</nav>

<!-- Abschnitte mit IDs -->
<section id="einleitung">
    <h2>Einleitung</h2>
    <p>Das ist die Einleitung meines Artikels...</p>
</section>

<section id="hauptteil">
    <h2>Hauptteil</h2>
    <p>Hier kommt der Hauptinhalt...</p>
</section>

<section id="fazit">
    <h2>Fazit</h2>
    <p>Zusammenfassung und Schluss...</p>
</section>

<!-- Link zum Seitenanfang -->
<p><a href="#top">↑ Nach oben</a></p>

Anker-Links (#id) springen zu Elementen mit passender ID. Nützlich für Navigation in langen Dokumenten.

5. Bilder und Medien

Bilder einbinden

<!-- Einfaches Bild -->
<img src="landschaft.jpg" alt="Schöne Berglandschaft im Sommer">

<!-- Bild mit Grösse und Titel -->
<img src="logo.png"
     alt="Firmenlogo"
     width="200"
     height="100"
     title="Unsere Firma seit 1990">

<!-- Bild mit Bildunterschrift -->
<figure>
    <img src="team.jpg" alt="Unser Team bei der Arbeit">
    <figcaption>Unser motiviertes Team bei der Projektbesprechung</figcaption>
</figure>

<!-- Bild als Link -->
<a href="grosse_version.jpg">
    <img src="vorschau.jpg" alt="Klick für grössere Ansicht">
</a>

<!-- Responsive Bilder (verschiedene Grössen) -->
<img src="bild-klein.jpg"
     srcset="bild-klein.jpg 400w, bild-mittel.jpg 800w, bild-gross.jpg 1200w"
     sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
     alt="Responsive Bild">

LIVE DEMO

📸 Hier wäre ein Bild

landschaft.jpg - Schöne Berglandschaft im Sommer

👥 Team Foto

Unser motiviertes Team bei der Projektbesprechung

alt-Attribute sind Pflicht für Barrierefreiheit. figure/figcaption für Bilder mit Unterschriften.

Video und Audio

<!-- Video einbinden -->
<video width="640" height="480" controls>
    <source src="mein-video.mp4" type="video/mp4">
    <source src="mein-video.webm" type="video/webm">
    Dein Browser unterstützt das Video-Tag nicht.
</video>

<!-- Video mit Vorschaubild und Autoplay -->
<video width="640" height="480"
       controls
       poster="vorschaubild.jpg"
       preload="metadata">
    <source src="video.mp4" type="video/mp4">
    Video wird nicht unterstützt.
</video>

<!-- Audio einbinden -->
<audio controls>
    <source src="musik.mp3" type="audio/mpeg">
    <source src="musik.ogg" type="audio/ogg">
    Dein Browser unterstützt das Audio-Tag nicht.
</audio>

<!-- YouTube Video einbetten -->
<iframe width="560" height="315"
        src="https://www.youtube.com/embed/VIDEO_ID"
        frameborder="0"
        allowfullscreen>
</iframe>

LIVE DEMO

▶️ VIDEO
640x480

Video mit controls, poster und verschiedenen Formaten

PLAYPAUSE
2:34 / 4:12VOL

Audio-Player mit controls

controls zeigt Player-Buttons. Mehrere source-Formate für Browser-Kompatibilität. poster für Video-Vorschaubild.

6. Tabellen

Einfache Tabelle

<!-- Einfache Tabelle mit Überschriften -->
<table>
    <caption>Notentabelle Klasse 10a</caption>

    <!-- Kopfzeile -->
    <thead>
        <tr>
            <th>Name</th>
            <th>Mathematik</th>
            <th>Deutsch</th>
            <th>Englisch</th>
        </tr>
    </thead>

    <!-- Datenzeilen -->
    <tbody>
        <tr>
            <td>Anna Mueller</td>
            <td>1.5</td>
            <td>2.0</td>
            <td>1.8</td>
        </tr>
        <tr>
            <td>Max Mustermann</td>
            <td>2.3</td>
            <td>1.7</td>
            <td>2.1</td>
        </tr>
        <tr>
            <td>Lisa Schmidt</td>
            <td>1.2</td>
            <td>1.5</td>
            <td>1.3</td>
        </tr>
    </tbody>
</table>

LIVE DEMO

Notentabelle Klasse 10a
Name	Mathematik	Deutsch	Englisch
Anna Mueller	1.5	2.0	1.8
Max Mustermann	2.3	1.7	2.1
Lisa Schmidt	1.2	1.5	1.3

thead/tbody strukturieren Tabellen. th für Überschriften, td für Daten. caption beschreibt die Tabelle.

Erweiterte Tabellen-Features

<!-- Tabelle mit colspan und rowspan -->
<table>
    <caption>Stundenplan</caption>
    <thead>
        <tr>
            <th>Zeit</th>
            <th>Montag</th>
            <th>Dienstag</th>
            <th>Mittwoch</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>08:00-09:30</td>
            <td>Mathematik</td>
            <td colspan="2">Projektarbeit (Doppelstunde)</td>
        </tr>
        <tr>
            <td>09:45-11:15</td>
            <td rowspan="2">Labor
(Doppelstunde)</td>
            <td>Deutsch</td>
            <td>Englisch</td>
        </tr>
        <tr>
            <td>11:30-13:00</td>
            <!-- Zelle für Labor wird durch rowspan übersprungen -->
            <td>Geschichte</td>
            <td>Sport</td>
        </tr>
    </tbody>
</table>

<!-- Tabelle mit Kopf- und Fusszeile -->
<table>
    <thead>
        <tr>
            <th>Produkt</th>
            <th>Preis</th>
            <th>Menge</th>
            <th>Summe</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Laptop</td>
            <td>899.00 CHF</td>
            <td>2</td>
            <td>1798.00 CHF</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="3">Gesamtsumme:</th>
            <th>1798.00 CHF</th>
        </tr>
    </tfoot>
</table>

colspan verbindet Spalten horizontal, rowspan vertikal. tfoot für Summen- oder Fusszeilen.

7. Formulare

Grundlegende Formular-Elemente

<form action="/verarbeitung.php" method="post">

    <!-- Textfelder -->
    <label for="vorname">Vorname:</label>
    <input type="text" id="vorname" name="vorname" required>

    <label for="email">E-Mail:</label>
    <input type="email" id="email" name="email" required>

    <!-- Passwort -->
    <label for="passwort">Passwort:</label>
    <input type="password" id="passwort" name="passwort" minlength="8">

    <!-- Nummer -->
    <label for="alter">Alter:</label>
    <input type="number" id="alter" name="alter" min="16" max="100">

    <!-- Datum -->
    <label for="geburtsdatum">Geburtsdatum:</label>
    <input type="date" id="geburtsdatum" name="geburtsdatum">

    <!-- Mehrzeiliger Text -->
    <label for="nachricht">Nachricht:</label>
    <textarea id="nachricht" name="nachricht" rows="4" cols="50"></textarea>

    <!-- Buttons -->
    <button type="submit">Absenden</button>
    <button type="reset">Zurücksetzen</button>

</form>

LIVE DEMO

Vorname:

E-Mail:

Passwort:

Alter:

Geburtsdatum:

Nachricht:

Labels gehören zu Input-Feldern (for="id"). type bestimmt die Eingabe-Art. required macht Felder Pflicht.

Auswahl-Elemente

<form>

    <!-- Radio Buttons (nur eine Auswahl) -->
    <fieldset>
        <legend>Geschlecht:</legend>
        <input type="radio" id="maennlich" name="geschlecht" value="m">
        <label for="maennlich">Männlich</label>

        <input type="radio" id="weiblich" name="geschlecht" value="w">
        <label for="weiblich">Weiblich</label>
    </fieldset>

    <!-- Checkboxen (mehrere Auswahlen) -->
    <fieldset>
        <legend>Hobbys:</legend>
        <input type="checkbox" id="sport" name="hobbys[]" value="sport">
        <label for="sport">Sport</label>

        <input type="checkbox" id="lesen" name="hobbys[]" value="lesen">
        <label for="lesen">Lesen</label>

        <input type="checkbox" id="musik" name="hobbys[]" value="musik">
        <label for="musik">Musik</label>
    </fieldset>

    <!-- Dropdown/Select -->
    <label for="kanton">Kanton:</label>
    <select id="kanton" name="kanton">
        <option value="">Bitte wählen...</option>
        <option value="zh">Zürich</option>
        <option value="be" selected>Bern</option>
        <option value="lu">Luzern</option>
    </select>

    <!-- Mehrfachauswahl -->
    <label for="sprachen">Programmiersprachen (Mehrfachauswahl):</label>
    <select id="sprachen" name="sprachen[]" multiple size="4">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="js">JavaScript</option>
        <option value="php">PHP</option>
    </select>

</form>

LIVE DEMO

Geschlecht: Männlich Weiblich

Hobbys: Sport Lesen Musik

Kanton:

Radio für Einzelauswahl, Checkbox für Mehrfachauswahl. fieldset gruppiert verwandte Felder. selected macht Option vorgewählt.

8. Semantische HTML5-Elemente

Seiten-Struktur mit semantischen Tags

<!DOCTYPE html>
<html lang="de">
<head>
    <title>Semantische HTML-Seite</title>
</head>
<body>

    <!-- Kopfbereich der Seite -->
    <header>
        <h1>Meine Website</h1>
        <p>Willkommen auf meiner persönlichen Webseite</p>
    </header>

    <!-- Navigation -->
    <nav>
        <ul>
            <li><a href="#about">Über mich</a></li>
            <li><a href="#contact">Kontakt</a></li>
        </ul>
    </nav>

    <!-- Hauptinhalt -->
    <main>
        <!-- Artikel/Blog-Post -->
        <article>
            <header>
                <h2>Mein erster Blog-Post</h2>
                <time datetime="2025-01-15">15. Januar 2025</time>
            </header>

            <section>
                <h3>Einleitung</h3>
                <p>Das ist der Einleitungstext...</p>
            </section>

            <section>
                <h3>Hauptteil</h3>
                <p>Hier steht der Hauptinhalt...</p>
            </section>
        </article>
    </main>

    <!-- Seitenleiste -->
    <aside>
        <h3>Verwandte Links</h3>
        <ul>
            <li><a href="#">HTML Tutorial</a></li>
            <li><a href="#">CSS Grundlagen</a></li>
        </ul>
    </aside>

    <!-- Fussbereich -->
    <footer>
        <p>&copy; 2025 Meine Website. Alle Rechte vorbehalten.</p>
        <address>
            Kontakt: <a href="mailto:info@example.com">info@example.com</a>
        </address>
    </footer>

</body>
</html>

LIVE DEMO - Seitenstruktur

HEADER - Kopfbereich mit Titel

NAV - Navigation (Home | Über mich | Kontakt)

MAIN

ARTICLE - Blog-Post mit sections

ASIDE
Seitenleiste

FOOTER - Copyright & Kontakt

Semantische Tags beschreiben die Bedeutung des Inhalts, nicht nur das Aussehen. Wichtig für SEO und Barrierefreiheit.

Weitere semantische Elemente

<!-- Zeit und Datum -->
<p>
    Veröffentlicht am 
    <time datetime="2025-01-15T10:30:00">15. Januar 2025, 10:30 Uhr</time>
</p>

<!-- Markierter/wichtiger Text -->
<p>
    Das ist <mark>markierter Text</mark> und das ist 
    <strong>wichtiger Text</strong>.
</p>

<!-- Kontaktdaten -->
<address>
    Max Mustermann<br>
    Musterstrasse 123<br>
    8000 Zürich<br>
    E-Mail: <a href="mailto:max@example.com">max@example.com</a>
</address>

<!-- Zitate -->
<blockquote cite="https://example.com/quelle">
    <p>"Das Internet ist für uns alle Neuland."</p>
    <footer>
        — <cite>Angela Merkel</cite>, 2013
    </footer>
</blockquote>

<!-- Abkürzungen -->
<p>
    Ich lerne <abbr title="HyperText Markup Language">HTML</abbr>
    und <abbr title="Cascading Style Sheets">CSS</abbr>.
</p>

<!-- Details und Summary (ausklappbar) -->
<details>
    <summary>Mehr Informationen anzeigen</summary>
    <p>Hier sind zusätzliche Details, die standardmässig versteckt sind
    und nur bei Klick auf "Mehr Informationen" sichtbar werden.</p>
</details>

LIVE DEMO

Veröffentlicht am 15. Januar 2025, 10:30 Uhr

Das ist markierter Text und das ist wichtiger Text.

Max Mustermann
Musterstrasse 123
8000 Zürich
E-Mail: max@example.com

"Das Internet ist für uns alle Neuland."

— Angela Merkel, 2013

Ich lerne HTML und CSS.

Mehr Informationen anzeigen

Hier sind zusätzliche Details, die standardmässig versteckt sind und nur bei Klick auf "Mehr Informationen" sichtbar werden.

time für Datumsangaben, address für Kontaktdaten, blockquote für Zitate, abbr für Abkürzungen, details/summary für ausklappbare Inhalte.

💡 Best Practices:
• Verwende semantische Tags statt nur div und span
• Nur ein h1 pro Seite für die Hauptüberschrift
• main umschliesst den Hauptinhalt (ohne Navigation/Sidebar)
• article für eigenständige Inhalte (Blog-Posts, News)
• section für thematisch zusammengehörige Bereiche

9. Meta-Tags und SEO-Grundlagen

Wichtige Meta-Tags im Head

<head>
    <!-- Zeichenkodierung -->
    <meta charset="UTF-8">

    <!-- Responsive Design -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO Meta-Tags -->
    <title>HTML Lernen - Kompletter Anfänger Guide 2025</title>
    <meta name="description"
          content="Lerne HTML von Grund auf! Kompletter Anfänger-Guide mit Beispielen, Live-Demos und praktischen Übungen. Perfekt für Einsteiger.">

    <meta name="keywords"
          content="HTML lernen, HTML Tutorial, Webentwicklung, Anfänger, HTML5, Tags, Elemente">

    <meta name="author" content="M. Meili">
    <meta name="robots" content="index, follow">

    <!-- Social Media Meta-Tags (Open Graph) -->
    <meta property="og:title" content="HTML Lernen - Anfänger Guide">
    <meta property="og:description"
          content="Kompletter HTML-Kurs für Einsteiger mit praktischen Beispielen">
    <meta property="og:image" content="https://example.com/html-tutorial-bild.jpg">
    <meta property="og:url" content="https://example.com/html-lernen">

    <!-- Twitter Cards -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="HTML Lernen - Anfänger Guide">

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

Meta-Tags geben Suchmaschinen und sozialen Medien wichtige Informationen über die Seite. title und description sind besonders wichtig für SEO.

🎯 SEO-Tipps:
• title: 50-60 Zeichen, beschreibend und einzigartig
• description: 150-160 Zeichen, lockend und informativ
• viewport meta-tag ist Pflicht für mobile Geräte
• Open Graph Tags für bessere Social Media Darstellung

10. Validierung und Best Practices

HTML-Validierung und Qualität

<!-- ✅ GUTES HTML - Sauberer, semantischer Code -->
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beschreibender Seitentitel</title>
</head>
<body>
    <header>
        <h1>Hauptüberschrift (nur eine pro Seite)</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#section1">Sektion 1</a></li>
            <li><a href="#section2">Sektion 2</a></li>
        </ul>
    </nav>

    <main>
        <section id="section1">
            <h2>Unterüberschrift</h2>
            <p>Sinnvoller Absatztext mit relevanten Informationen.</p>

            <!-- Bild mit alt-Attribut für Barrierefreiheit -->
            <img src="beispiel.jpg"
                 alt="Beschreibung des Bildinhalts für Screenreader"
                 width="400" height="300">
        </section>

        <section id="section2">
            <h2>Formular-Bereich</h2>
            <form action="/submit" method="post">
                <!-- Label immer mit Input verknüpfen -->
                <label for="name">Ihr Name:</label>
                <input type="text" id="name" name="name" required>

                <button type="submit">Absenden</button>
            </form>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 Beispiel-Website</p>
    </footer>
</body>
</html>

Sauberer HTML-Code ist semantisch, barrierefrei und valide. Jedes Element hat einen klaren Zweck.

Häufige Fehler vermeiden

<!-- ❌ SCHLECHTES HTML - Häufige Fehler -->

<!-- Fehler 1: Fehlende oder falsche DOCTYPE -->
<!-- <html> ohne DOCTYPE ist veraltet -->

<!-- Fehler 2: Nicht geschlossene Tags -->
<p>Text ohne schliessenden Tag
<div>Noch ein nicht geschlossener Container

<!-- Fehler 3: Falsche Verschachtelung -->
<p>Text <strong>fett <em>und kursiv</strong> falsch</em></p>

<!-- Fehler 4: Fehlende alt-Attribute -->
<img src="bild.jpg"> <!-- Schlecht für Barrierefreiheit -->

<!-- Fehler 5: Mehrere h1-Tags -->
<h1>Erste Hauptüberschrift</h1>
<h1>Zweite Hauptüberschrift</h1> <!-- Sollte h2 sein -->

<!-- Fehler 6: Veraltete Attribute -->
<font color="red">Veraltetes Styling</font>
<center>Veraltete Zentrierung</center>

<!-- ✅ KORREKTUREN -->

<!-- Korrekt geschlossen -->
<p>Text mit schliessendem Tag</p>
<div>Korrekt geschlossener Container</div>

<!-- Korrekte Verschachtelung -->
<p>Text <strong><em>fett und kursiv</em></strong> richtig</p>

<!-- Mit alt-Attribut -->
<img src="bild.jpg" alt="Beschreibung des Bildes">

<!-- Korrekte Überschriften-Hierarchie -->
<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>
<h3>Unter-Unterüberschrift</h3>

<!-- Modernes CSS statt veralteter Tags -->
<span style="color: red;">Modernes Styling</span>
<div style="text-align: center;">Moderne Zentrierung</div>

Vermeide häufige Fehler wie nicht geschlossene Tags, falsche Verschachtelung und veraltete Elemente.

🔍 Validierung-Tools:
• W3C Markup Validator: validator.w3.org
• Browser-Entwicklertools: F12 → Console
• VS Code Extensions: HTMLHint, W3C Web Validator
• Online-Tools: HTML5 Validator, Nu Html Checker

11. Barrierefreiheit (Accessibility)

Warum Barrierefreiheit?

Barrierefreiheit bedeutet, Webseiten für alle Menschen zugänglich zu machen – inklusive Menschen mit Seh-, Hör- oder Motorik-Einschränkungen.
Screenreader und andere Hilfsmittel nutzen semantischen HTML-Code und spezielle Attribute.

Wichtige Attribute und Techniken

<!-- Alternativtext für Bilder -->
<img src="beispiel.jpg" alt="Beschreibung des Bildes">
<!-- aria-label und aria-describedby für Screenreader -->
<button aria-label="Menü öffnen">☰</button>
<input aria-describedby="hilfe-text" type="text">
<span id="hilfe-text">Geben Sie Ihren Namen ein</span>
<!-- tabindex für Tastatur-Navigation -->
<button tabindex="0">Klick mich</button>
<!-- Farbliche Kontraste beachten -->
<p>Achten Sie auf genügend Kontrast zwischen Text und Hintergrund!</p>
                        

alt-Attribute bei Bildern sind Pflicht.
aria-label und aria-describedby machen Inhalte für Screenreader verständlich.
tabindex regelt die Reihenfolge beim Tabulator-Durchlauf.
Gute Kontraste helfen allen Nutzern.

Accessible Formulare

<label for="email">E-Mail:</label>
<input id="email" type="email" aria-required="true">
<!-- Fehlermeldung für Screenreader -->
<span role="alert">Bitte geben Sie eine gültige E-Mail-Adresse ein.</span>
                        

Labels müssen immer mit Inputs verbunden sein.
role="alert" informiert Screenreader über wichtige Meldungen.

🔗 Weiterführende Links:
W3C: Accessibility Testing
Google Web.dev: Accessibility

12. Kommentierung & Lesbarkeit

HTML-Kommentare

<!-- Dies ist ein Kommentar und wird nicht angezeigt -->
<p>Text mit Kommentar darüber</p>
                        

Code-Struktur und Einrückung

<!DOCTYPE html>
<html>
    <head>
        <title>Strukturierte Seite</title>
    </head>
    <body>
        <!-- Bereich für Navigation -->
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
            </ul>
        </nav>
    </body>
</html>
                        

Einrückung und Leerzeilen machen HTML-Code lesbarer.
Kommentare helfen beim Verständnis für andere (und dich selbst).

📚 Tipps:
• Schreibe verständliche Kommentare.
• Halte deine Einrückung konsequent.
• Nutze sprechende Namen für Klassen und IDs.

13. Einbindung externer Ressourcen

Stylesheet einbinden

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

JavaScript einbinden

<body>
    <script src="main.js"></script>
</body>
                        

CSS und JavaScript werden mit <link> bzw. <script> eingebunden.
Das <script>-Tag steht meist am Ende des <body>.

Favicon und weitere Icons

<head>
    <link rel="icon" href="favicon.ico">
    <link rel="apple-touch-icon" href="apple-icon.png">
</head>
                        

14. Fehlerbehandlung & Debugging

Browser-Entwicklertools

F12 oder Rechtsklick → „Untersuchen“ öffnet die Entwicklertools im Browser.
Dort kannst du HTML, CSS und JavaScript live ansehen und bearbeiten.
Fehlermeldungen findest du in der „Konsole“.

HTML validieren

🎯 Tools:
• W3C Markup Validator
• HTMLHint (VS Code Extension)
• Online-Editoren wie CodePen oder JSFiddle

HTML-Editoren

Empfohlene Programme: VS Code, Sublime Text, Notepad++
Speichere Dateien mit .html-Endung.
Öffne sie per Doppelklick oder „Mit Browser öffnen“.