01 – HTML Elemente 🧱

Die Bausteine jeder Webseite – und die Grundlage für CSS und JavaScript

🧱 1. Was ist HTML?

HTML (HyperText Markup Language) ist keine Programmiersprache, sondern eine Auszeichnungssprache. Sie dient dazu, den Inhalt und die Struktur einer Webseite zu definieren – wie Überschriften, Absätze, Bilder oder Links.

Der Browser liest den HTML-Code und wandelt ihn in eine sichtbare Webseite um. Ohne HTML gäbe es keinen Inhalt – weder für Besucher noch für Suchmaschinen oder Assistenztechnologien.

🧱 2. HTML-Elemente – Der Aufbau

Ein HTML-Element besteht aus drei Teilen:

Start-Tag: Öffnet das Element, z. B. <p>
Inhalt: Der sichtbare oder unsichtbare Inhalt (Text, andere Elemente)
End-Tag: Schließt das Element, z. B. </p>

Beispiel: <p>Dies ist ein Absatz.</p>

🔍 Beispiel: Absatz im Browser

<p>Dies ist ein Absatz.</p>

Dies ist ein Absatz.

🔗 Geschachtelte Elemente

HTML-Elemente können ineinander verschachtelt sein – fast jedes Dokument ist ein Baum aus verschachtelten Elementen:

<body>
  <h1>Titel</h1>
  <p>Ein <strong>wichtiger</strong> Absatz.</p>
</body>

Hier ist <strong> im <p>-Element enthalten – das ist vollkommen korrekt.

⚠️ Niemals End-Tags weglassen!
Auch wenn einige Elemente im Browser „funktionieren“, wenn der End-Tag fehlt, führt das oft zu unerwartetem Layout oder Fehlern. Schreibe immer wohlgeformten HTML-Code – das ist Grundlage für stabile Webseiten.

🔤 Groß- und Kleinschreibung

HTML ist nicht case-sensitive: <P> und <p> bedeuten dasselbe. Die offizielle Empfehlung (W3C) ist jedoch, immer Kleinbuchstaben zu verwenden – das gilt besonders für XHTML und verbessert die Lesbarkeit.

⚡ 3. Leere HTML-Elemente

Manche Elemente haben niemals Inhalt – sie sind „leer“. In HTML5 werden sie ohne End-Tag geschrieben.

Element	Bedeutung	Beispiel
`<img>`	Bild	`<img src="logo.png" alt="Logo">`
`<br>`	Zeilenumbruch	`Zeile 1<br>Zeile 2`
`<hr>`	Trennlinie	`<hr>`
`<input>`	Eingabefeld	`<input type="text">`
`<link>`	Externe Ressource	`<link rel="stylesheet" href="style.css">`
`<meta>`	Metadaten	`<meta charset="UTF-8">`

⚠️ Achtung: Leere Elemente dürfen keinen End-Tag haben. <img></img> ist falsch – korrekt ist <img src="...">.

📚 Vertiefung auf W3Schools – HTML-Elemente

W3Schools bietet interaktive Beispiele und eine vollständige Referenz aller HTML-Elemente. Teste direkt im Browser, wie sich Änderungen am Code auf die Ausgabe auswirken.

🔗 W3Schools: HTML Elements

📎 4. Was sind Attribute?

Attribute liefern zusätzliche Informationen über ein HTML-Element. Sie stehen immer im Start-Tag und folgen diesem Aufbau:

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

Attribute sind wie Platzhalter: Sie sagen dem Browser, welches Bild geladen werden soll, wohin ein Link führt oder wie ein Element identifiziert wird.

Beispiele aus der Praxis

<img src="bild.jpg" alt="Beschreibung"> → src sagt, wo das Bild liegt; alt beschreibt es für Screenreader.
<a href="seite.html" target="_blank">Link</a> → href definiert das Ziel; target legt fest, ob in neuem Tab geöffnet wird.
<div id="header" class="main-section">...</div> → id und class dienen der eindeutigen Kennzeichnung (wichtig für CSS und JavaScript!)

Warum sind Attribute wichtig für CSS und JavaScript?

Attribute wie id oder class dienen als Ankerpunkte:

CSS verwendet sie als Selektoren, um Styling-Regeln auf Elemente anzuwenden.
Beispiel: .primary { background: orange; }
JavaScript verwendet sie, um Elemente im Document Object Model (DOM) zu finden und zu verändern.
Beispiel: document.getElementById("mein-button")

Wichtige Regeln für Attribute

Der Wert steht immer in Anführungszeichen („...“ oder ‚...‘)
Manche Attribute benötigen keinen Wert (z. B. <input required>)
Attribute beeinflussen nicht den sichtbaren Inhalt – aber Verhalten, Zugänglichkeit und Styling

Pflicht vs. Optionale Attribute

Manche Attribute sind Pflicht, andere optional:

<img> → src und alt sind Pflicht (Barrierefreiheit!)
<html> → lang ist Pflicht für barrierefreie Seiten
<a> → href ist Pflicht, damit ein Link funktioniert

⚠️ Achtung: Fehlende Attribute wie alt bei Bildern oder lang bei <html> machen Webseiten nicht barrierefrei – und verstoßen oft gegen gesetzliche Vorgaben!

📚 Vertiefung auf W3Schools – HTML-Attribute

Erfahre mehr über globale Attribute, Ereignis-Attribute und alle erlaubten Attribute pro Element.

🔗 W3Schools: HTML Attributes

🔍 5. Semantik – Was ist das und warum zählt sie?

Semantik bedeutet: „Bedeutung vermitteln“. Ein semantisches HTML-Element beschreibt nicht nur, wie etwas aussieht, sondern was es ist.

Beispiel:

<div>Kontakt</div> – generischer Block, keine Bedeutung
<address>Kontakt</address> – sagt: „Das ist Kontaktinformation“

💡 Vorteile semantischer Elemente:

Barrierefreiheit: Screenreader können Inhalte besser interpretieren.
SEO (Suchmaschinenoptimierung): Google versteht die Struktur der Seite besser.
Wartbarkeit: Entwickler und Schüler erkennen den Code schneller – auch nach Monaten.

Wichtige semantische Elemente: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <address>.

🧠 6. KI als Lernpartner – guter Prompt

❌ Schlecht: „Zeig mir HTML mit Bildern und Links.“ ✅ Gut: „Kannst du mir ein semantisches HTML-Grundgerüst für eine Rezeptseite zeigen – mit <header>, <article> für Zutaten und Zubereitung, und erkläre, warum <img> das alt-Attribut benötigt?“