HTML-Dokumentation
Kompakte, beispielorientierte HTML-Referenz. Konzept lesen, Code ansehen, dann in einem Coddy-Lernweg üben.
Geführten HTML-Lernweg startenErste Schritte
- Doctype`<!DOCTYPE html>` ist die erste Zeile jedes HTML-Dokuments. Es sagt dem Browser, dass er die Seite im Standardmodus statt im Quirks-Modus darstellen soll. Hier lernst du die Syntax, was alte Doctypes auslösen und wie du den Modus prüfst.
- HTML TagsHTML-Tags zeichnen Inhalte aus, damit der Browser weiß, was jeder Teil ist: eine Überschrift, ein Absatz, ein Link, ein Bild. Hier lernst du, wie Tags und Elemente funktionieren, welche Tags kein schließendes Tag haben, wie Verschachtelung funktioniert und welche Tags du am häufigsten brauchst.
- HTML AttributeAttribute geben einem HTML-Element zusätzliche Informationen: wohin ein Link führt, was ein Bild zeigt, welche CSS-Klasse gilt. Hier lernst du die Syntax, die globalen Attribute, die jedes Element akzeptiert, class und id, boolesche Attribute und data-* Attribute.
- HTML KommentarEin HTML-Kommentar ist Text zwischen <!-- und -->, den der Browser nicht anzeigt. Hier lernst du die Syntax, mehrzeilige Kommentare, wie du Code auskommentierst, den Editor-Shortcut, warum Kommentare nicht verschachtelt werden können und warum sie nie privat sind.
- HTML divDas <div>-Tag ist ein allgemeiner Block-Container ohne eigene Bedeutung. Hier lernst du, wie du damit Inhalte gruppierst, es über eine Klasse stylst, Layouts mit divs und Flexbox baust und wann ein semantisches Tag oder ein Button die bessere Wahl ist.
- HTML spanDas <span>-Tag ist ein allgemeiner Inline-Container: Es umschließt ein paar Wörter innerhalb einer Zeile, damit du sie stylen oder per Skript ansprechen kannst, ohne die Zeile zu brechen. Hier lernst du, wie du es einsetzt, wie es sich von div unterscheidet und wann ein spezifischeres Tag besser passt.
Text
- ÜberschriftenHTML hat sechs Überschriftenebenen, <h1> bis <h6>, die einer Seite ihre Gliederung geben. Hier lernst du die Standardgrößen, wie du Überschriften ordnest, wie viele h1-Tags du verwendest, wie du ihre Größe mit CSS änderst und wie Screenreader sie nutzen.
- ZeilenumbruchMit <br> beginnst du eine neue Zeile innerhalb eines Textblocks. Hier lernst du, wann <br> richtig ist und wann ein Absatz besser passt, wie du Zeilenumbrüche aus deinem Text übernimmst, wie lange Wörter mit <wbr> umbrechen dürfen und wie du einen Umbruch verhinderst.
- LeerzeichenBrowser fassen jede Folge von Leerzeichen in HTML zu einem zusammen. Hier lernst du, wie du mit zusätzliche Leerzeichen einfügst, was ein geschütztes Leerzeichen macht, wie du Leerzeichen und Tabs mit <pre> und white-space erhältst und wann CSS-Abstände das bessere Werkzeug sind.
- Fett und kursivMit <strong> oder <b> schreibst du Text in HTML fett, mit <em> oder <i> kursiv. Hier lernst du, welches Tag wann passt, wie du fett und kursiv kombinierst und wie du Text stattdessen mit CSS fett oder kursiv machst.
- UnterstreichenIn HTML unterstreichst du Text mit <u> oder CSS text-decoration und streichst ihn mit <s> oder <del> durch. Hier lernst du, was jedes Tag bedeutet, wie <ins> und <del> Änderungen markieren und warum unterstrichener Text, der kein Link ist, Leser verwirrt.
- HochgestelltHochgestellten Text schreibst du mit <sup>, tiefgestellten mit <sub>: Exponenten, Ordinalzahlen, Fußnotenzeichen und chemische Formeln. Hier lernst du die üblichen Einsätze, wie du verhinderst, dass sie Zeilen auseinanderschieben, und wann ein Unicode-Zeichen oder MathML besser passt.
- Horizontale LinieEine horizontale Linie zeichnest du in HTML mit dem <hr>-Tag. Hier lernst du, was es bedeutet, wie du Farbe, Dicke, Breite und Stil mit CSS änderst, wie du eine Trennlinie mit Text in der Mitte baust und wie du eine vertikale Linie machst.
- Text zentrierenText zentrierst du in HTML mit der CSS-Eigenschaft text-align: center. Hier lernst du, wo sie hingehört, warum sie an einem span nicht funktioniert, wie du Text vertikal in einem Kasten zentrierst, wie du Text am Anfang, am Ende oder an beiden Rändern ausrichtest und wie du Absätze einrückst.
Links und Bilder
- HTML Link (a href)So erzeugt das <a>-Element Links: das href-Attribut, absolute und relative URLs, Sprünge zu einem Abschnitt der Seite mit #id, Download-Links, Karten als Link und die Fehler, die Links kaputt machen.
- Link in neuem TabMit target="_blank" an einem Link öffnet er sich in einem neuen Tab. Diese Seite erklärt rel="noopener" und noreferrer, wie du Nutzern zeigst, dass ein Link einen neuen Tab öffnet, die anderen target-Werte und wie du es per JavaScript machst.
- mailto-LinkErstelle mit href="mailto:" einen Link, der eine neue E-Mail öffnet, füll Betreff, Text, cc und bcc aus, kodiere sie richtig und baue Links zum Anrufen mit tel: und sms:.
- Button als LinkDer richtige Weg zu einem Button, der auf eine andere Seite führt, ist ein Link, der wie ein Button gestylt ist. Hier siehst du, warum ein Button in einem Link und Navigation per onclick Probleme machen, wann ein Formular-Button die richtige Wahl ist und wie du Link-Buttons stylst und deaktivierst.
- HTML BilderSo fügst du in HTML ein Bild mit dem <img>-Tag ein: src und alt, die Bildgröße mit width und height festlegen, responsive Bilder, Zuschneiden mit object-fit, Bildunterschriften mit figure, Lazy Loading und die Lücke unter Bildern.
Listen und Tabellen
- HTML ListenSo erstellst du Listen in HTML: Aufzählungspunkte mit <ul>, nummerierte Listen mit <ol> (start, reversed, Buchstaben und römische Zahlen), verschachtelte Listen, Beschreibungslisten und wie du Aufzählungszeichen mit CSS stylst oder entfernst.
- HTML TabelleSo erstellst du eine Tabelle in HTML: Zeilen mit <tr>, Zellen mit <td>, Kopfzellen mit <th> und scope, Tabellenüberschriften mit caption, thead, tbody und tfoot, Zebrastreifen und Tabellen, die auf kleinen Bildschirmen scrollen.
- TabellenrahmenSo gibst du einer HTML-Tabelle mit CSS Rahmen: einfache Linien mit border-collapse, border-spacing, nur Zeilenlinien, nur innere Linien, abgerundete Ecken und warum das border-Attribut obsolet ist.
- colspan und rowspanMit colspan verbindest du Tabellenzellen über mehrere Spalten, mit rowspan über mehrere Zeilen. Hier lernst du, wie du Zellen zählst, damit die Tabelle rechteckig bleibt, wie du gruppierte Überschriften baust und verbundene Tabellen für Screenreader lesbar hältst.
Formulare
- HTML FormularSo baust du ein Formular in HTML: das form-Element, name-Attribute, action und method (GET vs. POST), Gruppieren mit fieldset und legend, eingebaute Validierung mit required und pattern und das Absenden per JavaScript.
- Input-TypenAlle Typen des HTML-Tags <input> an einem Ort: text, email, password, number, range, date und time, color, file, hidden und der Rest, mit dem, was jeder Typ prüft, der Tastatur, die er auf Handys öffnet, und den Attributen, die sie gemeinsam haben.
- HTML ButtonSo erstellst du einen Button in HTML mit dem <button>-Element: die drei Typen (submit, button, reset), einen Wert mit dem Formular senden, deaktivierte Buttons, Icons und CSS-Styling, das den Fokusrahmen erhält.
- HTML CheckboxSo erstellst du eine Checkbox in HTML mit <input type="checkbox">: Labels, das Attribut checked, was das Formular sendet, wenn sie angehakt ist und wenn nicht, Gruppen von Checkboxen, Alle auswählen mit dem Zustand indeterminate und Styling.
- Radio ButtonSo funktionieren Radio Buttons in HTML: Gruppieren mit dem Attribut name, eine Standardauswahl mit checked, Pflichtgruppen, den gewählten Wert in JavaScript auslesen, Tastaturverhalten und Styling als eigene Kreise oder Karten.
- Select DropdownSo erstellst du eine Dropdown-Liste in HTML mit <select> und <option>: Werte, eine Standard- oder Platzhalter-Option, required, Optionsgruppen, Mehrfachauswahl, den Wert in JavaScript lesen und setzen und den Pfeil stylen.
- HTML TextareaSo erstellst du ein mehrzeiliges Textfeld mit <textarea>: rows und cols, Standardtext zwischen den Tags, Größe ändern und automatisch wachsen, maxlength mit Zeichenzähler, Zeilenumbrüche im gesendeten Text und Styling.
- HTML LabelSo gibt das <label>-Element einem Formularfeld seinen Namen: verbinden mit for und id oder durch Umschließen, die größere Klickfläche bei Checkboxen und Radio Buttons, Hinweise und Fehlermeldungen, versteckte Labels und die Fehler, die die Verbindung kaputt machen.
Semantisches HTML
- Semantisches HTMLSemantisches HTML heißt, Tags danach auszuwählen, was der Inhalt ist, nicht wie er aussieht. Hier lernst du die semantischen Layout-Tags (header, nav, main, article, aside, footer), was sie Screenreadern und Suchmaschinen bringen und wie du deine Seitenstruktur prüfst.
- HTML HeaderDas <header>-Element enthält die Einleitung einer Seite oder eines Abschnitts: ein Logo, einen Titel, Navigation, eine Autorenzeile. Hier lernst du, wie du einen Website-Header baust, wie sich <header> von <head> und Überschriften unterscheidet, wie du es in Artikeln einsetzt und wie du es sticky machst.
- HTML FooterDas <footer>-Element schließt eine Seite oder einen Abschnitt ab: Copyright, Kontaktdaten, Links, Infos zum Autor. Hier lernst du, wie du einen Website-Footer mit Linkspalten baust, wie er auf einer kurzen Seite unten bleibt und wie Footer in Artikeln funktionieren.
- HTML navDas <nav>-Element markiert einen Block mit wichtigen Navigationslinks. Hier lernst du, wie du eine Navigationsleiste mit <nav> und einer Liste baust, wie du die aktuelle Seite markierst, wie du mehrere navs auf einer Seite beschriftest und wie du ein Menü für Mobilgeräte zum Aufklappen machst.
- HTML sectionDas <section>-Element gruppiert Inhalt zu einem Thema unter einer eigenen Überschrift. Hier lernst du, wann du <section> verwendest, wann <article> oder <div> die bessere Wahl ist, wie die drei ineinander verschachtelt werden und wie ein beschrifteter Abschnitt zur Landmark wird.
Head und Meta-Tags
- Title-TagDas <title>-Element benennt die Seite im Browser-Tab, in Lesezeichen und in Suchergebnissen. Hier lernst du, wo es hingehört, wie lang es sein sollte, wie es sich von <h1> und dem title-Attribut unterscheidet und wie du es mit JavaScript änderst.
- Meta ViewportDas Meta-Tag viewport sagt Handys, dass sie die Seite in der Breite des Bildschirms statt in Desktop-Breite aufbauen sollen. Hier lernst du das Standard-Tag, was jeder Wert bewirkt, warum responsives CSS davon abhängt und welche Werte du vermeiden solltest.
- HTML WeiterleitungLeite eine Seite mit einem Meta-Refresh-Tag in reinem HTML, mit JavaScript oder auf dem Server auf eine andere weiter. Hier lernst du die Syntax von Meta Refresh, wie du eine Seite automatisch neu lädst, warum eine 301-Weiterleitung auf dem Server die bessere Wahl ist und was Suchmaschinen mit jeder Variante machen.
- FaviconEin Favicon ist das kleine Icon im Browser-Tab. Hier lernst du das link-Tag, das eines einfügt, welche Dateien und Größen du bereitstellst (ICO, SVG, PNG, apple-touch-icon), wie du ein Favicon aus SVG oder Emoji machst, wie du es mit JavaScript änderst und warum ein altes weiter angezeigt wird.
- lang-AttributDas lang-Attribut sagt Browsern, Screenreadern und Übersetzungstools, in welcher Sprache dein Inhalt geschrieben ist. Hier lernst du, wohin es gehört, welche Codes du verwendest (en, de, de-AT), wie du eine Wendung in einer anderen Sprache markierst und welche sichtbaren Dinge es verändert.
Medien und Interaktives
- HTML iframeDas <iframe>-Element zeigt eine andere Webseite in deiner an. Hier lernst du die nötigen Attribute (src, title, width, height), wie du YouTube-Videos und Karten einbettest, wie du ein iframe responsiv machst, wie sandbox einschränkt, was es darf, und warum sich manche Websites nicht darin laden lassen.
- HTML VideoDas <video>-Element spielt Videodateien mit dem eigenen Player des Browsers ab. Hier lernst du das Markup, die wichtigen Attribute (controls, autoplay, muted, loop, playsinline, poster, preload), Fallback-Formate mit <source>, Untertitel mit <track>, responsive Größen und die Steuerung per JavaScript.
- HTML AudioDas <audio>-Element spielt Tondateien mit dem eingebauten Player des Browsers ab. Hier lernst du das Markup, die Attribute (controls, autoplay, loop, muted, preload), welche Formate du verwendest, warum Autoplay mit Ton blockiert wird und wie du mit JavaScript einen eigenen Play-Button baust.
- details und summaryDie Elemente <details> und <summary> erzeugen einen aufklappbaren Abschnitt ganz ohne JavaScript: Die summary ist immer sichtbar, und ein Klick darauf zeigt oder versteckt den Rest. Hier lernst du das Markup, die Attribute open und name, Akkordeons, das Stylen des Pfeils und das Event toggle.
