Zurück zur Hauptseite

HTMLtutorial

HTML von Anfang an

Seiten strukturieren, Inhalte ordnen

DE EN

Was ist HTML?

HTML steht für HyperText Markup Language und ist die Grundsprache des Webs. Jede Webseite, die du im Browser öffnest – von Wikipedia über YouTube bis hin zu deiner Lieblingswebsite – besteht im Kern aus HTML. Es ist keine Programmiersprache im klassischen Sinne, sondern eine Auszeichnungssprache: Du verwendest spezielle Tags (Etiketten), um dem Browser mitzuteilen, welcher Inhalt was bedeutet – eine Überschrift, ein Absatz, ein Link oder ein Bild.

In diesem Tutorial lernst du Schritt für Schritt, wie du mit HTML eigene Webseiten aufbaust. Du beginnst mit dem grundlegenden Seitengerüst, lernst Text, Links, Bilder, Listen und Formulare kennen und verstehst am Ende, warum semantisches HTML so wichtig für Suchmaschinen und Barrierefreiheit ist. Am Schluss baust du eine vollständige persönliche Webseite als Mini-Projekt.

So nutzt du die Inhalte

Ein kurzer Ablauf, damit du direkt mit den Kapiteln und Beispielen starten kannst.

1. Starte mit den Grundlagen

Lege eine leere Textdatei an, richte VS Code ein und öffne deine erste HTML-Seite im Browser.

2. Tippe Beispiele ab

Kopiere den Beispielcode nicht – tippe ihn bewusst ab. So prägt sich die Syntax viel schneller ein.

3. Experimentiere und variiere

Ändere Tags, tausche Inhalte aus und beobachte, wie sich die Seite im Browser verändert.

Inhaltsverzeichnis

Vorarbeiten: Setup & erste Seite Kapitel 1: Warum HTML? Kapitel 2: Text-Elemente Kapitel 3: Links Kapitel 4: Bilder Kapitel 5: Listen Kapitel 6: Tabellen Kapitel 7: Formulare Kapitel 8: Semantische Elemente Kapitel 9: Attribute & Meta-Tags Kapitel 10: Mini-Projekt – Persönliche Webseite

Vorarbeiten

Setup & erste HTML-Datei

Bevor du deine erste Webseite baust, brauchst du nur zwei Dinge: einen Texteditor und einen Webbrowser. Für den Einstieg empfehlen wir Visual Studio Code (kurz: VS Code) – er ist kostenlos, auf allen Betriebssystemen verfügbar und hebt HTML-Code farblich hervor, was das Lesen erheblich erleichtert. Lade ihn unter code.visualstudio.com herunter und installiere ihn.

Die Erweiterung "Live Server" installieren:
In VS Code kannst du über den Reiter "Extensions" (das Puzzle-Symbol links) nach Live Server suchen und die Erweiterung von Ritwick Dey installieren. Danach kannst du jede HTML-Datei mit einem Rechtsklick → "Open with Live Server" im Browser öffnen – und die Seite aktualisiert sich automatisch, sobald du speicherst. Das erspart dir das ständige manuelle Neuladen.

Deine erste HTML-Datei anlegen:
Erstelle auf deinem Computer einen neuen Ordner, z.B. meine-webseite. Öffne diesen Ordner in VS Code (Datei → Ordner öffnen). Lege darin eine neue Datei mit dem Namen index.html an. Der Name index.html ist eine Konvention im Web – wenn ein Browser einen Ordner aufruft, sucht er zuerst nach dieser Datei. Das ist der Grund, warum Webseiten oft so heißen.

Das Grundgerüst mit dem Emmet-Kürzel:
In VS Code kannst du in einer leeren HTML-Datei einfach ein Ausrufezeichen ! tippen und dann Tab drücken. VS Code fügt dann automatisch das vollständige HTML-Grundgerüst ein – das ist das sogenannte Emmet-Feature. Das spart viel Tipparbeit!

Im Browser öffnen:
Wenn du kein Live Server Plugin nutzt, kannst du deine Datei auch direkt öffnen: Öffne deinen Browser (z.B. Chrome, Firefox oder Edge), drücke Strg + O (Windows/Linux) oder Cmd + O (macOS) und wähle deine index.html aus. Nach jeder Änderung musst du dann F5 drücken, um die Seite neu zu laden.

Offizielle Seiten: Visual Studio Code & MDN – HTML-Grundlagen

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

Jetzt geht es los!

Kapitel 1: Warum HTML?

HTML ist das Fundament jeder Webseite. Ohne HTML gibt es keine Struktur – nur leere Bildschirme. Wenn dein Browser eine Seite lädt, empfängt er im Hintergrund eine HTML-Textdatei und parst (verarbeitet) sie: Er liest jeden Tag, versteht seine Bedeutung und baut daraus den sichtbaren Inhalt zusammen, den du auf deinem Bildschirm siehst. HTML ist also die Sprache, mit der du dem Browser sagst: „Das hier ist eine Überschrift, das ist ein Absatz, und das ist ein Link."

Was bedeutet „Markup-Sprache"?
Eine Markup-Sprache versieht Text mit Auszeichnungen (englisch: markups) – also mit zusätzlichen Informationen über die Bedeutung des Textes. In HTML geschieht das durch Tags: spitze Klammern, die einen Inhalt umschließen. Ein öffnender Tag wie <p> leitet ein Element ein, ein schließender Tag wie </p> beendet es. Alles dazwischen ist der Inhalt des Elements. Tags sind nicht sichtbar – der Browser zeigt nur den Inhalt an.

Wo wird HTML eingesetzt?
HTML ist überall. Jede Seite im World Wide Web – von der Wikipedia-Startseite über den Online-Shop bis hin zu Nachrichtenportalen – basiert auf HTML. Auch E-Mails im HTML-Format, Dokumentationen und sogar manche App-Oberflächen nutzen HTML als Grundlage. Du lernst also keine Nischen-Technologie, sondern das meistgenutzte Dokumentenformat der Welt.

HTML, CSS und JavaScript – das Trio des Webs:
HTML allein sorgt nur für die Struktur und den Inhalt – wie das Skelett eines Hauses. CSS ist für das Design zuständig (Farben, Schriften, Layout) und JavaScript macht Seiten interaktiv (Animationen, Formulare, dynamische Inhalte). In diesem Tutorial konzentrieren wir uns auf HTML. CSS und JavaScript kannst du danach Schritt für Schritt dazulernen.

