HTML Grundlagen - Deine erste Webseite

Willkommen zur Webentwicklung! 🎉 In diesem Artikel lernst du die absolute Basis jeder Webseite kennen: HTML (HyperText Markup Language).

Was ist HTML?

HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache (Markup Language). Das bedeutet, du "markierst" Inhalte mit sogenannten Tags, um dem Browser zu sagen, was was ist.

Stell dir HTML wie das Skelett eines Hauses vor:

Das Fundament = <html> Tag
Die Wände = <div> Container
Die Türen = <a> Links
Die Fenster = <img> Bilder
Der Inhalt = Text, Listen, Tabellen

CSS (kommt später) ist dann die Farbe und Dekoration.

Deine erste HTML-Seite

Jede HTML-Seite hat eine grundlegende Struktur. Schauen wir uns das Zeile für Zeile an:

Das HTML-Grundgerüst

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Meine erste Webseite</title>
</head>
<body>
    <h1>Hallo Welt!</h1>
    <p>Das ist meine erste Webseite.</p>
</body>
</html>

Zeile-für-Zeile Erklärung:

Zeile 1: <!DOCTYPE html>

Sagt dem Browser: "Hey, das ist ein HTML5-Dokument!"
Muss IMMER die erste Zeile sein
Ohne DOCTYPE weiß der Browser nicht, wie er die Seite interpretieren soll

Zeile 2: <html lang="de">

Das Root-Element - alles kommt hier rein
lang="de" sagt: Die Sprache dieser Seite ist Deutsch
Wichtig für Screenreader und Suchmaschinen
Am Ende gibt es </html> - jedes Tag muss geschlossen werden!

Zeile 3-6: Der <head> Bereich

Enthält Metadaten (Informationen ÜBER die Seite)
Wird NICHT auf der Seite angezeigt
Hier kommen: Title, CSS, JavaScript, Meta-Tags

Zeile 4: <meta charset="UTF-8">

Definiert die Zeichenkodierung
UTF-8 = Standard, unterstützt alle Sprachen (ä, ö, ü, 中文, العربية, etc.)
Ohne das könnten Umlaute falsch angezeigt werden

Zeile 5: <title>Meine erste Webseite</title>

Der Text, der im Browser-Tab angezeigt wird
Wichtig für SEO (Google schaut hier zuerst)
Sollte kurz und beschreibend sein

Zeile 7-10: Der <body> Bereich

Hier kommt ALLES, was auf der Seite zu sehen ist
Text, Bilder, Videos, Links - alles kommt in den Body

Zeile 8: <h1>Hallo Welt!</h1>

Eine Überschrift (Heading)
h1 = Die größte Überschrift (Level 1)
Es gibt h1 bis h6 (h1 größer → h6 kleiner)
Pro Seite sollte es nur EINE h1 geben (wie eine Hauptüberschrift)

Zeile 9: <p>Das ist meine erste Webseite.</p>

Ein Paragraph (Absatz)
Für normalen Fließtext
Browser fügt automatisch Abstand vor und nach dem Absatz ein

HTML-Tags verstehen

Jedes HTML-Element besteht aus:

<tagname>Inhalt hier</tagname>
   ↑         ↑          ↑
Opening   Content   Closing
  Tag                 Tag

Wichtige Regeln:

Tags müssen geschlossen werden: <p>Text</p>
Tags können verschachtelt werden: <div><p>Text</p></div>
Manche Tags sind selbstschließend: <img />, <br />
Tags sind case-insensitive, aber Kleinschreibung ist Standard

Verschiedene HTML-Tags

<!DOCTYPE html>
<html lang="de">
<head>
    <title>HTML Tags Beispiel</title>
</head>
<body>
    <!-- Überschriften in verschiedenen Größen -->
    <h1>Überschrift 1 - Die Größte</h1>
    <h2>Überschrift 2 - Etwas kleiner</h2>
    <h3>Überschrift 3 - Noch kleiner</h3>
    
    <!-- Absatz mit Textformatierung -->
    <p>Das ist ein <strong>fettgedruckter</strong> und <em>kursiver</em> Text.</p>
    
    <!-- Ungeordnete Liste (Bulletpoints) -->
    <ul>
        <li>Listenelement 1</li>
        <li>Listenelement 2</li>
        <li>Listenelement 3</li>
    </ul>
    
    <!-- Geordnete Liste (Nummeriert) -->
    <ol>
        <li>Erster Schritt</li>
        <li>Zweiter Schritt</li>
        <li>Dritter Schritt</li>
    </ol>
    
    <!-- Link zu einer anderen Seite -->
    <a href="https://google.com">Das ist ein Link zu Google</a>
    
    <!-- Bild einfügen -->
    <img src="bild.jpg" alt="Beschreibung des Bildes">
    
    <!-- Zeilenumbruch -->
    <p>Erste Zeile<br>Zweite Zeile</p>
