Willkommen zu <HTML Basics>
Lerne HTML – die Grundsprache des Internets – Schritt für Schritt. In diesem Kurs baust du echte Webseiten auf, ganz ohne Vorkenntnisse. Alles funktioniert direkt in deinem Browser und komplett offline.
Klicke links in der Seitenleiste auf eine Lektion. Beginne am besten mit Lektion 1.
Jede Lektion erklärt ein Thema in klarem Deutsch und zeigt dir ein Beispiel.
Bearbeite den Code im Editor und klicke auf „Ausführen“, um das Ergebnis live zu sehen.
Am Ende findest du ein Cheat-Sheet und ein kleines Quiz zur Kontrolle.
Tipp: HTML sagt dem Browser was ein Inhalt ist (Überschrift, Absatz, Bild …), nicht wie er aussieht. Das Aussehen übernimmt später CSS.
📋 Cheat-Sheet
Alle wichtigen HTML-Tags auf einen Blick. Perfekt zum Nachschlagen.
Grundgerüst
| Tag | Bedeutung |
|---|---|
<!DOCTYPE html> | Dokumenttyp-Deklaration (immer zuerst) |
<html> | Wurzelelement der Seite |
<head> | Meta-Informationen (nicht sichtbar) |
<title> | Seitentitel im Browser-Tab |
<body> | Sichtbarer Inhalt |
<meta charset="UTF-8"> | Zeichenkodierung (Umlaute!) |
Text & Überschriften
| Tag | Bedeutung |
|---|---|
<h1>–<h6> | Überschriften (h1 = wichtigste) |
<p> | Absatz |
<br> | Zeilenumbruch |
<hr> | Horizontale Linie |
<strong> / <b> | Fett |
<em> / <i> | Kursiv |
<mark> | Markiert (Textmarker) |
<small> | Kleiner Text |
<del> / <ins> | Durchgestrichen / Eingefügt |
<sub> / <sup> | Tiefgestellt / Hochgestellt |
<span> | Inline-Bereich ohne eigene Bedeutung |
Links & Medien
| Tag | Bedeutung |
|---|---|
<a href="…"> | Link |
<img src="…" alt="…"> | Bild |
Listen
| Tag | Bedeutung |
|---|---|
<ul> | Ungeordnete Liste (Punkte) |
<ol> | Geordnete Liste (Zahlen) |
<li> | Listeneintrag |
Tabellen
| Tag | Bedeutung |
|---|---|
<table> | Tabelle |
<tr> | Tabellenzeile |
<th> | Kopfzelle |
<td> | Datenzelle |
colspan / rowspan | Zellen verbinden |
<caption> | Tabellenbeschriftung |
Formulare
| Tag | Bedeutung |
|---|---|
<form> | Formular |
<input> | Eingabefeld (Typen: text, password, checkbox …) |
<label> | Beschriftung für ein Feld |
<textarea> | Mehrzeiliges Textfeld |
<select> / <option> | Auswahlmenü |
<button> | Schaltfläche |
placeholder | Platzhaltertext |
required | Pflichtfeld |
Semantische Elemente
| Tag | Bedeutung |
|---|---|
<header> | Kopfbereich |
<nav> | Navigation |
<main> | Hauptinhalt |
<section> | Themenabschnitt |
<article> | Eigenständiger Inhalt |
<aside> | Randinhalt |
<footer> | Fußbereich |
<div> | Block-Container (keine Bedeutung) |
🎯 Teste dich
Beantworte die Fragen und erhalte sofort Feedback. Du kannst jede Frage nur einmal beantworten.