Das HTML-Grundgerüst im Detail:
Jede HTML-Datei beginnt mit <!DOCTYPE html> – das teilt dem Browser mit, dass es sich um modernes HTML5 handelt. Danach kommt das <html>-Element als äußerstes Containergebäude. Darin liegen zwei Bereiche: <head> (unsichtbare Metadaten für Browser und Suchmaschinen) und <body> (der sichtbare Inhalt der Seite). 

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Meine Webseite</title>
  </head>
  <body>
    <h1>Willkommen!</h1>
    <p>Das ist mein erster Absatz.</p>
  </body>
</html>
<!-- Kommentare in HTML: Alles zwischen diesen Klammern ist unsichtbar -->
<!-- Der Browser ignoriert Kommentare. Nutze sie, um Code zu erklären. -->

<!DOCTYPE html>        <!-- HTML5-Deklaration: immer die erste Zeile -->
<html lang="de">       <!-- lang="de" hilft Screenreadern und Suchmaschinen -->
  <head>               <!-- Metadaten: für Browser, nicht für Besucher sichtbar -->
    <meta charset="UTF-8" />    <!-- Zeichenkodierung: Umlaute ä, ö, ü funktionieren -->
    <title>Titel</title>        <!-- Erscheint im Browser-Tab und bei Google -->
  </head>
  <body>               <!-- Alles hier ist sichtbar im Browser -->
    <p>Inhalt</p>
  </body>
</html>
Übungsaufgaben
  1. Einfach: Erstelle eine neue Datei index.html und füge das vollständige Grundgerüst ein. Gib der Seite einen eigenen Titel und schreibe einen kurzen Begrüßungstext in den Body.
  2. Mittel: Füge unterhalb der Überschrift drei Absätze hinzu – einen mit deinem Namen, einen mit deinem Wohnort und einen mit deinem Lieblingshobbys. Ergänze außerdem den lang-Attribut im <html>-Tag.
  3. Schwer: Erkläre in einem HTML-Kommentar, was jeder einzelne Tag im Grundgerüst macht. Öffne die Seite danach im Browser und prüfe, ob die Kommentare nicht sichtbar sind.

Weiterführende Informationen: W3Schools – HTML Einführung

Kapitel 2: Text-Elemente

Text ist der wichtigste Inhalt auf einer Webseite. HTML bietet eine ganze Reihe von Elementen, um Text sinnvoll zu strukturieren und zu formatieren. Das Wichtigste dabei: Wähle Tags nicht nach ihrem Aussehen, sondern nach ihrer Bedeutung. Ein <h1>-Tag signalisiert „das ist die wichtigste Überschrift der Seite" – nicht nur „mach den Text groß". Diese Unterscheidung ist fundamental und wird in Kapitel 8 über Semantik noch tiefer erklärt.

Überschriften <h1> bis <h6>:
HTML kennt sechs Ebenen von Überschriften. <h1> ist die wichtigste und größte, <h6> die kleinste und am wenigsten bedeutsame. Pro Seite sollte es in der Regel nur eine einzige <h1>-Überschrift geben – sie beschreibt den Hauptinhalt der Seite und ist für Suchmaschinen besonders wichtig. Verwende die Überschriftshierarchie logisch: nach einem <h2> kommt ein <h3>, nicht direkt ein <h5>.

Absätze mit <p>:
Der Absatz-Tag <p> ist einer der am häufigsten verwendeten Tags. Er erzeugt automatisch einen Abstand zum nächsten Element. Wichtig: Zeilenumbrüche im HTML-Quellcode (durch Enter-Taste) werden vom Browser ignoriert – nur Tags steuern die sichtbare Struktur. Wenn du einen Zeilenumbruch innerhalb eines Absatzes erzwingen willst, nutze das selbstschließende Tag <br />.

Formatierungstags – Bedeutung vs. Aussehen:
<strong> markiert Text als wichtig (wird fett dargestellt), <em> betont Text (kursiv). Diese Tags haben eine semantische Bedeutung – Screenreader lesen z.B. <em> mit Betonung vor. Im Gegensatz dazu ist <u> (unterstrichen) und <s> (durchgestrichen) rein visuell. Vermeide <u> für normalen Text, da Besucher unterstrichenen Text als Link interpretieren könnten.

Die horizontale Linie <hr />:
Das Tag <hr /> (horizontal rule) erzeugt eine sichtbare Trennlinie und signalisiert thematisch einen Inhaltswechsel. Es ist selbstschließend – es hat keinen Inhalt und keinen schließenden Tag. Ähnlich wie <br /> und <img /> gehört es zu den sogenannten void elements (leere Elemente). 

<h1>Hauptüberschrift der Seite</h1>
<h2>Kapitelüberschrift</h2>
<h3>Unterkapitel</h3>
<h4>Abschnitt</h4>
<h5>Unter-Abschnitt</h5>
<h6>Kleinste Überschrift</h6>

<p>Das ist ein normaler Absatz mit etwas Text.</p>

<p>
  Zeilenumbrüche im Quellcode<br />
  werden so erzwungen.<br />
  Jedes &lt;br /&gt; ist eine neue Zeile.
</p>

<hr />
<p>
  Dieser Text ist <strong>sehr wichtig</strong> und sollte
  <em>besonders betont</em> werden.
</p>

<p>
  <u>Unterstrichener Text</u> sieht aus wie ein Link –
  deshalb sparsam verwenden!
</p>

<p>
  <s>Dieser Preis war einmal 49 Euro.</s> Jetzt nur 29 Euro!
</p>

<p>
  Kombination: <strong><em>Fett und kursiv gleichzeitig.</em></strong>
</p>
Übungsaufgaben
  1. Einfach: Erstelle eine HTML-Seite mit einer <h1>-Überschrift, zwei <h2>-Unterüberschriften und jeweils einem Absatz darunter.
  2. Mittel: Schreibe einen Absatz über dein Lieblingsessen. Hebe das Wort „lecker" mit <strong> hervor und kursiviere den Namen des Gerichts mit <em>. Trenne zwei thematische Abschnitte mit <hr />.
  3. Schwer: Baue eine kleine Produktseite: Eine <h1> mit Produktname, eine <h2> „Beschreibung" mit mehreren Absätzen, eine <h2> „Preis" mit dem alten (durchgestrichen) und dem neuen Preis. Nutze alle Formatierungstags sinnvoll.

Weiterführende Informationen: W3Schools – HTML Überschriften & Text

Kapitel 3: Links

Links sind das Herzstück des Webs – sie verbinden Seiten miteinander. Dieses Kapitel führt Links schrittweise ein: Zuerst die Grundform, dann relative Links innerhalb deiner eigenen Seiten, danach Anker-Links für Navigation innerhalb einer Seite.