</body>
</html>

Die wichtigsten HTML-Tags für Anfänger

Überschriften (`<h1>` bis `<h6>`)

<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>
<h3>Noch eine Ebene tiefer</h3>

Verwendung:

<h1>: Haupttitel der Seite (nur 1x pro Seite!)
<h2>: Hauptabschnitte
<h3>: Unterabschnitte
<h4>-<h6>: Weitere Untergliederungen

Absätze und Text (`<p>`, `<strong>`, `<em>`)

<p>Das ist ein normaler Absatz.</p>
<p>Das ist <strong>wichtiger Text</strong> (fett).</p>
<p>Das ist <em>betonter Text</em> (kursiv).</p>

Listen (`<ul>`, `<ol>`, `<li>`)

Ungeordnete Liste (Bulletpoints):

<ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
</ul>

Geordnete Liste (Nummeriert):

<ol>
    <li>Erster</li>
    <li>Zweiter</li>
</ol>

Links (`<a>`)

<a href="https://example.com">Link-Text</a>
<a href="kontakt.html">Interne Seite</a>
<a href="mailto:email@example.com">E-Mail senden</a>

Attribute:

href: Wohin führt der Link
target="_blank": In neuem Tab öffnen
title: Tooltip beim Hover

Bilder (`<img>`)

<img src="bild.jpg" alt="Bildbeschreibung">

Wichtig:

src: Pfad zum Bild
alt: Beschreibung (für Screenreader und wenn Bild nicht lädt)
<img> hat KEIN Closing-Tag!

Container (`<div>` und `<span>`)

<div>
    <p>Ein div ist ein Block-Container.</p>
    <p>Nimmt die volle Breite ein.</p>
</div>

<p>Ein <span>span</span> ist ein Inline-Container.</p>

Unterschied:

<div>: Block-Element (neue Zeile, volle Breite)
<span>: Inline-Element (bleibt in der Zeile)

Semantisches HTML

Moderne HTML5-Tags mit Bedeutung:

<header>
    <nav>
        <a href="/">Home</a>
        <a href="/about">Über uns</a>
    </nav>
</header>

<main>
    <article>
        <h1>Artikel-Titel</h1>
        <p>Artikel-Inhalt...</p>
    </article>
    
    <aside>
        <h2>Sidebar</h2>
        <p>Zusätzliche Infos</p>
    </aside>
</main>

<footer>
    <p>&copy; 2025 Meine Webseite</p>
</footer>

Warum semantisch?

Bessere Zugänglichkeit (Screenreader)
Besseres SEO (Google versteht Struktur)
Lesbarer Code

Kommentare in HTML

<!-- Das ist ein Kommentar -->
<!-- 
    Kommentare werden nicht angezeigt
    und können mehrere Zeilen haben
-->
<p>Das ist sichtbar</p> <!-- Das ist ein Inline-Kommentar -->

📝 Quiz

Welches HTML-Tag wird für die Hauptüberschrift einer Seite verwendet?

⚡

Tipps & Tricks

VS Code Shortcuts für HTML

Code schneller schreiben:

! + Tab → Erstellt automatisch ein HTML-Grundgerüst
Alt + Shift + F → Formatiert deinen Code automatisch
Strg + / → Kommentiert die aktuelle Zeile aus/ein
div.container + Tab → Erstellt <div class="container"></div>
ul>li*5 + Tab → Erstellt eine Liste mit 5 Items

Live Server Extension

Installiere die "Live Server" Extension in VS Code:

Automatisches Reload bei jeder Änderung
Keine manuelle Aktualisierung mehr nötig
Rechtsklick auf HTML-Datei → "Open with Live Server"

HTML Validierung

Überprüfe deinen Code auf Fehler:

Besuche https://validator.w3.org/
Kopiere deinen HTML-Code oder lade die Datei hoch
Behebe alle Fehler und Warnungen
Sauberer Code = weniger Bugs später!

Semantic HTML von Anfang an

Auch wenn du noch kein CSS kennst:

Nutze <header>, <main>, <footer> statt nur <div>
Nutze <nav> für Navigation
Denke an Screenreader und Suchmaschinen
Gute Struktur = besseres SEO

❌

Häufige Fehler

Fehler 1: Vergessene Closing Tags

❌ FALSCH:

<p>Das ist ein Absatz
<p>Das ist ein anderer Absatz

✅ RICHTIG:

<p>Das ist ein Absatz</p>
<p>Das ist ein anderer Absatz</p>

Fehler 2: Verschachtelte Tags nicht richtig geschlossen

❌ FALSCH:

<p>Das ist <strong>sehr wichtig</p></strong>

✅ RICHTIG:

<p>Das ist <strong>sehr wichtig</strong></p>

Fehler 3: Mehrere h1-Tags auf einer Seite

❌ FALSCH:

<h1>Hauptüberschrift</h1>
<h1>Noch eine Hauptüberschrift</h1>

✅ RICHTIG:

<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>

Warum? Eine Seite sollte nur EINE h1 haben (wie ein Buchtitel). Alle weiteren sind h2, h3, etc.

Fehler 4: Fehlende alt-Attribute bei Bildern

❌ FALSCH:

<img src="foto.jpg">

✅ RICHTIG:

<img src="foto.jpg" alt="Beschreibung des Bildes">

Warum? Screenreader lesen alt-Texte vor. Suchmaschinen nutzen sie. Wenn das Bild nicht lädt, sieht man die Beschreibung.

🔍

Debugging & Troubleshooting

HTML-Fehler finden

1. Browser DevTools nutzen (F12)

Rechtsklick auf Element → "Inspizieren"
Fehlende Closing Tags werden angezeigt
DOM-Struktur wird visualisiert

2. Häufige Probleme:

Element wird nicht angezeigt? → Prüfe ob Tags richtig geschlossen sind
Layout sieht komisch aus? → Prüfe verschachtelte Tags
Link funktioniert nicht? → Prüfe href-Attribut (Tippfehler?)

3. Online Validator:

https://validator.w3.org/
Zeigt alle Fehler und Warnungen
Erklärt was falsch ist

4. VS Code Extensions:

"HTML Hint" → Zeigt Fehler direkt im Editor
"Auto Close Tag" → Schließt Tags automatisch
"Prettier" → Formatiert Code automatisch schön

🎯

Zusammenfassung

Du hast gelernt:

✅ HTML ist die Struktur (das Skelett) einer Webseite
✅ Jede HTML-Seite hat <html>, <head> und <body>
✅ Tags haben Opening und Closing Tags: <p>Text</p>
✅ Attribute geben zusätzliche Infos: <a href="...">Link</a>
✅ Die wichtigsten Tags: <h1>, <p>, <a>, <img>, <ul>, <li>
✅ Kommentare mit  schreiben
✅ Semantic HTML ist wichtig für Struktur und Accessibility

Key Takeaways:

Eine Seite = nur eine <h1>
Immer Tags schließen!
alt-Attribute bei Bildern sind Pflicht
VS Code Shortcuts sparen Zeit
HTML Validator nutzen um Fehler zu finden

Übungsaufgaben

Jetzt bist du dran! Probiere folgendes aus:

Persönliche Vorstellung:
- Erstelle eine HTML-Seite über dich
- Nutze h1 für deinen Namen
- Schreibe 2-3 Absätze über dich
- Füge eine Liste deiner Hobbies hinzu
Rezept-Seite:
- Titel des Rezepts als h1
- Zutaten als ungeordnete Liste
- Schritte als geordnete Liste
- Bild des Gerichts
Link-Sammlung:
- Erstelle eine Seite mit deinen 5 Lieblings-Webseiten
- Jede Webseite als Link
- Kurze Beschreibung unter jedem Link

🎯 Mini-Projekt: Deine erste Portfolio-Seite

Zeit für ein richtiges Projekt! Erstelle eine einfache Portfolio-Seite mit allem was du gelernt hast.

Anforderungen:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Mein Portfolio</title>
</head>
<body>
    <!-- 1. Header mit deinem Namen -->
    <h1>Dein Name</h1>
    <p>Web Developer in Ausbildung</p>

    <!-- 2. Über Mich Sektion -->
    <h2>Über mich</h2>
    <p>Schreibe 2-3 Sätze über dich...</p>

    <!-- 3. Skills Liste -->
    <h2>Meine Skills</h2>
    <ul>
        <li>HTML</li>
        <li>...</li>
    </ul>

    <!-- 4. Kontakt -->
    <h2>Kontakt</h2>
    <p>Email: <a href="mailto:deine@email.de">deine@email.de</a></p>

    <!-- 5. Copyright -->
    <p>© 2025 Dein Name. Alle Rechte vorbehalten.</p>
</body>
</html>

Bonus-Aufgaben:

✨ Füge ein Foto von dir hinzu (<img>)
✨ Erstelle Links zu deinen Social Media Profilen
✨ Nutze <header>, <main>, <footer> für semantisches HTML
✨ Füge Kommentare hinzu um deinen Code zu strukturieren
✨ Validiere deinen Code mit https://validator.w3.org/

Tipp: Speichere die Datei als portfolio.html und öffne sie im Browser. Du kannst sie später mit CSS schön gestalten!

Nächste Schritte

Jetzt wo du die HTML-Basics kennst:

✅ Du verstehst die Grundstruktur einer HTML-Seite
✅ Du kennst die wichtigsten Tags
✅ Du kannst Texte, Listen und Links erstellen

Als Nächstes lernst du:

CSS - Wie du deine Seite schön gestaltest
HTML-Formulare - Wie du Nutzereingaben erfasst
Semantic HTML - Moderne HTML5-Elemente

Viel Erfolg! 🚀

HTML Grundlagen - Deine erste Webseite

HTML Grundlagen - Deine erste Webseite

Was ist HTML?

Deine erste HTML-Seite

Zeile-für-Zeile Erklärung:

HTML-Tags verstehen

Die wichtigsten HTML-Tags für Anfänger

Überschriften (`<h1>` bis `<h6>`)

Absätze und Text (`<p>`, `<strong>`, `<em>`)

Listen (`<ul>`, `<ol>`, `<li>`)

Links (`<a>`)

Bilder (`<img>`)

Container (`<div>` und `<span>`)

Semantisches HTML

Kommentare in HTML

📝 Quiz

Tipps & Tricks

VS Code Shortcuts für HTML

Live Server Extension

HTML Validierung

Semantic HTML von Anfang an

Häufige Fehler

Fehler 1: Vergessene Closing Tags

Fehler 2: Verschachtelte Tags nicht richtig geschlossen

Fehler 3: Mehrere h1-Tags auf einer Seite

Fehler 4: Fehlende alt-Attribute bei Bildern

Debugging & Troubleshooting

HTML-Fehler finden

Zusammenfassung

Übungsaufgaben

🎯 Mini-Projekt: Deine erste Portfolio-Seite

Nächste Schritte

Gut gemacht! 🎉

Artikel bewerten

Das könnte dich auch interessieren

Das <a> Element - Links und Navigation

Das <button> Element - Interaktive Schaltflächen

Das <div> Element - Container für Block-Inhalte

HTML Grundlagen - Deine erste Webseite

HTML Grundlagen - Deine erste Webseite

Was ist HTML?

Deine erste HTML-Seite

Zeile-für-Zeile Erklärung:

HTML-Tags verstehen

Die wichtigsten HTML-Tags für Anfänger

Überschriften (<h1> bis <h6>)

Absätze und Text (<p>, <strong>, <em>)

Listen (<ul>, <ol>, <li>)

Links (<a>)

Bilder (<img>)

Container (<div> und <span>)

Semantisches HTML

Kommentare in HTML

📝 Quiz

Tipps & Tricks

VS Code Shortcuts für HTML

Live Server Extension

HTML Validierung

Semantic HTML von Anfang an

Häufige Fehler

Fehler 1: Vergessene Closing Tags

Fehler 2: Verschachtelte Tags nicht richtig geschlossen

Fehler 3: Mehrere h1-Tags auf einer Seite

Fehler 4: Fehlende alt-Attribute bei Bildern

Debugging & Troubleshooting

HTML-Fehler finden

Zusammenfassung

Übungsaufgaben

🎯 Mini-Projekt: Deine erste Portfolio-Seite

Nächste Schritte

Gut gemacht! 🎉

Artikel bewerten

Das könnte dich auch interessieren

Das <a> Element - Links und Navigation

Das <button> Element - Interaktive Schaltflächen

Das <div> Element - Container für Block-Inhalte

Überschriften (`<h1>` bis `<h6>`)

Absätze und Text (`<p>`, `<strong>`, `<em>`)

Listen (`<ul>`, `<ol>`, `<li>`)

Links (`<a>`)

Bilder (`<img>`)

Container (`<div>` und `<span>`)