Code-Labor
Schreibe deinen ersten eigenen Code und sieh sofort, was passiert!
🏆 Missionen
Klicke auf eine Mission, um eine Vorlage zu laden, und versuche sie zu lösen!
⌨️ Dein HTML & CSS Code
👀 Live-Vorschau
HTML-Tag Übersicht
Die wichtigsten Befehle für die Digitale Grundbildung auf einen Blick.
💡 Programmier-Tipp: Fast alle HTML-Tags treten als Paare auf: Ein öffnendes Tag
<p> und ein schließendes Tag </p> mit einem Schrägstrich. 1. Die Grundstruktur
| Tag | Bedeutung | Beispiel im Code |
|---|---|---|
| <!DOCTYPE html> | Sagt dem Browser: "Achtung, das ist HTML5!" | <!DOCTYPE html> |
| <html> | Umschließt die gesamte Webseite. | <html lang="de">...</html> |
| <head> | Der "Kopf" (Hintergrundinfos wie der Titel). | <head><title>...</title></head> |
| <body> | Der "Körper" (alles, was man auf der Seite sieht). | <body>...</body> |
2. Texte & Überschriften
| Tag | Bedeutung | Beispiel im Code |
|---|---|---|
| <h1> ... <h6> | Überschriften (h1 ist am größten, h6 am kleinsten). | <h1>Überschrift</h1> |
| <p> | Ein normaler Textabsatz (Paragraph). | <p>Ein Absatz.</p> |
| <strong> | Text fett drucken / wichtig machen. | <strong>Wichtig!</strong> |
| <br> | Einfacher Zeilenumbruch (Hat kein End-Tag!). | Zeile 1<br>Zeile 2 |
3. Medien & Verknüpfungen
| Tag | Bedeutung | Beispiel im Code |
|---|---|---|
| <a> | Hyperlink zu einer anderen Webseite. | <a href="https://...">Link</a> |
| <img> | Bild einfügen (src = Dateiname, alt = Beschreibung). | <img src="bild.jpg" alt="Info"> |
| <ul> / <li> | Ungeordnete Liste mit Aufzählungspunkten. | <ul><li>Punkt</li></ul> |
HTML-Vorlage herunterladen
Lade dir den aktuellen Code aus dem Editor als fertige Datei für deinen Computer herunter.