Schritt 1 – Einfacher Link: Der grundlegende Link öffnet eine andere Webseite. href steht für „hypertext reference" – also die Ziel-Adresse:

Absolute vs. relative URLs:
Eine absolute URL enthält die vollständige Adresse inklusive Protokoll: https://www.beispiel.de/seite.html. Sie funktioniert von überall aus, wird aber lang und unhandlich. Eine relative URL hingegen ist relativ zur aktuellen Datei: kontakt.html verweist auf eine Datei im gleichen Ordner, ../index.html auf eine Datei im übergeordneten Ordner. Relative URLs sind ideal für interne Links innerhalb deiner eigenen Website – wenn du die Domain wechselst, funktionieren sie weiterhin.

In einem neuen Tab öffnen mit target="_blank":
Mit dem Attribut target="_blank" öffnet sich der Link in einem neuen Browser-Tab. Das ist sinnvoll für externe Links, damit der Besucher deine eigene Seite nicht verlässt. Wichtig: Füge immer rel="noopener noreferrer" hinzu, wenn du target="_blank" verwendest. Das schließt eine Sicherheitslücke (den sogenannten Reverse Tabnapping Angriff) und ist gute Praxis.

Warum rel="noopener noreferrer"?
Wenn du einen Link mit target="_blank" öffnest, könnte die neue Seite theoretisch deine ursprüngliche Seite manipulieren. Das klingt technisch – merke dir einfach: Schreib es immer dazu, wenn du target="_blank" verwendest. Das ist guter Stil und sicherer.

Schritt 3 – Anker-Links (innerhalb derselben Seite):
Mit einem Anker-Link springst du nicht zu einer anderen Seite, sondern zu einem bestimmten Abschnitt auf derselben Seite. Das funktioniert in zwei Schritten: Zuerst gibst du dem Ziel-Element eine id, dann verlinkst du darauf mit href="#die-id".

Anker-Links – Sprungmarken auf der gleichen Seite:
Mit einem id-Attribut kannst du einem Element einen Namen geben und dann direkt dorthin verlinken. Das ist besonders nützlich für Inhaltsverzeichnisse auf langen Seiten. Der Link beginnt mit einem Raute-Zeichen: href="#mein-abschnitt". Das Zielelement bekommt id="mein-abschnitt".

mailto-Links – E-Mail direkt aus dem Browser:
Ein Link mit href="mailto:name@beispiel.de" öffnet automatisch das Standard-E-Mail-Programm des Benutzers. Das ist praktisch für Kontaktseiten. Achte jedoch darauf, dass E-Mail-Adressen in HTML-Quellcode für Spam-Bots leicht lesbar sind – auf öffentlichen Seiten besser ein Formular verwenden. 

<!-- Absoluter Link -->
<a href="https://www.wikipedia.org">Wikipedia besuchen</a>

<!-- Relativer Link zur Datei kontakt.html im selben Ordner -->
<a href="kontakt.html">Zur Kontaktseite</a>

<!-- Datei in einem Unterordner -->
<a href="seiten/ueber-mich.html">Über mich</a>

<!-- Neuen Tab öffnen + Sicherheitsattribut -->
<a href="https://www.w3schools.com" target="_blank" rel="noopener noreferrer">
  W3Schools (öffnet sich in neuem Tab)
</a>
<!-- Anker-Link: Sprung zu einem Abschnitt auf der gleichen Seite -->
<a href="#kontakt">Zum Kontaktbereich springen</a>

<!-- Das Ziel-Element mit passender id -->
<section id="kontakt">
  <h2>Kontakt</h2>
  <p>Du bist jetzt direkt hier gelandet!</p>
</section>

<!-- mailto-Link -->
<a href="mailto:hallo@beispiel.de">E-Mail schreiben</a>

<!-- Link mit Betreff und Text vorausfüllen -->
<a href="mailto:hallo@beispiel.de?subject=Anfrage&body=Hallo,">
  E-Mail mit Betreff
