HTML - Die Sprache des Internets

Grundlagen von HTML

Was ist HTML?

HTML steht für HyperText Markup Language (Hypertext-Auszeichnungssprache)

HTML ist:

Die Grundlage jeder Webseite
Eine Auszeichnungssprache (keine Programmiersprache!)
Verantwortlich für die Struktur und den Inhalt von Webseiten
Wird vom Browser interpretiert und dargestellt

Wichtig: HTML beschreibt nur die Struktur, nicht das Aussehen (dafür gibt es CSS)

Die Anatomie eines HTML-Elements

Ein HTML-Element besteht aus:

html

<tagname>Inhalt</tagname>

Komponenten:

Öffnendes Tag: <tagname>
Inhalt: Text oder andere Elemente
Schließendes Tag: </tagname>

Beispiel:

html

<h1>Dies ist eine Überschrift</h1>
<p>Dies ist ein Absatz.</p>

Selbstschließende Tags (keine Inhalte):

html

<img src="bild.jpg" alt="Beschreibung">
<br>
<hr>

Attribute

Attribute geben zusätzliche Informationen zu Elementen:

html

<tagname attribut="wert">Inhalt</tagname>

Beispiele:

html

<a href="https://example.com">Link</a>
<img src="foto.jpg" alt="Mein Foto" width="300">
<p class="wichtig" id="absatz1">Text</p>

Wichtige Attribute:

href - Ziel eines Links
src - Quelle eines Bildes/Videos
alt - Alternative Beschreibung
class - CSS-Klasse
id - Eindeutige Identifikation
style - Inline-CSS

Grundstruktur einer HTML-Seite

Jede HTML-Seite folgt dieser Grundstruktur:

html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seitentitel</title>
</head>
<body>
    <!-- Hier kommt der sichtbare Inhalt -->
</body>
</html>

Erklärung:

<!DOCTYPE html> - Deklariert HTML5
<html> - Wurzelelement der Seite
- lang="de" - Sprache der Seite
<head> - Meta-Informationen (nicht sichtbar)
- <meta charset="UTF-8"> - Zeichenkodierung
- <title> - Titel (erscheint im Browser-Tab)
<body> - Sichtbarer Inhalt der Seite

Text-Elemente

Überschriften

HTML bietet 6 Überschrifts-Ebenen:

html

<h1>Hauptüberschrift (größte)</h1>
<h2>Zweitüberschrift</h2>
<h3>Drittüberschrift</h3>
<h4>Viertüberschrift</h4>
<h5>Fünftüberschrift</h5>
<h6>Sechstüberschrift (kleinste)</h6>

Wichtig:

Nur eine <h1> pro Seite verwenden
Überschriften hierarchisch nutzen (nicht Ebenen überspringen)
Nicht für Formatierung nutzen, sondern für Struktur

Absätze und Zeilenumbrüche

Absatz:

html

<p>Dies ist ein Absatz. Er kann mehrere Sätze enthalten.</p>
<p>Dies ist ein zweiter Absatz.</p>

Zeilenumbruch:

html

<p>Erste Zeile<br>Zweite Zeile</p>

Horizontale Linie:

html

<hr>

Text-Formatierung

Fett und Kursiv:

html

<strong>Wichtiger Text (fett)</strong>
<b>Fetter Text (nur optisch)</b>

<em>Betonter Text (kursiv)</em>
<i>Kursiver Text (nur optisch)</i>

Weitere Formatierungen:

html

<mark>Markierter Text</mark>
<small>Kleinerer Text</small>
<del>Durchgestrichener Text</del>
<ins>Eingefügter Text (unterstrichen)</ins>
<sub>Tiefgestellt</sub> H<sub>2</sub>O
<sup>Hochgestellt</sup> x<sup>2</sup>

Best Practice: Verwende <strong> und <em> für semantische Bedeutung, nicht nur fürs Aussehen.

Listen

Ungeordnete Liste (Bullet Points):

html

<ul>
    <li>Erster Punkt</li>
    <li>Zweiter Punkt</li>
    <li>Dritter Punkt</li>
</ul>

Geordnete Liste (Nummeriert):

html

<ol>
    <li>Erster Schritt</li>
    <li>Zweiter Schritt</li>
    <li>Dritter Schritt</li>
</ol>

Verschachtelte Listen:

html

<ul>
    <li>Obst
        <ul>
            <li>Äpfel</li>
            <li>Bananen</li>
        </ul>
    </li>
    <li>Gemüse</li>
</ul>

Links und Bilder

Links (Hyperlinks)

Grundsyntax:

html

<a href="ziel-url">Linktext</a>

Beispiele:

Externe Links:

html

<a href="https://www.google.com">Zu Google</a>

Interne Links (andere Seite im gleichen Projekt):

html

<a href="kontakt.html">Zur Kontaktseite</a>

Link in neuem Tab öffnen:

html

<a href="https://example.com" target="_blank">In neuem Tab öffnen</a>

E-Mail-Link:

html

<a href="mailto:info@example.com">E-Mail senden</a>

Anker-Link (zu Stelle auf gleicher Seite):

html

<a href="#kapitel2">Zu Kapitel 2 springen</a>
<!-- Später auf der Seite: -->
<h2 id="kapitel2">Kapitel 2</h2>

Bilder

Grundsyntax:

html

<img src="pfad/zum/bild.jpg" alt="Beschreibung">

Wichtige Attribute:

src - Pfad zum Bild (erforderlich)
alt - Alternative Beschreibung (erforderlich für Barrierefreiheit)
width - Breite in Pixeln
height - Höhe in Pixeln
title - Tooltip beim Hover

Beispiele:

Lokales Bild:

html

<img src="bilder/foto.jpg" alt="Mein Urlaubsfoto" width="400">

Bild von URL:

html

<img src="https://example.com/bild.jpg" alt="Beschreibung">

Bild als Link:

html

<a href="groß.jpg">
    <img src="klein.jpg" alt="Vorschaubild">
</a>

Best Practice:

Immer alt-Attribut angeben
Bilder optimieren (nicht zu große Dateigrößen)
Relative Pfade für lokale Bilder verwenden

Strukturelemente

Semantische HTML5-Elemente

HTML5 bietet semantische Tags für bessere Struktur:

html

<header>
    <h1>Website-Titel</h1>
    <nav>
        <a href="index.html">Home</a>
        <a href="about.html">Über uns</a>
    </nav>
</header>

<main>
    <article>
        <h2>Artikel-Titel</h2>
        <p>Artikel-Inhalt...</p>
    </article>
    
    <section>
        <h2>Abschnitts-Titel</h2>
        <p>Abschnitts-Inhalt...</p>
    </section>
</main>

<aside>
    <h3>Sidebar</h3>
    <p>Zusätzliche Informationen</p>
</aside>

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

Semantische Elemente:

<header> - Kopfbereich
<nav> - Navigation
<main> - Hauptinhalt
<article> - Eigenständiger Artikel
<section> - Thematischer Abschnitt
<aside> - Seitenleiste/Zusatzinfo
<footer> - Fußbereich

Divisions und Spans

<div> - Block-Container:

html

<div class="container">
    <h2>Titel</h2>
    <p>Inhalt</p>
</div>

Nimmt ganze Breite ein
Für Layout und Gruppierung
Keine semantische Bedeutung

<span> - Inline-Container:

html

<p>Dies ist <span class="highlight">wichtiger</span> Text.</p>

Nur so breit wie Inhalt
Für Textteile innerhalb von Zeilen
Keine semantische Bedeutung

Tabellen

Tabellen-Grundstruktur

html

<table>
    <thead>
        <tr>
            <th>Spalte 1</th>
            <th>Spalte 2</th>
            <th>Spalte 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Zeile 1, Zelle 1</td>
            <td>Zeile 1, Zelle 2</td>
            <td>Zeile 1, Zelle 3</td>
        </tr>
        <tr>
            <td>Zeile 2, Zelle 1</td>
            <td>Zeile 2, Zelle 2</td>
            <td>Zeile 2, Zelle 3</td>
        </tr>
    </tbody>
</table>

Elemente:

<table> - Tabelle
<thead> - Tabellenkopf
<tbody> - Tabellenkörper
<tr> - Tabellenzeile (table row)
<th> - Tabellenkopfzelle (table header)
<td> - Tabellendatenzelle (table data)

Erweiterte Tabellen-Features

Zellen verbinden:

Horizontal (über Spalten):

html

<td colspan="2">Verbundene Zelle</td>

Vertikal (über Zeilen):

html

<td rowspan="2">Verbundene Zelle</td>

Tabellen-Beschriftung:

html

<table>
    <caption>Monatliche Verkaufszahlen</caption>
    <!-- Rest der Tabelle -->
</table>

Formulare

Formular-Grundlagen

html

<form action="verarbeitung.php" method="post">
    <!-- Formular-Elemente hier -->
</form>

Attribute:

action - URL, wohin Daten gesendet werden
method - Wie Daten gesendet werden (get oder post)

Input-Felder

Text-Eingabe:

html

<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Max Mustermann">

E-Mail:

html

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

Passwort:

html

<label for="password">Passwort:</label>
<input type="password" id="password" name="password">

Nummer:

html

<label for="alter">Alter:</label>
<input type="number" id="alter" name="alter" min="0" max="120">

Datum:

html

<label for="datum">Datum:</label>
<input type="date" id="datum" name="datum">

Weitere Formular-Elemente

Textarea (Mehrzeiliger Text):

html

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

Checkbox:

html

<input type="checkbox" id="newsletter" name="newsletter" value="ja">
<label for="newsletter">Newsletter abonnieren</label>

Radio-Buttons:

html

<p>Geschlecht:</p>
<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>

Dropdown-Menü:

html

<label for="land">Land:</label>
<select id="land" name="land">
    <option value="">-- Bitte wählen --</option>
    <option value="de">Deutschland</option>
    <option value="at">Österreich</option>
    <option value="ch">Schweiz</option>
</select>

Button:

html

<button type="submit">Absenden</button>
<button type="reset">Zurücksetzen</button>
<button type="button">Klick mich</button>

Vollständiges Formular-Beispiel

html

<form action="/submit" method="post">
    <fieldset>
        <legend>Kontaktformular</legend>
        
        <label for="vorname">Vorname:</label>
        <input type="text" id="vorname" name="vorname" required>
        <br><br>
        
        <label for="nachname">Nachname:</label>
        <input type="text" id="nachname" name="nachname" required>
        <br><br>
        
        <label for="email">E-Mail:</label>
        <input type="email" id="email" name="email" required>
        <br><br>
        
        <label for="betreff">Betreff:</label>
        <select id="betreff" name="betreff">
            <option value="allgemein">Allgemeine Anfrage</option>
            <option value="support">Support</option>
            <option value="feedback">Feedback</option>
        </select>
        <br><br>
        
        <label for="nachricht">Nachricht:</label>
        <textarea id="nachricht" name="nachricht" rows="5" required></textarea>
        <br><br>
        
        <input type="checkbox" id="datenschutz" name="datenschutz" required>
        <label for="datenschutz">Ich akzeptiere die Datenschutzerklärung</label>
        <br><br>
        
        <button type="submit">Absenden</button>
        <button type="reset">Zurücksetzen</button>
    </fieldset>
</form>

Multimedia

Audio

html

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Ihr Browser unterstützt das Audio-Element nicht.
</audio>

Attribute:

controls - Zeigt Bedienelemente
autoplay - Automatisches Abspielen
loop - Endlos wiederholen
muted - Stumm geschaltet

Video

html

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Ihr Browser unterstützt das Video-Element nicht.
</video>

Zusätzliche Attribute:

poster - Vorschaubild vor Abspielen
preload - Wie Video geladen wird (none, metadata, auto)

YouTube-Video einbetten

html

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

Best Practices & Tipps

Code-Organisation

Einrückung verwenden:

html

<!-- Gut -->
<div>
    <h1>Titel</h1>
    <p>Text</p>
</div>

<!-- Schlecht -->
<div>
<h1>Titel</h1>
<p>Text</p>
</div>

Kommentare nutzen:

html

<!-- Dies ist ein Kommentar -->
<!-- 
    Mehrzeiliger
    Kommentar
-->

Barrierefreiheit (Accessibility)

Alt-Texte für Bilder:

html

<img src="foto.jpg" alt="Beschreibung für Screenreader">

Label für Formular-Felder:

html

<label for="eingabe">Beschriftung:</label>
<input type="text" id="eingabe">

Semantische HTML-Elemente verwenden:
- Nicht: <div class="header">
- Sondern: <header>

Aussagekräftige Linktexte:

html

<!-- Gut -->
<a href="bericht.pdf">Jahresbericht 2024 herunterladen (PDF, 2MB)</a>

<!-- Schlecht -->
<a href="bericht.pdf">Hier klicken</a>

Häufige Fehler vermeiden

Tags nicht schließen:

html

<!-- Falsch -->
<p>Text
<p>Mehr Text

<!-- Richtig -->
<p>Text</p>
<p>Mehr Text</p>

Verschachteln vergessen:

html

<!-- Falsch -->
<strong><em>Text</strong></em>

<!-- Richtig -->
<strong><em>Text</em></strong>

Ressourcen zum Weiterlernen

Dokumentation:

Validierung:

W3C HTML Validator

Übungsplattformen:

Cheat Sheet - Wichtigste Tags

Tag	Beschreibung
`<html>`	Wurzelelement
`<head>`	Meta-Informationen
`<body>`	Sichtbarer Inhalt
`<h1>` bis `<h6>`	Überschriften
`<p>`	Absatz
`<a>`	Link
`<img>`	Bild
`<ul>`, `<ol>`, `<li>`	Listen
`<div>`	Block-Container
`<span>`	Inline-Container
`<header>`, `<nav>`, `<main>`, `<footer>`	Semantische Struktur
`<table>`, `<tr>`, `<td>`	Tabelle
`<form>`, `<input>`, `<button>`	Formular

Viel Erfolg beim Lernen von HTML! 🚀

JavaScript

Praktische KI

Slides

Python

Frontend

Slides

HTML - Die Sprache des Internets ​

Grundlagen von HTML ​

Was ist HTML? ​

Die Anatomie eines HTML-Elements ​

Attribute ​

Grundstruktur einer HTML-Seite ​

Text-Elemente ​

Überschriften ​

Absätze und Zeilenumbrüche ​

Text-Formatierung ​

Listen ​

Links und Bilder ​

Links (Hyperlinks) ​

Bilder ​

Strukturelemente ​

Semantische HTML5-Elemente ​

Divisions und Spans ​

Tabellen ​

Tabellen-Grundstruktur ​

Erweiterte Tabellen-Features ​

Formulare ​

Formular-Grundlagen ​

Input-Felder ​

Weitere Formular-Elemente ​

Vollständiges Formular-Beispiel ​

Multimedia ​

Audio ​

Video ​

YouTube-Video einbetten ​

Best Practices & Tipps ​

Code-Organisation ​

Barrierefreiheit (Accessibility) ​

Häufige Fehler vermeiden ​

Ressourcen zum Weiterlernen ​

Cheat Sheet - Wichtigste Tags ​

HTML - Die Sprache des Internets

Grundlagen von HTML

Was ist HTML?

Die Anatomie eines HTML-Elements

Attribute

Grundstruktur einer HTML-Seite

Text-Elemente

Überschriften

Absätze und Zeilenumbrüche

Text-Formatierung

Listen

Links und Bilder

Links (Hyperlinks)

Bilder

Strukturelemente

Semantische HTML5-Elemente

Divisions und Spans

Tabellen

Tabellen-Grundstruktur

Erweiterte Tabellen-Features

Formulare

Formular-Grundlagen

Input-Felder

Weitere Formular-Elemente

Vollständiges Formular-Beispiel

Multimedia

Audio

Video

YouTube-Video einbetten

Best Practices & Tipps

Code-Organisation

Barrierefreiheit (Accessibility)

Häufige Fehler vermeiden

Ressourcen zum Weiterlernen

Cheat Sheet - Wichtigste Tags