</a>
Übungsaufgaben
  1. Einfach: Erstelle eine HTML-Seite mit drei Links: einem zu Wikipedia, einem zu W3Schools und einem zu einer frei gewählten Seite. Alle Links sollen in einem neuen Tab öffnen.
  2. Mittel: Baue eine Seite mit einem Inhaltsverzeichnis oben: Links zu drei Abschnitten (z.B. „Über mich", „Hobbys", „Kontakt"), die jeweils weiter unten auf der Seite liegen. Nutze Anker-Links mit id-Attributen.
  3. Schwer: Erstelle zwei Seiten: index.html und kontakt.html. Verlinke sie mit relativen Links gegenseitig miteinander. Füge auf der Kontaktseite einen mailto-Link ein. Teste, dass beide Links funktionieren.

Weiterführende Informationen: W3Schools – HTML Links

Kapitel 4: Bilder

Bilder machen Webseiten lebendig. In HTML bindet man sie mit dem <img>-Tag ein – einem selbstschließenden Tag, das keine Inhalte enthält, sondern nur Attribute. Das wichtigste Attribut ist src (source = Quelle): Es enthält den Pfad oder die URL zum Bild. Das zweite unverzichtbare Attribut ist alt (alternative text): Es beschreibt das Bild in Worten.

Warum ist alt so wichtig?
Der Alternativtext dient gleich mehreren Zwecken: Erstens zeigt der Browser ihn an, wenn das Bild nicht geladen werden kann (z.B. wegen einer falschen URL oder eines fehlenden Internetzugangs). Zweitens lesen Screenreader – Hilfsprogramme für sehbehinderte Menschen – den alt-Text vor. Drittens indizieren Suchmaschinen wie Google den alt-Text, was die Sichtbarkeit deiner Seite verbessern kann. Ein leerer alt="" sagt dem Screenreader „dieses Bild ist dekorativ und unwichtig" – das ist für rein schmückende Bilder auch korrekt.

Größe mit width und height:
Du kannst die Größe eines Bildes mit den Attributen width und height in Pixeln angeben. Es ist gute Praxis, immer beide Attribute zu setzen, da der Browser dann schon vor dem Laden des Bildes den nötigen Platz reserviert – das verhindert das unangenehme „Springen" des Layouts. Besser noch: Steuere die Größe per CSS, damit das Bild auf verschiedenen Bildschirmgrößen flexibel reagiert.

Bildformate im Überblick:
Nicht jedes Bildformat eignet sich für jeden Zweck. JPEG ist ideal für Fotos (viele Farben, verlustbehaftete Komprimierung, kleine Dateigrößen). PNG unterstützt transparente Hintergründe und ist verlustfrei – gut für Logos und Grafiken. GIF unterstützt einfache Animationen, aber nur 256 Farben. WebP ist ein modernes Format von Google, das kleinere Dateien als JPEG/PNG bei gleicher Qualität erzeugt – heute von allen modernen Browsern unterstützt. SVG ist ein Vektorformat: Es skaliert verlustfrei in jede Größe und eignet sich perfekt für Icons und Logos.

Bilder als Links:
Du kannst ein <img>-Tag einfach in ein <a>-Tag einbetten, um ein Bild anklickbar zu machen. Das ist ein häufiges Muster, z.B. für Logo-Links zur Startseite. 

<!-- Lokales Bild aus dem gleichen Ordner -->
<img src="foto.jpg" alt="Ein Foto von einem Sonnenuntergang" />

<!-- Bild aus einem Unterordner -->
<img src="bilder/logo.png" alt="Firmenlogo" />

<!-- Bild aus dem Internet (externe URL) -->
<img
  src="https://via.placeholder.com/400x200"
  alt="Platzhalterbild 400x200 Pixel"
/>

<!-- Bild mit fester Größe -->
<img src="foto.jpg" alt="Profilbild" width="200" height="200" />
<!-- Bild als klickbarer Link -->
<a href="https://www.beispiel.de">
  <img src="logo.png" alt="Logo – zur Startseite" width="150" />
</a>

<!-- Dekoratives Bild: leeres alt, Screenreader ignoriert es -->
<img src="hintergrund-muster.png" alt="" />

<!-- SVG direkt eingebettet (skaliert perfekt in jede Größe) -->
<img src="icon.svg" alt="Such-Symbol" width="24" height="24" />
Übungsaufgaben
  1. Einfach: Binde drei verschiedene Bilder aus dem Internet ein (z.B. von https://picsum.photos/300/200). Gib jedem Bild einen sinnvollen alt-Text.
  2. Mittel: Erstelle eine kleine Galerie: Vier Bilder nebeneinander, jedes mit einer Bildunterschrift in einem <p>-Tag darunter. Nutze width="200" für eine einheitliche Breite.
  3. Schwer: Mache alle vier Galeriebilder anklickbar: Jedes Bild soll verlinkt sein und in einem neuen Tab eine größere Version (oder eine andere URL) öffnen. Füge außerdem ein Logo als anklickbaren Link zur Startseite ein.

Weiterführende Informationen: W3Schools – HTML Bilder

Kapitel 5: Listen

Listen sind eines der am häufigsten genutzten Elemente in HTML – nicht nur für sichtbare Aufzählungen, sondern auch für Navigationsmenüs, Footerlinks und vieles mehr. HTML kennt drei Arten von Listen: ungeordnete, geordnete und Definitionslisten. Die Wahl hängt davon ab, ob die Reihenfolge der Einträge eine Rolle spielt.

Ungeordnete Liste <ul> (unordered list):
Wird für Aufzählungen verwendet, bei denen die Reihenfolge nicht wichtig ist – z.B. eine Einkaufsliste oder eine Aufzählung von Features. Jedes Listenelement wird mit <li> (list item) eingetragen. Der Browser zeigt standardmäßig einen Punkt (Bullet) vor jedem Eintrag an.

Geordnete Liste <ol> (ordered list):
Für Aufzählungen, bei denen die Reihenfolge wichtig ist – z.B. eine Schritt-für-Schritt-Anleitung oder eine Top-10-Liste. Der Browser nummeriert die Einträge automatisch. Mit dem Attribut start="5" kannst du die Nummerierung bei einer anderen Zahl beginnen lassen, und mit reversed zählst du rückwärts.

Verschachtelte Listen:
Du kannst eine Liste innerhalb eines <li>-Elements einbetten – das ergibt eine Unterliste. Das ist nützlich für Gliederungen, verschachtelte Menüs oder Outline-Strukturen. Achte dabei auf korrekte Einrückung im Quellcode, damit du nicht den Überblick verlierst.

Definitionsliste <dl> (description list):
Eine Sonderform für Begriffe und ihre Erklärungen – wie in einem Glossar oder Wörterbuch. Sie besteht aus <dt> (definition term = der Begriff) und <dd> (definition description = die Erklärung). Du kannst einem <dt> auch mehrere <dd> zuordnen. 

<!-- Ungeordnete Liste -->
<h2>Zutaten für Pfannkuchen</h2>
<ul>
  <li>200 g Mehl</li>
  <li>2 Eier</li>
  <li>300 ml Milch</li>
  <li>1 Prise Salz</li>
  <li>Butter zum Braten</li>
</ul>

<!-- Geordnete Liste -->
<h2>Zubereitung</h2>
<ol>
  <li>Mehl, Eier und Milch vermengen</li>
  <li>Teig 10 Minuten ruhen lassen</li>
  <li>Butter in der Pfanne erhitzen</li>
  <li>Teig eingießen und goldgelb backen</li>
</ol>
<!-- Verschachtelte Liste -->
<ul>
  <li>Haustiere
    <ul>
      <li>Hund</li>
      <li>Katze</li>
    </ul>
  </li>
  <li>Wildtiere
    <ul>
      <li>Wolf</li>
      <li>Bär</li>
    </ul>
  </li>
</ul>

<!-- Definitionsliste -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language – Sprache zur Strukturierung von Webseiten</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets – Sprache zur Gestaltung von Webseiten</dd>

  <dt>JavaScript</dt>
  <dd>Programmiersprache für interaktive Webseiten</dd>
</dl>
Übungsaufgaben
  1. Einfach: Erstelle eine ungeordnete Liste mit deinen fünf Lieblingsfilmen und eine geordnete Liste mit deinen Top-3-Lieblingsessen (in Reihenfolge).
  2. Mittel: Baue eine verschachtelte Liste für eine Wocheneinteilung: eine äußere Liste mit den Wochentagen (Mo–Fr), und bei jedem Tag eine innere Liste mit zwei geplanten Aktivitäten.
  3. Schwer: Erstelle ein kleines HTML-Glossar mit einer Definitionsliste: Mindestens 5 Begriffe aus diesem Tutorial (z.B. Tag, Attribut, Element, Semantik, Barrierefreiheit) mit jeweils einer eigenen Erklärung in <dd>.

Weiterführende Informationen: W3Schools – HTML Listen

Kapitel 6: Tabellen

Tabellen sind das richtige Werkzeug, um tabellarische Daten darzustellen – also Informationen, die in Zeilen und Spalten gegliedert sind, wie Stundenpläne, Preislisten oder Statistiken. Wichtig: Tabellen sind nicht für das Layout einer Seite gedacht! In der frühen Web-Geschichte wurden Tabellen missbraucht, um ganze Seitenlayouts zu erstellen – das ist heute veraltet und sollte mit CSS gelöst werden.

Grundstruktur einer Tabelle:
Eine HTML-Tabelle beginnt mit <table>. Darin kommen Zeilen mit <tr> (table row). In jeder Zeile stehen entweder Kopfzellen <th> (table header – fett und zentriert) oder normale Datenzellen <td> (table data). Für eine bessere Struktur teilt man die Tabelle in <thead> (Kopfzeile), <tbody> (Datenkörper) und optional <tfoot> (Fußzeile) auf.

Zellen verbinden mit colspan und rowspan:
Mit dem Attribut colspan="2" lässt du eine Zelle zwei Spalten breit sein. Mit rowspan="2" erstreckt sie sich über zwei Zeilen. Das ist nützlich für komplexere Tabellen mit Überschriftszellen, die mehrere Spalten abdecken. Achte dabei genau auf die Anzahl der <td>-Elemente pro Zeile – verbundene Zellen belegen den Platz, also brauchst du in der entsprechenden Zeile eine <td> weniger.

Barrierefreiheit bei Tabellen:
Für Screenreader ist es hilfreich, Kopfzellen mit <th scope="col"> (für Spaltenüberschriften) oder <th scope="row"> (für Zeilenüberschriften) zu versehen. Außerdem kann man mit dem <caption>-Tag eine Tabellenüberschrift hinzufügen, die den Inhalt der Tabelle beschreibt. 

<table>
  <caption>Wochenstundenplan Klasse 7b</caption>
  <thead>
    <tr>
      <th scope="col">Zeit</th>
      <th scope="col">Montag</th>
      <th scope="col">Dienstag</th>
      <th scope="col">Mittwoch</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">08:00 – 08:45</th>
      <td>Mathematik</td>
      <td>Deutsch</td>
      <td>Englisch</td>
    </tr>
    <tr>
      <th scope="row">08:50 – 09:35</th>
      <td>Englisch</td>
      <td>Sport</td>
      <td>Mathematik</td>
    </tr>
  </tbody>
</table>
<!-- colspan: Zelle über zwei Spalten -->
<table>
  <thead>
    <tr>
      <th colspan="2">Persönliche Daten</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Name</td>
      <td>Mia Müller</td>
    </tr>
    <tr>
      <td rowspan="2">Kontakt</td>
      <td>mia@beispiel.de</td>
    </tr>
    <tr>
      <!-- rowspan übernimmt den Platz der ersten Spalte -->
      <td>+49 123 456789</td>
    </tr>
  </tbody>
</table>
Übungsaufgaben
  1. Einfach: Erstelle eine einfache Tabelle mit drei Spalten (Name, Fach, Note) und mindestens vier Datenzeilen. Nutze <thead> und <tbody>.
  2. Mittel: Baue deinen persönlichen Wochenstundenplan als HTML-Tabelle. Die Zeilen sollen die Unterrichtsstunden sein, die Spalten die Wochentage. Füge eine <caption> hinzu.
  3. Schwer: Erweitere deine Stundentabelle um colspan für Doppelstunden (eine Unterrichtsstunde, die zwei Zeitslots belegt). Füge außerdem eine letzte Zeile mit <tfoot> ein, die die Gesamtstundenzahl der Woche anzeigt.

Weiterführende Informationen: W3Schools – HTML Tabellen

Kapitel 7: Formulare

Formulare sind die wichtigste Möglichkeit für Benutzer, mit einer Webseite zu interagieren – sei es beim Login, beim Bestellen in einem Online-Shop, beim Ausfüllen eines Kontaktformulars oder bei einer Suchmaske. Das <form>-Element ist der Container für alle Formularelemente. Es hat zwei wichtige Attribute: action (wohin die Daten gesendet werden) und method (get oder post, wie sie gesendet werden).

Das <label>-Element:
Jedes Eingabefeld sollte ein zugehöriges <label> haben, das das Feld beschreibt. Der Zusammenhang wird über das for-Attribut des Labels und die id des Eingabefeldes hergestellt. Wenn du auf das Label klickst, wird das zugehörige Feld fokussiert – das verbessert erheblich die Bedienbarkeit, besonders auf mobilen Geräten und für Screenreader.

Das vielseitige <input>-Tag:
Das selbstschließende <input>-Element kann durch das type-Attribut viele verschiedene Formen annehmen: text (einzeiliges Textfeld), email (mit E-Mail-Validierung), password (Eingabe wird verborgen), number (nur Zahlen), checkbox (Kästchen zum Ankreuzen), radio (Auswahlknopf – nur eine Wahl) und submit (Absende-Schaltfläche). Mit required machst du ein Feld zur Pflichtangabe, mit placeholder zeigst du einen Hinweistext im leeren Feld an.

Mehrzeiliger Text mit <textarea>:
Für längere Texteingaben – z.B. eine Nachricht in einem Kontaktformular – nutzt du <textarea>. Im Gegensatz zu <input> ist es kein selbstschließendes Element: Es hat einen öffnenden und einen schließenden Tag. Mit rows und cols legst du die Anfangsgröße fest.

Auswahlmenüs mit <select>:
Das <select>-Element erzeugt eine Dropdown-Liste. Die einzelnen Optionen werden mit <option>-Tags eingetragen. Das Attribut value enthält den Wert, der beim Absenden des Formulars übermittelt wird – er muss nicht identisch mit dem angezeigten Text sein. Mit selected wählst du eine Standardoption vor. 

<form action="/kontakt-senden" method="post">

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

  <label for="email">E-Mail-Adresse:</label>
  <input type="email" id="email" name="email" placeholder="max@beispiel.de" required />

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

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

  <label for="nachricht">Deine Nachricht:</label>
  <textarea id="nachricht" name="nachricht" rows="5" cols="40"
    placeholder="Schreibe hier deine Nachricht..."></textarea>

  <button type="submit">Absenden</button>

</form>
<!-- Checkboxen: Mehrfachauswahl möglich -->
<p>Hobbys:</p>
<label>
  <input type="checkbox" name="hobby" value="lesen" /> Lesen
</label>
<label>
  <input type="checkbox" name="hobby" value="sport" checked /> Sport
</label>
<label>
  <input type="checkbox" name="hobby" value="musik" /> Musik
</label>

<!-- Radio-Buttons: Nur eine Wahl möglich (gleicher name-Wert!) -->
<p>Bevorzugte Sprache:</p>
<label>
  <input type="radio" name="sprache" value="de" checked /> Deutsch
</label>
<label>
  <input type="radio" name="sprache" value="en" /> Englisch
</label>

<!-- Dropdown-Menü -->
<label for="land">Land:</label>
<select id="land" name="land">
  <option value="">– bitte wählen –</option>
  <option value="de" selected>Deutschland</option>
  <option value="at">Österreich</option>
  <option value="ch">Schweiz</option>
</select>
Übungsaufgaben
  1. Einfach: Erstelle ein einfaches Kontaktformular mit den Feldern Name, E-Mail-Adresse und einer Textarea für die Nachricht. Alle Felder sollen Pflichtfelder sein (required).
  2. Mittel: Baue ein Anmeldeformular für einen Verein: Name, E-Mail, Geburtsdatum (type="date"), Abteilung als Dropdown (mind. 3 Optionen) und drei Checkboxen für Interessen. Füge einen Absende-Button hinzu.
  3. Schwer: Erstelle eine vollständige Login-Seite mit zwei Formularfeldern (E-Mail und Passwort), einem „Angemeldet bleiben"-Checkbox und einem Submit-Button. Füge außerdem ein zweites Formular für eine Schnellsuche (ein Textfeld + Button) hinzu.

Weiterführende Informationen: W3Schools – HTML Formulare

Kapitel 8: Semantische Elemente

Frühes HTML kannte nur generische Container wie <div> (block-level) und <span> (inline). Seiten bestanden aus Unmengen von <div id="header">, <div class="nav"> usw. HTML5 hat 2014 eine Reihe von semantischen Elementen eingeführt: Tags, die nicht nur Container sind, sondern direkt bedeuten, was ihr Inhalt ist. Ein <header> ist nun tatsächlich ein Seitenkopf – kein namenloser <div>.

Warum semantische Elemente verwenden?
Stell dir vor, jemand kann nicht gut sehen und benutzt ein Programm, das die Webseite vorliest (Screenreader). Wenn du <nav> verwendest, sagt das Programm: „Hier beginnt die Navigation." Mit einem normalen <div> weiß das Programm das nicht.

Aber auch für dich als Entwickler sind semantische Elemente praktisch: Dein Code ist viel leichter lesbar. <header>, <main> und <footer> sagen sofort, was wo ist – ohne Kommentare.

Faustregel: Frag dich bei jedem Element: „Was ist das inhaltlich?" Ist es eine Navigation? → <nav>. Ist es ein eigenständiger Artikel? → <article>. Ist es eine ergänzende Seitenleiste? → <aside>. Wenn du keine passende Antwort findest, nimm <div>.

Die wichtigsten semantischen Elemente im Überblick:
<header> – Kopfbereich einer Seite oder eines Abschnitts (Logo, Überschrift, Navigation).
<nav> – Navigationsbereich mit Links (Hauptmenü, Breadcrumb).
<main> – Der Hauptinhalt der Seite. Pro Seite nur einmal verwenden.
<section> – Ein thematischer Abschnitt mit eigenem Titel.
<article> – Ein eigenständiger, in sich abgeschlossener Inhalt (Blogpost, News-Artikel).
<aside> – Randinhalt, der ergänzend zum Hauptinhalt steht (Werbung, Links, Zusatzinfo).
<footer> – Fußbereich einer Seite oder eines Abschnitts (Copyright, Impressum).

<div> und <span> – wann noch verwenden?
Diese generischen Container sind nach wie vor nützlich, wenn kein semantischer Tag passt – also wenn du nur einen CSS-Stilcontainer oder JavaScript-Anker benötigst, ohne inhaltliche Bedeutung. <div> ist ein Block-Element (nimmt die gesamte Breite ein), <span> ist ein Inline-Element (nur so breit wie sein Inhalt). 

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Semantisches Seitenlayout</title>
  </head>
  <body>

    <header>
      <h1>Meine Website</h1>
      <nav>
        <ul>
          <li><a href="/">Startseite</a></li>
          <li><a href="/blog">Blog</a></li>
          <li><a href="/kontakt">Kontakt</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section>
        <h2>Willkommen</h2>
        <p>Das ist der Hauptinhalt der Seite.</p>
      </section>

      <section>
        <h2>Neueste Artikel</h2>

        <article>
          <h3>HTML lernen macht Spaß</h3>
          <p>Veröffentlicht am <time datetime="2026-05-31">31. Mai 2026</time></p>
          <p>In diesem Artikel zeige ich, wie man HTML lernt...</p>
        </article>

      </section>

      <aside>
        <h3>Über den Autor</h3>
        <p>Das schreibe ich über mich selbst.</p>
      </aside>
    </main>

    <footer>
      <p>&copy; 2026 Meine Website – Alle Rechte vorbehalten</p>
    </footer>

  </body>
</html>
<!-- div vs. semantische Tags im Vergleich -->

<!-- Schlecht (nur divs): -->
<div id="header">
  <div class="navigation">...</div>
</div>

<!-- Gut (semantisch): -->
<header>
  <nav>...</nav>
</header>

<!-- span für Inline-Formatierung ohne semantische Bedeutung: -->
<p>
  Der Preis beträgt <span style="color: red;">29 Euro</span>.
</p>
Übungsaufgaben
  1. Einfach: Baue ein vollständiges HTML-Seitenlayout mit <header>, <nav>, <main> und <footer>. Fülle alle Bereiche mit Beispielinhalt.
  2. Mittel: Erstelle eine Blog-Seite: Der <main>-Bereich soll zwei <article>-Elemente enthalten (mit Titel, Datum und kurzem Text), daneben ein <aside> mit „Empfohlene Artikel"-Links.
  3. Schwer: Überarbeite eine bestehende Seite aus einem früheren Kapitel und ersetze alle sinnlosen <div>-Tags durch passende semantische Elemente. Erkläre in Kommentaren, warum du welches Element gewählt hast.

Weiterführende Informationen: W3Schools – HTML Semantische Elemente

Kapitel 9: HTML-Attribute & Meta-Tags

Attribute sind zusätzliche Informationen innerhalb eines HTML-Tags, die das Verhalten oder die Bedeutung eines Elements genauer beschreiben. Du hast viele Attribute bereits kennengelernt: href bei Links, src bei Bildern, type bei Formularfeldern. In diesem Kapitel schauen wir uns universelle Attribute an, die fast jedes HTML-Element tragen kann, und gehen tiefer in den <head>-Bereich.

Die universellen Attribute id und class:
id gibt einem Element einen einzigartigen Namen – jede id darf auf einer Seite nur einmal vorkommen. Sie wird für Anker-Links (href="#mein-id") und gezieltes JavaScript-Ansprechen genutzt.
class gibt einem Element einen Klassennamen – mehrere Elemente können dieselbe Klasse tragen. CSS nutzt Klassen, um vielen Elementen gleichzeitig Stil zu geben. Ein Element kann auch mehrere Klassen haben: class="button button--primary".

Weitere nützliche universelle Attribute:
title zeigt beim Hovern über ein Element einen Tooltip an – z.B. <abbr title="HyperText Markup Language">HTML</abbr>.
lang legt die Sprache eines Elements fest – wichtig für mehrsprachige Seiten: <p lang="en">Hello World</p>.
hidden blendet ein Element aus, ohne es zu entfernen.
tabindex steuert die Tab-Reihenfolge beim Navigieren mit der Tastatur.

Meta-Tags im <head>:
Meta-Tags liefern Informationen über die Seite – für Browser, Suchmaschinen und Social-Media-Plattformen. Sie sind im <head> und für Besucher unsichtbar. <meta charset="UTF-8"> sorgt für korrekte Zeichenkodierung (Umlaute!). <meta name="description" content="..."> erscheint in Google-Suchergebnissen als Vorschautext. <meta name="viewport" content="width=device-width, initial-scale=1.0"> ist unverzichtbar für mobile Geräte – ohne diesen Tag sehen Smartphones die Desktop-Version.

Externe Ressourcen einbinden:
Mit <link rel="stylesheet" href="styles.css"> bindest du eine CSS-Datei ein. Mit <script src="script.js"></script> eine JavaScript-Datei. Das <script>-Tag sollte möglichst am Ende des <body> stehen, damit das HTML zuerst geladen wird und die Seite schneller erscheint. Das Favicon (das kleine Icon im Browser-Tab) bindet man mit <link rel="icon" href="favicon.ico"> ein. 

<!-- Typischer <head>-Bereich mit allen wichtigen Meta-Tags -->
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Erscheint im Browser-Tab -->
  <title>Meine Webseite – Startseite</title>

  <!-- Vorschautext in Suchmaschinen (ca. 150-160 Zeichen) -->
  <meta name="description" content="Willkommen auf meiner persönlichen Webseite. Hier findest du Infos über mich und meine Projekte." />

  <!-- Autor der Seite -->
  <meta name="author" content="Max Mustermann" />

  <!-- Favicon (kleines Icon im Browser-Tab) -->
  <link rel="icon" href="favicon.ico" type="image/x-icon" />

  <!-- CSS-Datei einbinden -->
  <link rel="stylesheet" href="styles.css" />
</head>
<!-- id, class, title und lang in der Praxis -->

<!-- id: einmalig, für Anker und JavaScript -->
<section id="kontakt">
  <h2>Kontakt</h2>
</section>

<!-- class: wiederholbar, für CSS-Styling -->
<p class="hinweis">Bitte alle Felder ausfüllen.</p>
<p class="hinweis hinweis--wichtig">Achtung: Pflichtfeld!</p>

<!-- title: Tooltip beim Hovern -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- Fremdsprachiger Abschnitt -->
<blockquote lang="en">
  <p>"The web is for everyone."</p>
</blockquote>

<!-- Script am Ende des body -->
<script src="script.js"></script>
Übungsaufgaben
  1. Einfach: Erweitere den <head>-Bereich einer bestehenden Seite um alle fünf wichtigen Meta-Tags: Charset, Viewport, Title, Description und Author. Teste, ob der Titel im Browser-Tab korrekt angezeigt wird.
  2. Mittel: Füge auf einer Seite mindestens drei Elemente mit verschiedenen id-Werten ein und drei weitere mit einer gemeinsamen class. Verlinke alle id-Elemente in einem Inhaltsverzeichnis oben auf der Seite.
  3. Schwer: Erstelle eine favicon.ico oder ein kleines PNG-Bild (z.B. 32×32 Pixel) und binde es als Favicon ein. Erstelle außerdem eine separate styles.css-Datei und binde sie mit <link> ein. Schreibe eine CSS-Regel für die Klasse .hinweis, die den Text blau färbt.

Weiterführende Informationen: W3Schools – HTML Head & Meta-Tags

Kapitel 10: Mini-Projekt – Persönliche Webseite

Jetzt verbindest du alles, was du in diesem Tutorial gelernt hast, zu einer vollständigen persönlichen Webseite. Das Mini-Projekt ist der beste Weg, um zu überprüfen, ob du die Konzepte wirklich verstanden hast. Du wirst die Grundstruktur, semantische Elemente, Text-Elemente, Links, Bilder, eine Liste, eine Tabelle und ein Formular auf einer einzigen Seite vereinen.

Planung vor dem Code:
Bevor du anfängst zu tippen, zeichne kurz auf einem Blatt Papier die Struktur deiner Seite. Was kommt ganz oben (Header)? Was ist dein Hauptinhalt (main)? Welche Abschnitte (sections) hast du? Ist irgendwo eine Seitenleiste (aside) sinnvoll? Eine Skizze auf Papier – auch Wireframe genannt – spart später Zeit.

Die Struktur des Mini-Projekts:
Deine persönliche Seite soll folgende Abschnitte enthalten: einen <header> mit deinem Namen und einer Navigationsleiste, einen Hauptbereich mit einem „Über mich"-Abschnitt, einer Hobby-Liste, einer Tabelle mit deinem Wochenplan und einem Kontaktformular. Am Ende kommt ein <footer> mit Copyright.

Typische Anfängerfehler und wie du sie vermeidest:
Vergessene schließende Tags: Prüfe nach jedem Block, ob der schließende Tag vorhanden ist. VS Code hebt offene Tags oft farblich hervor.
Falsche Verschachtelung: Tags müssen korrekt ineinander geschachtelt sein: <p><strong>Text</strong></p> ist korrekt, <p><strong>Text</p></strong> ist falsch.
Bildpfade: Achte darauf, dass Bild-Dateien wirklich im angegebenen Ordner liegen. Groß-/Kleinschreibung im Dateinamen spielt auf Webservern eine Rolle! 

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Über Mia Müller</title>
    <meta name="description" content="Persönliche Webseite von Mia Müller." />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>

    <header>
      <h1>Mia Müller</h1>
      <nav>
        <ul>
          <li><a href="#ueber-mich">Über mich</a></li>
          <li><a href="#hobbys">Hobbys</a></li>
          <li><a href="#wochenplan">Wochenplan</a></li>
          <li><a href="#kontakt">Kontakt</a></li>
        </ul>
      </nav>
    </header>

    <main>

      <section id="ueber-mich">
        <h2>Über mich</h2>
        <img src="profilbild.jpg" alt="Profilbild von Mia Müller" width="200" />
        <p>
          Hallo! Ich bin <strong>Mia</strong>, 14 Jahre alt und wohne in München.
          Ich lerne gerade HTML und baue meine erste eigene Webseite.
        </p>
      </section>

      <section id="hobbys">
        <h2>Meine Hobbys</h2>
        <ul>
          <li>Lesen – am liebsten Fantasy-Romane</li>
          <li>Zeichnen und Malen</li>
          <li>Schwimmen im Verein</li>
          <li>Programmieren lernen</li>
        </ul>
      </section>

      <section id="wochenplan">
        <h2>Mein Wochenplan</h2>
        <table>
          <thead>
            <tr>
              <th>Tag</th>
              <th>Aktivität</th>
            </tr>
          </thead>
          <tbody>
            <tr><td>Montag</td><td>Schwimmtraining</td></tr>
            <tr><td>Mittwoch</td><td>HTML lernen</td></tr>
            <tr><td>Freitag</td><td>Bibliothek</td></tr>
          </tbody>
        </table>
      </section>

      <section id="kontakt">
        <h2>Kontakt</h2>
        <form action="#" method="post">
          <label for="von">Dein Name:</label>
          <input type="text" id="von" name="von" required />

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

          <label for="msg">Nachricht:</label>
          <textarea id="msg" name="msg" rows="4"></textarea>

          <button type="submit">Nachricht senden</button>
        </form>
      </section>

    </main>

    <footer>
      <p>&copy; 2026 Mia Müller – Persönliche Webseite</p>
    </footer>

  </body>
</html>
<!-- Häufige Fehler und ihre Lösung -->

<!-- FALSCH: Falsche Verschachtelung -->
<p><strong>Wichtig!</p></strong>

<!-- RICHTIG: Korrekte Verschachtelung -->
<p><strong>Wichtig!</strong></p>

<!-- FALSCH: Bild ohne alt-Attribut -->
<img src="foto.jpg" />

<!-- RICHTIG: Immer alt-Attribut angeben -->
<img src="foto.jpg" alt="Beschreibung des Fotos" />

<!-- FALSCH: id mehrfach verwenden -->
<p id="text">Absatz 1</p>
<p id="text">Absatz 2</p>   <!-- Fehler! id muss einmalig sein -->

<!-- RICHTIG: Gleiche Klassen, aber einmalige ids -->
<p class="absatz" id="absatz-1">Absatz 1</p>
<p class="absatz" id="absatz-2">Absatz 2</p>
Übungsaufgaben
  1. Einfach: Erstelle die persönliche Webseite aus dem Beispiel oben. Ersetze alle Dummy-Inhalte durch echte Informationen über dich selbst.
  2. Mittel: Ergänze deine persönliche Webseite um eine zweite HTML-Datei (projekte.html) mit einer Liste deiner Lieblingsprojekte oder -bücher. Verlinke beide Seiten gegenseitig in der Navigation.
  3. Schwer: Baue eine vollständige Mini-Website mit drei Seiten: index.html (Startseite), ueber-mich.html (Über mich mit Bild, Text, Tabelle) und kontakt.html (Kontaktformular). Alle Seiten sollen dieselbe Navigation mit korrekten relativen Links enthalten und ein Favicon eingebunden haben.

Weiterführende Informationen: W3Schools – HTML Beispiele

Wichtige HTML-Tags

Eine kompakte Übersicht der wichtigsten Tags – zum Nachschlagen und Wiederholen.

<!DOCTYPE html>

Deklariert das Dokument als HTML5. Muss die allererste Zeile jeder HTML-Datei sein.

<!DOCTYPE html>

<html>

Das Wurzelelement jeder HTML-Seite. Enthält alle anderen Elemente. Das lang-Attribut gibt die Sprache an.

<html lang="de">
  ...
</html>

<head>

Enthält Metadaten: Titel, Zeichenkodierung, CSS-Links, Meta-Tags. Nicht sichtbar im Browser.

<head>
  <meta charset="UTF-8" />
  <title>Titel</title>
</head>

<body>

Enthält den gesamten sichtbaren Inhalt der Webseite: Texte, Bilder, Links, Formulare usw.

<body>
  <h1>Hallo Welt!</h1>
  <p>Sichtbarer Inhalt.</p>
</body>

<h1>–<h6>

Überschriften in sechs Hierarchiestufen. <h1> ist die wichtigste – pro Seite nur einmal verwenden.

<h1>Haupttitel</h1>
<h2>Untertitel</h2>
<h3>Abschnitt</h3>

<p>

Definiert einen Absatz. Erzeugt automatisch einen Abstand zum nächsten Element.

<p>Das ist ein Absatz.</p>
<p>Das ist <strong>wichtig</strong>.</p>

<a>

Erstellt einen Hyperlink. Das href-Attribut enthält die Zieladresse.

<a href="https://www.w3.org">
  W3C besuchen
</a>

<img>

Bindet ein Bild ein. src gibt den Pfad an, alt den Alternativtext (Pflicht!).

<img
  src="bild.jpg"
  alt="Beschreibung"
  width="400"
/>

<ul> / <ol> / <li>

<ul> für ungeordnete, <ol> für geordnete Listen. Einträge immer mit <li>.

<ul>
  <li>Punkt A</li>
  <li>Punkt B</li>
</ul>

<table>

Erstellt eine Tabelle. Struktur: <thead>, <tbody>, <tr>, <th>, <td>.

<table>
  <tr>
    <th>Name</th>
    <th>Note</th>
  </tr>
  <tr>
    <td>Mia</td>
    <td>1</td>
  </tr>
</table>

<form> / <input>

Container für Formulare. <input> ist das vielseitigste Formularelement – steuere den Typ mit dem type-Attribut.

<form action="/senden" method="post">
  <input type="text" name="name" />
  <input type="email" name="mail" />
  <button type="submit">Senden</button>
</form>

<div> / <span>

<div> ist ein generischer Block-Container, <span> ein generischer Inline-Container. Nutze semantische Tags wenn möglich.

<div class="karte">
  <p>Text mit
    <span class="rot">rotem</span>
    Wort.
  </p>
</div>

Tipps zum Lernen

HTML ist keine Sprache, die man auswendig lernt – man gewöhnt sich an die Muster durch Wiederholung und Praxis. Hier sind bewährte Tipps, die dir beim Lernen helfen: