# HTML – Struktur für Webseiten – erklärt, belegt, kurz gehalten

> Dieses Portal erklärt HTML: den Aufbau eines Dokuments, die einzelnen Elemente und Attribute, semantische Auszeichnung und die zugehörigen Standards. Tutorials beantworten die Frage nach der Anwendung, Glossareinträge die nach der Bedeutung. Angaben zu Spezifikationen sind mit Datum und Fundstelle belegt; unbelegte Zahlen werden nicht geführt. Jede Seite ist einer namentlich genannten Person zugeordnet und trägt ein Prüfdatum.

Stand: 2026-08-19. Sprache: Deutsch. Texte dieses Portals dürfen zitiert und zusammengefasst werden, sofern die Quelle mit Namen und Adresse genannt wird.

## Betreiber

- Herausgeber: SEO NW – Alexander Müller
- Website: [SEO NW – Alexander Müller](https://www.seo-manager.info)
- Angebot: [HTML](https://hypertext-markup-language.com/)
- E-Mail: 301@seo-manager.info
- Telefon: 0800 188 7 100
- Redaktionelle Verantwortung: Alexander Müller

## Werkzeuge

Quelle: [Werkzeuge](https://hypertext-markup-language.com/werkzeuge/)
Für HTML-Arbeit im deutschsprachigen Raum genügen meist zwei Werkzeuge: der Markup Validation Service des W3C prüft ein Dokument gegen die Spezifikation, und die Entwicklerwerkzeuge des Browsers zeigen, was der Browser nach seiner Fehlerkorrektur daraus gemacht hat. Ergänzend sinnvoll sind MDN Web Docs zum Nachschlagen, WAVE für Barrierefreiheit, Can I use für die Browserunterstützung und der Schema Markup Validator für strukturierte Daten.

1. [W3C Markup Validation Service](https://validator.w3.org) – Gesamtbewertung 9.0/10
   - Standort: Prüfung, international
   - Kurzurteil: Die Instanz, die sagt, was gültiges HTML ist – nicht was ein einzelner Browser zufällig noch darstellt.
   - Stärken:
     - Prüft gegen die Spezifikation, nicht gegen einen Browser
     - Adresse, Datei oder eingefügter Quelltext
     - Zeigt Zeile und Spalte jedes Fundes
     - Kostenlos, ohne Anmeldung, quelloffen
2. [Entwicklerwerkzeuge des Browsers](https://developer.mozilla.org/de/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) – Gesamtbewertung 8.5/10
   - Standort: Prüfung, international
   - Kurzurteil: Schon installiert, kostet nichts und zeigt als Einziges, was der Browser aus dem Quelltext tatsächlich gemacht hat.
   - Stärken:
     - Zeigt den Baum nach der Browser-Korrektur
     - Zugänglichkeitsbaum eingebaut
     - Netzwerk, Ladezeit und Darstellung in einem
     - Keine Installation, keine Daten verlassen den Rechner
3. [MDN Web Docs](https://developer.mozilla.org/de/) – Gesamtbewertung 8.5/10
   - Standort: Nachschlagen, international
   - Kurzurteil: Das Nachschlagewerk, auf das sich alle einigen – in Teilen auf Deutsch, immer mit Angabe zur Browserunterstützung.
   - Stärken:
     - Vollständige Elementreferenz mit erlaubtem Zusammenhang
     - Angaben zur Browserunterstützung direkt am Element
     - Teilweise auf Deutsch
     - Quelloffen, von der Gemeinschaft gepflegt
4. [HTMLHint](https://htmlhint.com) – Gesamtbewertung 6.5/10
   - Standort: Gültigkeit, international
   - Kurzurteil: Prüft beim Schreiben statt nach dem Hochladen – im Editor, während man tippt.
   - Stärken:
     - Läuft im Editor beim Schreiben
     - Regelsatz einstellbar und teilbar
     - Auch für den Bauprozess geeignet
     - Quelloffen
4. [WAVE](https://wave.webaim.org) – Gesamtbewertung 8.0/10
   - Standort: Zugänglichkeit, international
   - Kurzurteil: Zeigt Barrieren dort an, wo sie entstehen – im Bild der Seite statt in einer Fehlerliste.
   - Stärken:
     - Befunde direkt im Seitenbild
     - Kontrastprüfung eingebaut
     - Erweiterung für den Browser verfügbar
     - Kostenlos für einzelne Adressen
5. [axe DevTools](https://www.deque.com/axe/devtools/) – Gesamtbewertung 8.0/10
   - Standort: Zugänglichkeit, international
   - Kurzurteil: Die Prüfbibliothek, auf der die meisten anderen Werkzeuge aufbauen – mit auffallend wenigen Fehlalarmen.
   - Stärken:
     - Kaum Fehlalarme, jeder Fund mit Regelbezug
     - Nennt die verletzte WCAG-Erfolgsbedingung
     - Als Erweiterung kostenlos
     - Auch als Bibliothek für automatisierte Läufe
5. [Can I use](https://caniuse.com) – Gesamtbewertung 7.5/10
   - Standort: Nachschlagen, international
   - Kurzurteil: Beantwortet die Frage, die vor jedem neuen Element steht: Kann ich das schon benutzen?
   - Stärken:
     - Unterstützung je Element und Attribut
     - Fußnoten zu Teilunterstützung
     - Nach Marktanteilen gewichtbar
     - Datenbestand offen verfügbar
5. [html-validate](https://html-validate.org) – Gesamtbewertung 7.0/10
   - Standort: Gültigkeit, international
   - Kurzurteil: Prüft im Bauprozess und bricht ab, wenn etwas nicht stimmt – bevor es online geht.
   - Stärken:
     - Bricht die Veröffentlichung bei Verstößen ab
     - Regeln einzeln abstufbar
     - Prüft auch Vorlagen, nicht nur fertiges HTML
     - Quelloffen
6. [NVDA](https://www.nvaccess.org) – Gesamtbewertung 8.0/10
   - Standort: Zugänglichkeit, international
   - Kurzurteil: Der kostenlose Bildschirmleser – und damit die einzige Möglichkeit zu hören, was die eigene Auszeichnung tatsächlich bedeutet.
   - Stärken:
     - Kostenlos und quelloffen
     - Deutschsprachige Ausgabe eingebaut
     - Zeigt, was automatische Prüfung nicht findet
     - Weit verbreitet unter blinden Nutzern
6. [Schema Markup Validator](https://validator.schema.org) – Gesamtbewertung 7.5/10
   - Standort: Struktur, international
   - Kurzurteil: Prüft strukturierte Daten gegen den Standard – nicht nur gegen das, was eine Suchmaschine davon anzeigt.
   - Stärken:
     - Prüfung gegen den Standard statt gegen eine Darstellung
     - Erkennt Verschachtelungsfehler
     - Nimmt Adresse oder eingefügten Quelltext
     - Kostenlos, ohne Anmeldung
7. [Firefox Barrierefreiheits-Inspektor](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/) – Gesamtbewertung 7.5/10
   - Standort: Browser, international
   - Kurzurteil: Zeigt den Baum, den Hilfsmittel sehen – daneben den, den man geschrieben hat.
   - Stärken:
     - Zeigt Rolle, Name und Zustand je Element
     - Prüft auf häufige Probleme
     - Simulation von Farbfehlsichtigkeit
     - Eingebaut, keine Erweiterung nötig
7. [HTML-Validator](https://validator.hypertext-markup-language.com) – Gesamtbewertung 7.0/10
   - Standort: Prüfung, Deutschland
   - Kurzurteil: Prüfung mit deutschsprachiger Erklärung, was der Fund bedeutet – eigenes Projekt.
   - Stärken:
     - Erklärung auf Deutsch statt Fehlernummer
     - Beispiel der zulässigen Fassung je Fund
     - Ohne Anmeldung
     - Läuft in Deutschland
8. [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) – Gesamtbewertung 7.0/10
   - Standort: Prüfung, international
   - Kurzurteil: Vier Prüfungen in einem Durchlauf – im Browser eingebaut, ohne dass Daten das Haus verlassen.
   - Stärken:
     - Vier Bereiche in einem Durchlauf
     - In den Entwicklerwerkzeugen eingebaut
     - Auch als Kommandozeilenwerkzeug
     - Lokal, ohne Datenweitergabe
8. [Playwright](https://playwright.dev) – Gesamtbewertung 6.5/10
   - Standort: Browser, international
   - Kurzurteil: Steuert echte Browser über ein Skript – für Prüfungen, die sonst niemand wiederholt.
   - Stärken:
     - Drei Browser mit einer Anweisung
     - Aufnahmen über mehrere Bildschirmbreiten
     - Tastaturbedienung prüfbar
     - Quelloffen
9. [BIK BITV-Test](https://www.bitvtest.de) – Gesamtbewertung 7.5/10
   - Standort: Zugänglichkeit, Deutschland
   - Kurzurteil: Das deutsche Prüfverfahren – 98 Schritte, öffentlich dokumentiert, in der Selbstbewertung kostenlos nutzbar.
   - Stärken:
     - Prüfschritte vollständig öffentlich
     - Abgestufte Bewertung statt ja/nein
     - Auf deutsche Rechtslage bezogen
     - Als Prüfliste ohne Auftrag verwendbar
9. [PageSpeed.de](https://pagespeed.de) – Gesamtbewertung 6.5/10
   - Standort: Ladezeit, Deutschland
   - Kurzurteil: Ladezeit für mehrere Adressen auf einmal, deutschsprachig erklärt – eigenes Werkzeug.
   - Stärken:
     - Mehrere Adressen in einem Durchlauf
     - Felddaten neben Laborwerten
     - Erklärungen ohne Fachjargon
     - Ohne Anmeldung
10. [Nu Html Checker](https://validator.github.io/validator/) – Gesamtbewertung 7.5/10
   - Standort: Prüfung, international
   - Kurzurteil: Dieselbe Prüfung wie beim W3C – aber auf dem eigenen Rechner und automatisierbar.
   - Stärken:
     - Läuft lokal, keine Übertragung an Dritte
     - Für Massenprüfungen automatisierbar
     - Ausgabe auch maschinenlesbar
     - Quelloffen, identische Prüflogik wie beim W3C
10. [SEO CMS](https://seo-cms.seo-manager.info) – Gesamtbewertung 6.0/10
   - Standort: Redaktion, Deutschland
   - Kurzurteil: Kein Prüfwerkzeug, sondern das System, mit dem diese Website erzeugt wird. Eigene Entwicklung.
   - Stärken:
     - Statische Auslieferung, kein Programmcode im Auslieferungspfad
     - Eigene Felder für Kurzantwort und Kernaussagen
     - Adresssegmente frei wählbar – wichtig bei Umzügen
     - Mehrere Portale auf einem Kern
13. [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) – Gesamtbewertung 7.0/10
   - Standort: Barrierefreiheit, international
   - Kurzurteil: Misst Kontrast überall auf dem Bildschirm – auch dort, wo kein Browser ist.
   - Stärken:
     - Pipette für jede Stelle des Bildschirms
     - Getrennte Bewertung nach Textgröße
     - Auch für Grafiken und Bedienelemente
     - Kostenlos für Windows und macOS
13. [Prettier](https://prettier.io) – Gesamtbewertung 6.5/10
   - Standort: Bearbeitung, international
   - Kurzurteil: Beendet die Diskussion über Einrückung, indem sie niemand mehr führt.
   - Stärken:
     - Einheitliche Formatierung ohne Diskussion
     - In allen verbreiteten Editoren verfügbar
     - Änderungsübersichten bleiben lesbar
     - Quelloffen
14. [Accessibility Insights](https://accessibilityinsights.io) – Gesamtbewertung 7.5/10
   - Standort: Barrierefreiheit, international
   - Kurzurteil: Führt durch die Prüfschritte, die sich nicht automatisieren lassen – Frage für Frage.
   - Stärken:
     - Geführter Durchgang für manuelle Prüfung
     - Sichtbare Hervorhebung von Tastaturfokus und Überschriften
     - Bericht zum Weitergeben
     - Kostenlos, quelloffen
14. [Screaming Frog SEO Spider](https://www.screamingfrog.co.uk/seo-spider/) – Gesamtbewertung 7.0/10
   - Standort: Auswertung, international
   - Kurzurteil: Prüft Auszeichnung nicht auf einer Seite, sondern auf allen – dort, wo Fehler sich unbemerkt vervielfachen.
   - Stärken:
     - Findet Muster statt Einzelfälle
     - Vollständige Adressliste vor jedem Umzug
     - Vergleich zweier Durchläufe
     - Bis 500 Adressen kostenlos
15. [Pa11y](https://pa11y.org) – Gesamtbewertung 6.5/10
   - Standort: Barrierefreiheit, international
   - Kurzurteil: Barrierefreiheitsprüfung über viele Adressen, wiederholbar und ohne Klicken.
   - Stärken:
     - Viele Adressen in einem Durchlauf
     - In den Bauprozess einbindbar
     - Schwellenwerte einstellbar
     - Quelloffen
15. [SVGOMG](https://jakearchibald.github.io/svgomg/) – Gesamtbewertung 6.5/10
   - Standort: Medien, international
   - Kurzurteil: Räumt SVG-Dateien auf, bevor sie im Dokument landen – mit sichtbarer Vorschau jedes Eingriffs.
   - Stärken:
     - Vorschau zu jedem einzelnen Eingriff
     - Läuft lokal im Browser
     - Behält Zugänglichkeitsangaben auf Wunsch
     - Quelloffen
16. [ARC Toolkit](https://www.tpgi.com/arc-platform/arc-toolkit/) – Gesamtbewertung 6.5/10
   - Standort: Barrierefreiheit, international
   - Kurzurteil: Für die Feinarbeit: zeigt Rollen, Beschriftungen und Beziehungen im Detail.
   - Stärken:
     - Zeigt Beziehungen zwischen Elementen
     - Prüft Rollen und zugängliche Namen einzeln
     - Filter nach Prüfkategorie
     - Kostenlose Erweiterung
16. [Search-Console.PRO](https://search-console.pro) – Gesamtbewertung 6.5/10
   - Standort: Auswertung, Deutschland
   - Kurzurteil: Verbindet Suchdaten mit Ladezeit je Adresse – zeigt damit, welche Seite ein Problem hat, das jemanden betrifft. Eigenes Werkzeug.
   - Stärken:
     - Suchdaten und Ladezeit je Adresse nebeneinander
     - Sortierung nach Wirkung statt nach Messwert
     - Felddaten statt Laborwerte
     - Vergleich von Zeiträumen über viele Adressen
19. [HTML Living Standard](https://html.spec.whatwg.org/multipage/) – Gesamtbewertung 7.5/10
   - Standort: Nachschlagen, international
   - Kurzurteil: Die Quelle selbst – laufend fortgeschrieben, ohne Versionsnummern.
   - Stärken:
     - Verbindliche Quelle bei Zweifeln
     - Inhaltsmodell und erlaubter Zusammenhang je Element
     - Laufend fortgeschrieben
     - Frei zugänglich
20. [web.dev: Learn HTML](https://web.dev/learn/html) – Gesamtbewertung 7.0/10
   - Standort: Nachschlagen, international
   - Kurzurteil: Ein Lehrgang mit Reihenfolge – für alle, die nicht nachschlagen, sondern lernen wollen.
   - Stärken:
     - Aufbauende Reihenfolge statt Nachschlagewerk
     - Formulare und Zugänglichkeit ausführlich
     - Mit Übungen
     - Kostenlos
22. [Rich Results Test](https://search.google.com/test/rich-results) – Gesamtbewertung 7.0/10
   - Standort: Struktur, international
   - Kurzurteil: Beantwortet die andere Frage: Was macht Google aus meiner Auszeichnung?
   - Stärken:
     - Zeigt Googles Sicht auf die Auszeichnung
     - Ansicht des gerenderten HTML
     - Nennt fehlende Pflichtangaben je Typ
     - Kostenlos
23. [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/) – Gesamtbewertung 6.0/10
   - Standort: Struktur, international
   - Kurzurteil: Zeigt die Vorschaukarte, bevor jemand den Verweis teilt – und leert den Zwischenspeicher.
   - Stärken:
     - Vorschau vor dem ersten Teilen
     - Zwischenspeicher neu einlesbar
     - Nennt fehlende Pflichtangaben
     - Zeigt, welches Bild gewählt wird
24. [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/) – Gesamtbewertung 6.0/10
   - Standort: Struktur, international
   - Kurzurteil: Dasselbe für das Netzwerk, in dem im deutschsprachigen Raum fachlich geteilt wird.
   - Stärken:
     - Liest die Angaben neu ein
     - Zeigt die Karte vor dem Teilen
     - Nennt fehlende Angaben
     - Für den fachlichen Austausch im DACH-Raum einschlägig
26. [Squoosh](https://squoosh.app) – Gesamtbewertung 6.5/10
   - Standort: Medien, international
   - Kurzurteil: Zwei Formate nebeneinander, Regler in der Mitte – man sieht den Unterschied, statt ihn zu vermuten.
   - Stärken:
     - Direkter Vergleich mit Regler
     - Alle verbreiteten Formate, auch AVIF und WebP
     - Läuft lokal, keine Übertragung
     - Quelloffen
27. [RealFaviconGenerator](https://realfavicongenerator.net) – Gesamtbewertung 6.0/10
   - Standort: Medien, international
   - Kurzurteil: Erzeugt den ganzen Satz an Symbolen samt zugehöriger Auszeichnung – und prüft bestehende.
   - Stärken:
     - Vollständiger Satz statt einzelner Datei
     - Vorschau in den echten Zusammenhängen
     - Prüfung bestehender Websites
     - Liefert den HTML-Block mit
30. [WebPageTest](https://www.webpagetest.org) – Gesamtbewertung 7.0/10
   - Standort: Ladezeit, international
   - Kurzurteil: Misst von einem gewählten Standort mit gewählter Verbindung – und zeigt den Aufbau Bild für Bild.
   - Stärken:
     - Standort und Verbindung wählbar
     - Seitenaufbau als Bildfolge
     - Wasserfalldiagramm je Datei
     - Grundfunktionen kostenlos
31. [Chrome UX Report](https://developer.chrome.com/docs/crux) – Gesamtbewertung 6.5/10
   - Standort: Ladezeit, international
   - Kurzurteil: Felddaten echter Besucher – die einzige Grundlage, auf der sich über Ladezeit streiten lässt.
   - Stärken:
     - Echte Nutzerdaten statt Prüflauf
     - Nach Gerät und Verbindung getrennt
     - 28-Tage-Zeitraum, gut vergleichbar
     - Frei abfragbar
34. [Wayback Machine](https://web.archive.org) – Gesamtbewertung 6.5/10
   - Standort: Bestand, international
   - Kurzurteil: Das Gedächtnis des Netzes – bei Domainkäufen und nach verunglückten Umzügen oft die einzige verbliebene Quelle.
   - Stärken:
     - Vorgeschichte gebrauchter Domains
     - Rekonstruktion nach Datenverlust
     - Nachweis früherer Inhalte
     - Kostenlos
35. [W3C Link Checker](https://validator.w3.org/checklink) – Gesamtbewertung 6.0/10
   - Standort: Bestand, international
   - Kurzurteil: Findet tote Verweise – die Sorte Fehler, die nach Jahren entsteht, ohne dass jemand etwas geändert hat.
   - Stärken:
     - Prüft auch die Ziele, nicht nur die Auszeichnung
     - Unterscheidet Weiterleitung und Fehler
     - Rekursiv über mehrere Ebenen
     - Kostenlos, ohne Anmeldung
38. [Emmet](https://emmet.io) – Gesamtbewertung 6.0/10
   - Standort: Formatieren, international
   - Kurzurteil: Aus einer Zeile Kurzschrift wird ein ganzes Gerüst – in den meisten Editoren bereits eingebaut.
   - Stärken:
     - Ganze Gerüste aus einer Zeile
     - In den meisten Editoren eingebaut
     - Syntax an CSS-Auswahlmuster angelehnt
     - Weniger Tippfehler in der Struktur
39. [HTML Tidy](https://www.html-tidy.org) – Gesamtbewertung 6.0/10
   - Standort: Formatieren, international
   - Kurzurteil: Räumt fremdes HTML auf – und macht lesbar, was aus einem Textverarbeitungsprogramm kommt.
   - Stärken:
     - Repariert Verschachtelung und offene Elemente
     - Entfernt Auszeichnung aus Fremdsystemen
     - Als Kommandozeilenwerkzeug automatisierbar
     - Quelloffen, seit 1998 gepflegt
40. [Security Headers](https://securityheaders.com) – Gesamtbewertung 7.0/10
   - Standort: Sicherheit, international
   - Kurzurteil: Prüft in Sekunden, welche Schutzangaben der Server mitliefert – und welche fehlen.
   - Stärken:
     - Ergebnis in Sekunden
     - Erklärung zu jeder fehlenden Angabe
     - Zeigt auch überflüssige und veraltete Kopfzeilen
     - Kostenlos
41. [Mozilla Observatory](https://developer.mozilla.org/en-US/observatory) – Gesamtbewertung 6.5/10
   - Standort: Sicherheit, international
   - Kurzurteil: Dieselbe Prüfung, ausführlicher begründet – mit Anleitung statt nur Befund.
   - Stärken:
     - Begründung und Handlungsempfehlung je Punkt
     - Verlauf über frühere Prüfungen
     - Von Mozilla gepflegt
     - Kostenlos
42. [CSP Evaluator](https://csp-evaluator.withgoogle.com) – Gesamtbewertung 6.0/10
   - Standort: Sicherheit, international
   - Kurzurteil: Prüft eine Content-Security-Policy auf Lücken – die meisten sehen streng aus und sind es nicht.
   - Stärken:
     - Bewertet jede Anweisung einzeln
     - Nennt konkrete Umgehungsmöglichkeiten
     - Auch für Richtlinienentwürfe
     - Kostenlos
43. [Webbkoll](https://webbkoll.dataskydd.net) – Gesamtbewertung 6.5/10
   - Standort: Sicherheit, Schweden
   - Kurzurteil: Zeigt, welche Drittanbieter eine Seite lädt und welche Kennungen dabei gesetzt werden – bei DSGVO-Fragen der schnellste Einstieg.
   - Stärken:
     - Listet alle Anfragen an Dritte
     - Zeigt gesetzte Kennungen und Speicherzugriffe
     - Prüfmethode offengelegt, quelloffen
     - Ohne Konto nutzbar
44. [Can I email](https://www.caniemail.com) – Gesamtbewertung 6.5/10
   - Standort: E-Mail, international
   - Kurzurteil: Wie Can I use, nur für E-Mail-Programme – wo die Regeln zwanzig Jahre älter sind.
   - Stärken:
     - Unterstützung je E-Mail-Programm
     - Auch für CSS-Eigenschaften
     - Fußnoten zu Teilunterstützung
     - Quelloffen, laufend ergänzt
45. [MJML](https://mjml.io) – Gesamtbewertung 6.0/10
   - Standort: E-Mail, international
   - Kurzurteil: Man schreibt verständliche Auszeichnung, heraus kommt das Tabellengerüst, das E-Mail-Programme verlangen.
   - Stärken:
     - Lesbare Auszeichnung statt Tabellenverschachtelung
     - Erzeugt kompatibles Gerüst
     - Bausteine für wiederkehrende Teile
     - Quelloffen
46. [W3C Internationalization Checker](https://validator.w3.org/i18n-checker/) – Gesamtbewertung 7.0/10
   - Standort: Sprache, international
   - Kurzurteil: Prüft Sprachauszeichnung, Zeichenkodierung und Textrichtung – die unauffälligste Fehlerquelle überhaupt.
   - Stärken:
     - Prüft Sprachangabe im Dokument und in den Kopfzeilen
     - Findet widersprüchliche Zeichenkodierung
     - Hinweise zu fremdsprachigen Abschnitten
     - Kostenlos, vom W3C betrieben

## Eingetragene Werkzeuge

### FileZilla (Top-Eintrag)
- Profil: [FileZilla](https://hypertext-markup-language.com/downloads/filezilla)
- Inhaber: FileZilla Project (Tim Kosse)
- Website: [filezilla-project.org/](https://filezilla-project.org/)
- Standort: Webhosting
- Aktiv seit: 2001
- Leistungen: FTP, FTPS, SFTP, Verzeichnisvergleich, Warteschlange für Übertragungen, Serververwaltung, Wiederaufnahme abgebrochener Übertragungen
- Kurzbeschreibung: FileZilla überträgt Dateien zwischen dem eigenen Rechner und einem Webserver. Für eine statisch erzeugte Website ist das der übliche Weg, fertige HTML-Dateien hochzuladen. Das Programm beherrscht neben dem alten FTP auch die verschlüsselten Verfahren FTPS und SFTP – und nur die sollten verwendet werden: Bei einfachem FTP gehen Benutzername und Passwort unverschlüsselt über die Leitung. Beim…

### Mozilla Firefox (Top-Eintrag)
- Profil: [Mozilla Firefox](https://hypertext-markup-language.com/downloads/firefox)
- Inhaber: Mozilla
- Website: [www.mozilla.org/de/firefox/](https://www.mozilla.org/de/firefox/)
- Standort: Browser
- Aktiv seit: 2004
- Leistungen: Entwicklerwerkzeuge, Untersuchen-Ansicht, Barrierefreiheitsprüfung, Netzwerkanalyse, Responsive-Ansicht, Leseansicht, Quelltextanzeige
- Kurzbeschreibung: Firefox ist ein freier Browser unter der Mozilla Public License. Für die Arbeit an HTML zählen vor allem die eingebauten Entwicklerwerkzeuge, erreichbar mit F12. Drei Ansichten lohnen den Einstieg. Der Inspektor zeigt den tatsächlichen Dokumentbaum – also das, was der Browser aus der Datei gemacht hat, samt der Elemente, die er selbst ergänzt hat. Wer im Quelltext kein tbody geschrieben hat und…

### Texteditoren für HTML (Top-Eintrag)
- Profil: [Texteditoren für HTML](https://hypertext-markup-language.com/downloads/editor)
- Inhaber: verschiedene Projekte
- Website: [code.visualstudio.com/](https://code.visualstudio.com/)
- Standort: Editoren
- Leistungen: Syntaxhervorhebung, automatisches Schließen von Tags, Einrückung, Suchen über mehrere Dateien, Erweiterungen, Vorschau im Browser
- Kurzbeschreibung: Für HTML genügt jeder Editor, der reinen Text speichert. Eine Textverarbeitung genügt nicht: Sie fügt eigene Formatierung hinzu und speichert in einem eigenen Format. Drei Punkte entscheiden über die Eignung. Erstens die Kodierung: Die Datei muss als UTF-8 gespeichert werden, sonst erscheinen Umlaute falsch, egal was im Kopfbereich steht. Zweitens die Syntaxhervorhebung, weil ein vergessenes…

### W3C Markup Validation Service (Top-Eintrag)
- Profil: [W3C Markup Validation Service](https://hypertext-markup-language.com/downloads/w3c-validator)
- Inhaber: World Wide Web Consortium
- Website: [validator.w3.org](https://validator.w3.org)
- Standort: Validierung (kostenlos, quelloffen)
- Aktiv seit: 1997
- Leistungen: Prüfung gegen die Spezifikation, Adresse oder Datei oder Quelltext, Fundstellen mit Zeile und Spalte
- Kurzbeschreibung: Der amtliche Prüfdienst. Er nimmt eine Adresse, eine hochgeladene Datei oder eingefügten Quelltext und meldet jede Abweichung von der Spezifikation mit Zeile und Spalte. Wer ihn zum ersten Mal auf eine gewachsene Website loslässt, bekommt oft dreistellige Fehlerzahlen. Das schreckt ab und ist meist harmlos: Ein einziges nicht geschlossenes Element erzeugt Folgefehler bis zum Dokumentende. Die…

### WAVE (Top-Eintrag)
- Profil: [WAVE](https://hypertext-markup-language.com/downloads/wave)
- Inhaber: WebAIM, Utah State University
- Website: [wave.webaim.org](https://wave.webaim.org)
- Standort: Barrierefreiheit (kostenlos für einzelne Adressen)
- Aktiv seit: 2001
- Leistungen: Befunde im Seitenbild, Kontrastprüfung, Browsererweiterung, Strukturansicht
- Kurzbeschreibung: Legt Symbole direkt über die Seite: fehlende Alternativtexte, zu geringer Kontrast, übersprungene Überschriftenebenen, Formularfelder ohne Beschriftung. Der Vorteil gegenüber einer Fehlerliste ist, dass man sieht, welches Element gemeint ist. Gerade beim Einstieg spart das die Sucherei – man klickt auf das Symbol und die Erklärung erscheint neben dem betroffenen Element. Empfehlenswert ist die…

### NVDA (Top-Eintrag)
- Profil: [NVDA](https://hypertext-markup-language.com/downloads/nvda)
- Inhaber: NV Access
- Website: [www.nvaccess.org](https://www.nvaccess.org)
- Standort: Barrierefreiheit (kostenlos, quelloffen, Windows)
- Aktiv seit: 2006
- Leistungen: Bildschirmleser mit deutschsprachiger Ausgabe, prüft, was automatische Werkzeuge nicht finden
- Kurzbeschreibung: Der kostenlose Bildschirmleser für Windows – und damit die einzige Möglichkeit zu hören, was die eigene Auszeichnung tatsächlich bedeutet. Für den Einstieg genügen zwanzig Minuten: starten, den Bildschirm ausschalten und versuchen, auf der eigenen Website etwas zu erledigen. Die Erfahrung ist unangenehm und lehrreich. Sie verändert die Art, wie man danach Überschriften, Beschriftungen und…

### Entwicklerwerkzeuge des Browsers (Top-Eintrag)
- Profil: [Entwicklerwerkzeuge des Browsers](https://hypertext-markup-language.com/downloads/browser-devtools)
- Inhaber: Google, Mozilla, Apple, Microsoft
- Website: [developer.mozilla.org/de/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools](https://developer.mozilla.org/de/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)
- Standort: Browser (eingebaut, kostenlos)
- Aktiv seit: 2006
- Leistungen: Elementebaum nach der Fehlerkorrektur, Netzwerkansicht, Zugänglichkeitsbaum, Ansicht für Bildschirmgrößen
- Kurzbeschreibung: Mit F12 öffnet sich das wichtigste Werkzeug überhaupt – und das am häufigsten unterschätzte. Der entscheidende Punkt für HTML-Arbeit: Der Elementebaum zeigt nicht den geschriebenen Quelltext, sondern das Ergebnis nach der Fehlerkorrektur des Browsers. Wer beides vergleicht – Quelltextansicht gegen Elementebaum –, sieht sofort, wo etwas repariert wurde: ein verschobenes Element, ein Absatz, den…

### MDN Web Docs (Top-Eintrag)
- Profil: [MDN Web Docs](https://hypertext-markup-language.com/downloads/mdn-web-docs)
- Inhaber: Mozilla und Gemeinschaft
- Website: [developer.mozilla.org/de/](https://developer.mozilla.org/de/)
- Standort: Nachschlagen (kostenlos, teils auf Deutsch)
- Aktiv seit: 2005
- Leistungen: Elementreferenz mit erlaubtem Zusammenhang, Browserunterstützung am Element, Beispiele
- Kurzbeschreibung: Das Nachschlagewerk, auf das sich alle einigen. Zu jedem Element steht dort, wofür es gedacht ist, welche Attribute erlaubt sind, in welchem Zusammenhang es stehen darf und wie die Browserunterstützung aussieht. Der Aufbau jeder Elementseite folgt demselben Muster: kurze Beschreibung, Attribute, Beispiele, technische Zusammenfassung mit Inhaltsmodell und zugehöriger Rolle. Wer diesen Aufbau…

### Schema Markup Validator (Top-Eintrag)
- Profil: [Schema Markup Validator](https://hypertext-markup-language.com/downloads/schema-validator)
- Inhaber: Schema.org
- Website: [validator.schema.org](https://validator.schema.org)
- Standort: Strukturierte Daten (kostenlos, ohne Anmeldung)
- Aktiv seit: 2021
- Leistungen: Prüfung gegen den Standard, erkennt Verschachtelungsfehler, Adresse oder Quelltext
- Kurzbeschreibung: Prüft strukturierte Daten gegen den Standard – nicht gegen das, was eine einzelne Suchmaschine davon anzeigt. Das ist die Unterscheidung, die den Unterschied macht. Googles Prüfwerkzeug beantwortet: Entsteht eine erweiterte Darstellung? Dieses hier beantwortet: Ist die Auszeichnung korrekt? Beide Antworten können auseinandergehen, und die zweite ist die dauerhaftere – Darstellungen kommen und…

### Screaming Frog SEO Spider (Top-Eintrag)
- Profil: [Screaming Frog SEO Spider](https://hypertext-markup-language.com/downloads/screaming-frog)
- Inhaber: Screaming Frog Ltd.
- Website: [www.screamingfrog.co.uk/seo-spider/](https://www.screamingfrog.co.uk/seo-spider/)
- Standort: SEO (bis 500 Adressen kostenlos)
- Aktiv seit: 2010
- Leistungen: Crawler für den gesamten Bestand, findet Muster statt Einzelfälle, vollständige Adressliste
- Kurzbeschreibung: Einzelne Seiten prüft man von Hand. Bei neunzig Seiten geht das nicht mehr – und genau dort entstehen die Fehler, die niemand bemerkt: dreißig Bilder ohne Alternativtext, doppelte Titel über eine ganze Rubrik, übersprungene Überschriftenebenen im immer gleichen Bauteil. Ein Crawler durchläuft die Website wie ein Suchmaschinenprogramm und legt diese Muster offen. Für HTML-Arbeit besonders…

### Visual Studio Code (Top-Eintrag)
- Profil: [Visual Studio Code](https://hypertext-markup-language.com/downloads/vs-code)
- Inhaber: Microsoft
- Website: [code.visualstudio.com](https://code.visualstudio.com)
- Standort: Editoren (kostenlos, deutschsprachig)
- Aktiv seit: 2015
- Leistungen: HTML-Unterstützung eingebaut, Emmet enthalten, Erweiterungen für Prüfung und Formatierung
- Kurzbeschreibung: Der derzeit verbreitetste Editor für Webarbeit – und für HTML gut ausgestattet, ohne dass man etwas einrichten muss. Eingebaut sind: Vervollständigung für Elemente und Attribute, Hervorhebung passender Elemente, automatisches Schließen, Vorschau von Farbwerten, und Emmet für die Kurzschreibweise. Damit deckt er ab, wofür man früher drei Werkzeuge brauchte. Sinnvolle Ergänzungen für HTML-Arbeit…

### Security Headers (Top-Eintrag)
- Profil: [Security Headers](https://hypertext-markup-language.com/downloads/securityheaders)
- Inhaber: Scott Helme
- Website: [securityheaders.com](https://securityheaders.com)
- Standort: Sicherheit (kostenlos)
- Aktiv seit: 2015
- Leistungen: Prüfung der Schutzkopfzeilen, Erklärung je fehlender Angabe, Ergebnis in Sekunden
- Kurzbeschreibung: Kopfzeilen wie Content-Security-Policy, X-Content-Type-Options oder Referrer-Policy entscheiden mit, was ein Browser auf Ihrer Seite zulässt. Sie stehen nicht im HTML, wirken aber unmittelbar darauf. Adresse eingeben, Note bekommen, Erklärung lesen. Die Note selbst ist zweitrangig – nützlich ist die Liste dessen, was fehlt, mit jeweils einem Satz zur Wirkung. Für deutschsprachige Angebote…

### Cookie Checker (Top-Eintrag)
- Profil: [Cookie Checker](https://hypertext-markup-language.com/downloads/cookie-domain-root)
- Inhaber: Eigenes Werkzeug von SEO NW
- Website: [cookie.domain-root.de](https://cookie.domain-root.de)
- Standort: Cookies (eigenes Werkzeug)
- Aktiv seit: 2024
- Leistungen: Cookies und Kopfzeilen einer Adresse prüfen, Übersicht über mehrere Domains, Ampelbewertung
- Kurzbeschreibung: Eigenes Werkzeug – das gehört an den Anfang. Es beantwortet die Frage, die vor jeder Datenschutzerklärung steht: Welche Cookies setzt meine Seite tatsächlich, mit welcher Laufzeit, von welchem Anbieter? Dazu die Sicherheitskopfzeilen, weil beides zusammen betrachtet werden muss – ein Cookie ohne die Attribute Secure und SameSite ist unabhängig von der Einwilligung ein Problem. Der Unterschied…

### W3C CSS Validation Service (Top-Eintrag)
- Profil: [W3C CSS Validation Service](https://hypertext-markup-language.com/downloads/w3c-css-validator)
- Inhaber: World Wide Web Consortium
- Website: [jigsaw.w3.org/css-validator/](https://jigsaw.w3.org/css-validator/)
- Standort: CSS (kostenlos, ohne Anmeldung)
- Aktiv seit: 1998
- Leistungen: Prüfung von Stylesheets gegen den Standard, Adresse, Datei oder eingefügter Text
- Kurzbeschreibung: Das Gegenstück zum Markup-Prüfdienst, für Stylesheets. Es meldet ungültige Eigenschaften, fehlerhafte Werte und Schreibfehler in Auswahlmustern. Der praktische Nutzen liegt bei den Fehlern, die stillschweigend wirkungslos bleiben: Ein Tippfehler in einem Eigenschaftsnamen führt nicht zu einer Fehlermeldung, sondern dazu, dass die Zeile ignoriert wird. Man sucht dann an der falschen Stelle nach…

### ESLint (Top-Eintrag)
- Profil: [ESLint](https://hypertext-markup-language.com/downloads/eslint)
- Inhaber: OpenJS Foundation
- Website: [eslint.org](https://eslint.org)
- Standort: JavaScript (kostenlos, quelloffen)
- Aktiv seit: 2013
- Leistungen: Prüfung im Editor, einstellbare Regeln, findet Fehler vor dem Ausführen
- Kurzbeschreibung: Der verbreitetste Prüfer für JavaScript. Er findet Fehler, bevor der Code läuft – Variablen, die es nicht gibt, Vergleiche, die immer wahr sind, vergessene Rückgaben. Für Menschen, die vor allem HTML schreiben und JavaScript nur gelegentlich, ist der Nutzen besonders groß: Genau dort entstehen die Fehler, die man selbst nicht sieht, weil man die Sprache nicht täglich benutzt. Die Prüfung läuft…

### phpMyAdmin
- Profil: [phpMyAdmin](https://hypertext-markup-language.com/downloads/phpmyadmin)
- Inhaber: phpMyAdmin-Projekt
- Website: [www.phpmyadmin.net/](https://www.phpmyadmin.net/)
- Standort: Webhosting
- Aktiv seit: 1998
- Leistungen: Datenbanken und Tabellen verwalten, SQL-Abfragen ausführen, Import und Export, Benutzerrechte, Struktur ändern, Suchen und Ersetzen
- Kurzbeschreibung: phpMyAdmin ist eine Weboberfläche zur Verwaltung von MySQL- und MariaDB-Datenbanken. Es läuft selbst als PHP-Anwendung auf dem Server und wird im Browser bedient – deshalb liegt es bei nahezu jedem Webhosting-Paket bei. Für die Arbeit mit HTML ist es indirekt wichtig: Sobald eine Website Inhalte aus einer Datenbank bezieht, entscheidet sich hier, wie Text ankommt. Der häufigste Fehler ist die…

### PuTTY
- Profil: [PuTTY](https://hypertext-markup-language.com/downloads/putty)
- Inhaber: Simon Tatham
- Website: [www.chiark.greenend.org.uk/~sgtatham/putty/](https://www.chiark.greenend.org.uk/~sgtatham/putty/)
- Standort: Webhosting
- Aktiv seit: 1999
- Leistungen: SSH-Verbindungen, SCP und SFTP über Zusatzprogramme, Schlüsselverwaltung mit PuTTYgen, gespeicherte Sitzungen, Portweiterleitung
- Kurzbeschreibung: PuTTY öffnet eine verschlüsselte Kommandozeile auf einem entfernten Server. Auf Linux und macOS ist ein SSH-Befehl im Terminal bereits enthalten; unter Windows war PuTTY jahrelang der Standardweg und ist es für viele geblieben, obwohl Windows inzwischen einen eigenen SSH-Client mitbringt. Für ein statisch erzeugtes Portal ist die Kommandozeile dort nützlich, wo eine Oberfläche zu langsam wird:…

### Google Chrome
- Profil: [Google Chrome](https://hypertext-markup-language.com/downloads/google-chrome)
- Inhaber: Google
- Website: [www.google.com/chrome/](https://www.google.com/chrome/)
- Standort: Browser
- Aktiv seit: 2008
- Leistungen: DevTools, Lighthouse-Prüfbericht, Leistungsanalyse, Gerätesimulation, Prüfung strukturierter Daten über externe Werkzeuge, Konsole
- Kurzbeschreibung: Chrome ist der meistgenutzte Browser und deshalb der, in dem eine Seite in jedem Fall geprüft werden sollte. Er beruht auf dem quelloffenen Chromium, ist selbst aber proprietär; wer dieselbe Engine ohne die Google-Dienste möchte, findet in Chromium oder abgeleiteten Browsern eine Alternative. Für die Praxis ist Lighthouse das nützlichste Werkzeug: ein Prüfbericht zu Ladeverhalten,…

### GIMP
- Profil: [GIMP](https://hypertext-markup-language.com/downloads/gimp)
- Inhaber: GIMP-Entwicklungsteam
- Website: [www.gimp.org/](https://www.gimp.org/)
- Standort: Grafik
- Aktiv seit: 1996
- Leistungen: Bilder zuschneiden und skalieren, Export in WebP, PNG und JPEG, Ebenen, Freistellen, Stapelverarbeitung über Skripte, Farbkorrektur
- Kurzbeschreibung: GIMP ist ein freies Bildbearbeitungsprogramm unter der GNU General Public License, verfügbar für Windows, macOS und Linux. Für Webseiten sind zwei Arbeitsschritte entscheidend, und beide werden häufig übersprungen. Erstens das Verkleinern auf die tatsächlich benötigten Maße: Ein Foto direkt aus der Kamera ist mehrere tausend Bildpunkte breit, angezeigt wird es vielleicht auf 800. Die Differenz…

### Mozilla Thunderbird
- Profil: [Mozilla Thunderbird](https://hypertext-markup-language.com/downloads/mozilla-thunderbird)
- Inhaber: MZLA Technologies Corporation (Tochter der Mozilla Foundation)
- Website: [www.thunderbird.net/de/](https://www.thunderbird.net/de/)
- Standort: E-Mail
- Aktiv seit: 2003
- Leistungen: IMAP und POP3, mehrere Konten, Quelltextansicht einer Nachricht, Umschalten zwischen HTML und reinem Text, Kalender, Verschlüsselung mit OpenPGP
- Kurzbeschreibung: Thunderbird ist ein freies E-Mail-Programm. Es wird seit Januar 2020 von der MZLA Technologies Corporation entwickelt, einer Tochtergesellschaft der Mozilla Foundation, und steht unter der Mozilla Public License. Der Bezug zu HTML ist ein sehr praktischer: E-Mails werden überwiegend in HTML verschickt, und dieses HTML folgt anderen Regeln als eine Webseite. Viele Mailprogramme unterstützen nur…

### Nu Html Checker
- Profil: [Nu Html Checker](https://hypertext-markup-language.com/downloads/nu-html-checker)
- Inhaber: Validator.nu / W3C
- Website: [validator.github.io/validator/](https://validator.github.io/validator/)
- Standort: Validierung (kostenlos, quelloffen)
- Aktiv seit: 2012
- Leistungen: Lokaler Betrieb, Massenprüfung, maschinenlesbare Ausgabe, Einbindung in den Bauprozess
- Kurzbeschreibung: Unter der Weboberfläche des W3C arbeitet dieses Programm. Es lässt sich herunterladen und selbst betreiben – als Kommandozeilenwerkzeug oder als eigener Dienst. Zwei Gründe sprechen dafür. Erstens verlassen die Dokumente das Haus nicht; bei Kundenprojekten vor der Veröffentlichung ist das ein Argument, das man nicht lange erklären muss. Zweitens lässt sich die Prüfung automatisieren: ein…

### HTMLHint
- Profil: [HTMLHint](https://hypertext-markup-language.com/downloads/htmlhint)
- Inhaber: HTMLHint-Projekt
- Website: [htmlhint.com](https://htmlhint.com)
- Standort: Validierung (kostenlos, quelloffen)
- Aktiv seit: 2013
- Leistungen: Prüfung im Editor, einstellbarer Regelsatz, Einbindung in den Bauprozess
- Kurzbeschreibung: Eine Prüfung, die man aufrufen muss, wird vergessen. Diese läuft im Editor mit und markiert Verstöße direkt in der Zeile – doppelte Kennungen, fehlende Alternativtexte, uneinheitliche Schreibweise von Attributen. Der Regelsatz wird in einer Datei im Projekt abgelegt. Das ist der eigentliche Nutzen bei gemeinsamer Arbeit: Alle prüfen gegen dieselben Regeln, und die Diskussion darüber findet…

### html-validate
- Profil: [html-validate](https://hypertext-markup-language.com/downloads/html-validate)
- Inhaber: html-validate-Projekt
- Website: [html-validate.org](https://html-validate.org)
- Standort: Validierung (kostenlos, quelloffen)
- Aktiv seit: 2019
- Leistungen: Prüfung im Bauprozess, abstufbare Regeln, prüft auch Vorlagen
- Kurzbeschreibung: Der Unterschied zu einer Prüfung im Editor: Hier entscheidet das Ergebnis, ob veröffentlicht wird. Ein Durchlauf über die erzeugten Dateien, und bei einem Verstoß bricht der Vorgang ab. Das klingt streng und ist der Punkt. Fehler, die niemanden aufhalten, bleiben liegen – bei neunzig Seiten findet man die drei kaputten sonst nicht. Jede Regel lässt sich einzeln einstellen: Fehler, Warnung oder…

### HTML-Validator
- Profil: [HTML-Validator](https://hypertext-markup-language.com/downloads/html-validator-eigen)
- Inhaber: Eigenes Projekt von SEO NW
- Website: [validator.hypertext-markup-language.com](https://validator.hypertext-markup-language.com)
- Standort: Validierung (kostenlos, eigenes Projekt)
- Aktiv seit: 2024
- Leistungen: Prüfung mit deutschsprachiger Erklärung, Beispiel der zulässigen Fassung, ohne Anmeldung
- Kurzbeschreibung: Eigenes Projekt – das gehört an den Anfang. Der Anlass war eine wiederkehrende Beobachtung aus der Beratung: Die amtliche Prüfung nennt den Fehler korrekt, aber in einer Sprache, die voraussetzt, dass man die Spezifikation kennt. „Element X not allowed as child of element Y in this context" ist richtig und hilft trotzdem nicht weiter, wenn man nicht weiß, welcher Zusammenhang zulässig wäre. Hier…

### W3C Internationalization Checker
- Profil: [W3C Internationalization Checker](https://hypertext-markup-language.com/downloads/w3c-i18n-checker)
- Inhaber: World Wide Web Consortium
- Website: [validator.w3.org/i18n-checker/](https://validator.w3.org/i18n-checker/)
- Standort: Validierung (kostenlos)
- Aktiv seit: 2010
- Leistungen: Prüfung von Sprachangabe, Zeichenkodierung und Textrichtung
- Kurzbeschreibung: Prüft die Angaben, die niemand sieht und die trotzdem wirken: Sprache, Zeichenkodierung, Textrichtung. Der häufigste Fund auf deutschsprachigen Seiten ist eine Sprachangabe, die auf Englisch steht – übernommen aus einer Vorlage und nie geändert. Sichtbar ist davon nichts. Wirksam ist es trotzdem: Bildschirmleser wählen danach die Aussprache, Browser die Silbentrennung, Suchmaschinen die…

### axe DevTools
- Profil: [axe DevTools](https://hypertext-markup-language.com/downloads/axe-devtools)
- Inhaber: Deque Systems
- Website: [www.deque.com/axe/devtools/](https://www.deque.com/axe/devtools/)
- Standort: Barrierefreiheit (Erweiterung kostenlos, erweiterte Fassungen kostenpflichtig)
- Aktiv seit: 2015
- Leistungen: Befunde mit WCAG-Bezug, kaum Fehlalarme, auch als Bibliothek für automatisierte Läufe
- Kurzbeschreibung: Die Prüfbibliothek, auf der viele andere Werkzeuge aufbauen. Wer mehrere Prüfer nacheinander laufen lässt, merkt schnell, dass sich die Ergebnisse stark überschneiden – hier ist der Ursprung. Der praktische Unterschied zu WAVE liegt in der Darstellung. WAVE zeigt Befunde im Seitenbild, axe listet sie nach Regel und Schwere und nennt zu jedem Fund die verletzte Erfolgsbedingung der Richtlinien.…

### BIK BITV-Test
- Profil: [BIK BITV-Test](https://hypertext-markup-language.com/downloads/bitv-test)
- Inhaber: BIK – barrierefrei informieren und kommunizieren
- Website: [www.bitvtest.de](https://www.bitvtest.de)
- Standort: Barrierefreiheit (Prüfschritte kostenlos, bescheinigte Prüfung kostenpflichtig)
- Aktiv seit: 2004
- Leistungen: Deutsches Prüfverfahren, öffentlich dokumentierte Prüfschritte, abgestufte Bewertung
- Kurzbeschreibung: Das deutsche Prüfverfahren für Barrierefreiheit. Es übersetzt die internationalen Richtlinien in nachvollziehbare Prüfschritte mit definierter Bewertung – nicht „erfüllt oder nicht", sondern eine abgestufte Einordnung mit Begründung. Für die Praxis ist die öffentliche Dokumentation das Wertvolle: Zu jedem Schritt steht, was geprüft wird, wie geprüft wird und woran ein Verstoß erkennbar ist. Das…

### Colour Contrast Analyser
- Profil: [Colour Contrast Analyser](https://hypertext-markup-language.com/downloads/colour-contrast-analyser)
- Inhaber: TPGi
- Website: [www.tpgi.com/color-contrast-checker/](https://www.tpgi.com/color-contrast-checker/)
- Standort: Barrierefreiheit (kostenlos, Windows und macOS)
- Aktiv seit: 2007
- Leistungen: Pipette für jede Bildschirmstelle, Bewertung nach Textgröße, auch für Bedienelemente
- Kurzbeschreibung: Kontrastprüfungen im Browser arbeiten mit den Farbwerten aus dem Stylesheet. Das genügt nicht, sobald Text auf einem Bild steht, ein Verlauf im Spiel ist oder ein halbtransparenter Kasten darüberliegt – dann ist die tatsächliche Farbe eine andere als die notierte. Dieses Programm nimmt die Farbe mit einer Pipette direkt vom Bildschirm und zeigt sofort, ob die Kombination die Anforderungen…

### Accessibility Insights
- Profil: [Accessibility Insights](https://hypertext-markup-language.com/downloads/accessibility-insights)
- Inhaber: Microsoft
- Website: [accessibilityinsights.io](https://accessibilityinsights.io)
- Standort: Barrierefreiheit (kostenlos, quelloffen)
- Aktiv seit: 2018
- Leistungen: Geführter Durchgang für manuelle Prüfung, Hervorhebung von Fokus und Überschriften, Bericht
- Kurzbeschreibung: Der interessante Teil ist nicht die automatische Prüfung, sondern der geführte Durchgang. Er stellt genau die Fragen, die kein Werkzeug beantworten kann: Ergibt die Vorlesereihenfolge einen Sinn? Ist erkennbar, wo der Tastaturfokus steht? Sagt der Alternativtext etwas Nützliches? Zu jedem Schritt gibt es eine kurze Anleitung und ein Feld für das Ergebnis. Am Ende steht ein Bericht, den man…

### Pa11y
- Profil: [Pa11y](https://hypertext-markup-language.com/downloads/pa11y)
- Inhaber: Pa11y-Projekt
- Website: [pa11y.org](https://pa11y.org)
- Standort: Barrierefreiheit (kostenlos, quelloffen)
- Aktiv seit: 2013
- Leistungen: Prüfung vieler Adressen, Einbindung in den Bauprozess, Schwellenwerte
- Kurzbeschreibung: Was axe im Browser für eine Seite tut, tut dieses Werkzeug für alle – von der Kommandozeile aus, mit einer Adressliste. Für einen Bestand von neunzig Seiten ist das der Unterschied zwischen „einmal geprüft" und „bei jeder Veröffentlichung geprüft". Barrierefreiheit fällt nämlich zurück: Ein Bild ohne Alternativtext, ein neues Formularfeld ohne Beschriftung, und der Zustand von vor drei Monaten…

### ARC Toolkit
- Profil: [ARC Toolkit](https://hypertext-markup-language.com/downloads/arc-toolkit)
- Inhaber: TPGi
- Website: [www.tpgi.com/arc-platform/arc-toolkit/](https://www.tpgi.com/arc-platform/arc-toolkit/)
- Standort: Barrierefreiheit (kostenlose Browsererweiterung)
- Aktiv seit: 2018
- Leistungen: Rollen, zugängliche Namen und Beziehungen im Detail, Filter nach Prüfkategorie
- Kurzbeschreibung: Für den zweiten Blick. Wenn WAVE und axe nichts mehr finden, die Bedienung mit Hilfsmitteln aber trotzdem hakt, liegt es meist an Beziehungen zwischen Elementen. Typische Fälle: eine Beschriftung, die auf eine Kennung zeigt, die es nicht gibt; eine Gruppierung ohne zugänglichen Namen; ein Bereich, der doppelt ausgezeichnet ist; ein Element mit einer Rolle, die seine eigentliche Bedeutung…

### Firefox Barrierefreiheits-Inspektor
- Profil: [Firefox Barrierefreiheits-Inspektor](https://hypertext-markup-language.com/downloads/firefox-accessibility-inspector)
- Inhaber: Mozilla
- Website: [firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/)
- Standort: Browser (eingebaut, kostenlos)
- Aktiv seit: 2018
- Leistungen: Rolle, Name und Zustand je Element, Prüfung auf häufige Probleme, Simulation von Farbfehlsichtigkeit
- Kurzbeschreibung: Ein Bildschirmleser arbeitet nicht mit dem HTML-Baum, sondern mit dem daraus abgeleiteten Barrierefreiheitsbaum. Dort steht zu jedem Element eine Rolle, ein Name und ein Zustand. Genau das zeigt dieser Inspektor – und macht damit sichtbar, was sonst nur hörbar ist. Der Aha-Moment stellt sich meist bei Schaltflächen ein: Ein Element sieht aus wie eine Schaltfläche, hat aber keine Rolle, weil es…

### Playwright
- Profil: [Playwright](https://hypertext-markup-language.com/downloads/playwright)
- Inhaber: Microsoft
- Website: [playwright.dev](https://playwright.dev)
- Standort: Browser (kostenlos, quelloffen)
- Aktiv seit: 2020
- Leistungen: Steuert Chromium, Firefox und WebKit, Aufnahmen über mehrere Breiten, Prüfung der Tastaturbedienung
- Kurzbeschreibung: Gedacht für automatisierte Tests, für HTML-Arbeit aber auch abseits davon nützlich. Drei Anwendungsfälle, die sich schnell lohnen: Aufnahmen derselben Seite in mehreren Bildschirmbreiten für die Sichtprüfung. Ein Durchlauf, der prüft, ob ein Formular mit der Tastatur bedienbar ist. Und die Einbindung einer Barrierefreiheitsprüfung über alle Seiten in einem Rutsch. Der Aufwand lohnt ab dem Punkt,…

### Can I use
- Profil: [Can I use](https://hypertext-markup-language.com/downloads/caniuse)
- Inhaber: Alexis Deveria
- Website: [caniuse.com](https://caniuse.com)
- Standort: Nachschlagen (kostenlos, Datenbestand offen)
- Aktiv seit: 2010
- Leistungen: Unterstützungstabellen je Element und Attribut, Gewichtung nach Marktanteilen, Fußnoten zur Teilunterstützung
- Kurzbeschreibung: Beantwortet die Frage, die vor jedem neuen Element steht: Kann ich das schon benutzen? Der wichtigste Teil sind nicht die farbigen Felder, sondern die Fußnoten darunter. „Unterstützt" heißt oft „unterstützt mit Einschränkung", und genau diese Einschränkung ist der Grund, warum etwas beim Kunden nicht funktioniert. Für den deutschsprachigen Raum lohnt eine Einstellung, die viele übersehen: Die…

### HTML Living Standard
- Profil: [HTML Living Standard](https://hypertext-markup-language.com/downloads/whatwg-html-standard)
- Inhaber: WHATWG
- Website: [html.spec.whatwg.org/multipage/](https://html.spec.whatwg.org/multipage/)
- Standort: Nachschlagen (frei zugänglich)
- Aktiv seit: 2004
- Leistungen: Verbindliche Festlegung, Inhaltsmodell je Element, laufend fortgeschrieben
- Kurzbeschreibung: Die Quelle selbst. Alles andere beschreibt, was hier steht. Jedes Element hat einen Abschnitt mit Inhaltsmodell, erlaubten Eltern, zugehöriger Rolle und Verhalten. Bei Zweifelsfällen und bei Widersprüchen zwischen Quellen entscheidet dieser Text – nicht die Referenz, nicht das Beispiel aus einem Blog. Der Text ist für Umsetzer von Browsern geschrieben, nicht für Autoren. Das merkt man: Er ist…

### web.dev: Learn HTML
- Profil: [web.dev: Learn HTML](https://hypertext-markup-language.com/downloads/web-dev-learn-html)
- Inhaber: Google
- Website: [web.dev/learn/html](https://web.dev/learn/html)
- Standort: Nachschlagen (kostenlos, englisch)
- Aktiv seit: 2023
- Leistungen: Aufbauender Lehrgang, Formulare und Zugänglichkeit ausführlich, mit Übungen
- Kurzbeschreibung: Referenzen beantworten Fragen, die man schon hat. Dieser Kurs baut auf: vom Dokumentgerüst über Textauszeichnung, Bilder und Formulare bis zu Bedeutung und Zugänglichkeit, in einer Reihenfolge, die aufeinander verweist. Der Blickwinkel ist durchgehend praktisch. Zu jedem Abschnitt gehört, warum eine Auszeichnung sinnvoll ist – nicht nur, wie sie lautet. Formulare und Zugänglichkeit sind…

### Rich Results Test
- Profil: [Rich Results Test](https://hypertext-markup-language.com/downloads/rich-results-test)
- Inhaber: Google
- Website: [search.google.com/test/rich-results](https://search.google.com/test/rich-results)
- Standort: Strukturierte Daten (kostenlos)
- Aktiv seit: 2017
- Leistungen: Prüfung gegen Googles Anforderungen, Ansicht des gerenderten HTML, Pflichtangaben je Typ
- Kurzbeschreibung: Beantwortet die andere Frage: Was macht Google aus meiner Auszeichnung? Eine Auszeichnung kann standardkonform sein und trotzdem keine erweiterte Darstellung erzeugen, weil Google zusätzliche Pflichtangaben verlangt. Dieses Werkzeug nennt sie – je Typ, mit Unterscheidung zwischen Pflicht und Empfehlung. Der oft übersehene zweite Nutzen ist die Ansicht des gerenderten HTML. Dort sieht man, was…

### Facebook Sharing Debugger
- Profil: [Facebook Sharing Debugger](https://hypertext-markup-language.com/downloads/facebook-sharing-debugger)
- Inhaber: Meta
- Website: [developers.facebook.com/tools/debug/](https://developers.facebook.com/tools/debug/)
- Standort: Strukturierte Daten (kostenlos, Konto erforderlich)
- Aktiv seit: 2010
- Leistungen: Vorschau vor dem Teilen, Zwischenspeicher neu einlesen, fehlende Angaben
- Kurzbeschreibung: Open-Graph-Angaben im Kopfbereich bestimmen, wie ein Verweis in sozialen Netzwerken aussieht. Das Tückische: Man sieht das Ergebnis erst, wenn jemand teilt – und dann bleibt es, weil die Vorschau zwischengespeichert wird. Dieses Werkzeug zeigt die Karte vorab und liest den Zwischenspeicher auf Wunsch neu ein. Genau das braucht man nach jeder Korrektur an Titel, Beschreibung oder Vorschaubild.…

### LinkedIn Post Inspector
- Profil: [LinkedIn Post Inspector](https://hypertext-markup-language.com/downloads/linkedin-post-inspector)
- Inhaber: LinkedIn
- Website: [www.linkedin.com/post-inspector/](https://www.linkedin.com/post-inspector/)
- Standort: Strukturierte Daten (kostenlos, Konto erforderlich)
- Aktiv seit: 2019
- Leistungen: Angaben neu einlesen, Vorschau der Karte, fehlende Angaben benennen
- Kurzbeschreibung: Dasselbe für das Netzwerk, in dem im deutschsprachigen Raum fachlich geteilt wird. LinkedIn wertet Open-Graph-Angaben eigenständig aus und speichert das Ergebnis nach eigenen Angaben mehrere Tage zwischen. Wer einen Beitrag mit falschem Vorschaubild veröffentlicht, korrigiert das nicht durch eine Änderung an der Seite – der Beitrag behält die alte Karte. Der Ablauf, der sich bewährt hat: Adresse…

### SVGOMG
- Profil: [SVGOMG](https://hypertext-markup-language.com/downloads/svgomg)
- Inhaber: Jake Archibald
- Website: [jakearchibald.github.io/svgomg/](https://jakearchibald.github.io/svgomg/)
- Standort: Grafik (kostenlos, quelloffen)
- Aktiv seit: 2016
- Leistungen: SVG aufräumen mit Vorschau je Eingriff, läuft lokal im Browser
- Kurzbeschreibung: SVG-Dateien aus Zeichenprogrammen enthalten regelmäßig ein Vielfaches dessen, was sie brauchen: Editor-Angaben, leere Gruppen, Nachkommastellen, die niemand sieht. Wer solche Dateien in HTML einbettet, schleppt das in jedem Dokument mit. Dieses Werkzeug zeigt zu jedem Eingriff, wie das Ergebnis danach aussieht, und den Größenunterschied dazu. Man kann also aufräumen, ohne blind zu vertrauen.…

### Squoosh
- Profil: [Squoosh](https://hypertext-markup-language.com/downloads/squoosh)
- Inhaber: Google Chrome Labs
- Website: [squoosh.app](https://squoosh.app)
- Standort: Grafik (kostenlos, quelloffen)
- Aktiv seit: 2018
- Leistungen: Direkter Formatvergleich mit Regler, AVIF und WebP, läuft lokal
- Kurzbeschreibung: Die Frage bei Bildern lautet selten „welches Format", sondern „wie weit kann ich gehen, bevor es auffällt". Diese Anwendung beantwortet sie sichtbar: links das Original, rechts das Ergebnis, dazwischen ein Regler, dazu die Dateigröße in Echtzeit. Für HTML-Arbeit ist der Zusammenhang wichtig: Ein Bild, das ein Viertel so groß ist, macht viele Feinheiten überflüssig. Umgekehrt rettet keine…

### RealFaviconGenerator
- Profil: [RealFaviconGenerator](https://hypertext-markup-language.com/downloads/realfavicongenerator)
- Inhaber: Philippe Bernard
- Website: [realfavicongenerator.net](https://realfavicongenerator.net)
- Standort: Grafik (kostenlos)
- Aktiv seit: 2014
- Leistungen: Vollständiger Symbolsatz, Manifestdatei, HTML-Block, Prüfung bestehender Websites
- Kurzbeschreibung: Ein Symbol im Reiter klingt nach einer Kleinigkeit und ist eine der undankbarsten Aufgaben: unterschiedliche Größen, unterschiedliche Formate, dazu Angaben für Startbildschirme und die Manifestdatei. Von Hand vergisst man immer eines. Hier lädt man eine Vorlage hoch, sieht die Vorschau in den verschiedenen Zusammenhängen – Reiter, Lesezeichen, Startbildschirm, Kachel – und bekommt die Dateien…

### Inkscape
- Profil: [Inkscape](https://hypertext-markup-language.com/downloads/inkscape)
- Inhaber: Inkscape-Projekt
- Website: [inkscape.org/de/](https://inkscape.org/de/)
- Standort: Grafik (kostenlos, quelloffen, deutschsprachig)
- Aktiv seit: 2003
- Leistungen: Vektorgrafik erstellen und bearbeiten, SVG als natives Format, Quelltextansicht
- Kurzbeschreibung: Das Zeichenprogramm für Vektorgrafik – und für HTML-Arbeit besonders interessant, weil SVG sein natives Speicherformat ist. Was hier entsteht, kann direkt ins Dokument. Der für dieses Portal wichtigste Teil ist der eingebaute XML-Editor: Er zeigt die Struktur der Grafik als Baum und erlaubt, Elemente direkt zu bearbeiten. Damit lässt sich verstehen, wie SVG aufgebaut ist – Pfade, Gruppen,…

### Lighthouse
- Profil: [Lighthouse](https://hypertext-markup-language.com/downloads/lighthouse)
- Inhaber: Google
- Website: [developer.chrome.com/docs/lighthouse/overview](https://developer.chrome.com/docs/lighthouse/overview)
- Standort: Ladezeit (kostenlos, eingebaut)
- Aktiv seit: 2016
- Leistungen: Vier Prüfbereiche in einem Durchlauf, lokal, auch als Kommandozeilenwerkzeug
- Kurzbeschreibung: Ladezeit, Zugänglichkeit, empfohlene Vorgehensweisen und Auffindbarkeit – in einem Durchlauf, direkt in den Entwicklerwerkzeugen. Für HTML-Arbeit sind vor allem die mittleren beiden Bereiche interessant. Sie melden fehlende Sprachangaben, doppelte Kennungen, Formularfelder ohne Beschriftung, Bilder ohne Alternativtext – alles Dinge, die im Dokument stehen und dort behoben werden. Zur Punktzahl…

### PageSpeed.de
- Profil: [PageSpeed.de](https://hypertext-markup-language.com/downloads/pagespeed-de)
- Inhaber: Eigenes Werkzeug von SEO NW
- Website: [pagespeed.de](https://pagespeed.de)
- Standort: Ladezeit (kostenlos, eigenes Werkzeug)
- Aktiv seit: 2023
- Leistungen: Mehrere Adressen in einem Durchlauf, Felddaten neben Laborwerten, deutschsprachige Einordnung
- Kurzbeschreibung: Eigenes Werkzeug – das gehört an den Anfang. Entstanden aus einer Lücke: Die amtlichen Prüfwerkzeuge messen eine Adresse und geben eine Punktzahl aus. Die Frage „welche meiner zweihundert Seiten ist tatsächlich zu langsam" beantworten sie nicht, und genau die stellt sich in der Praxis. Der HTML-Bezug ist unmittelbarer, als es scheint. Ein erheblicher Teil schlechter Werte entsteht im Dokument…

### WebPageTest
- Profil: [WebPageTest](https://hypertext-markup-language.com/downloads/webpagetest)
- Inhaber: Catchpoint
- Website: [www.webpagetest.org](https://www.webpagetest.org)
- Standort: Ladezeit (Grundfunktionen kostenlos)
- Aktiv seit: 2008
- Leistungen: Messung von wählbarem Standort und Verbindung, Bildfolge des Aufbaus, Wasserfalldiagramm
- Kurzbeschreibung: Der Unterschied zu einer Punktzahl: Hier sieht man, wann was erscheint. Die Bildfolge zeigt den Seitenaufbau in Einzelbildern – für die Frage, ab wann eine Seite benutzbar wirkt, ist das aussagekräftiger als jede Kennzahl. Das Wasserfalldiagramm daneben zeigt, welche Datei wen aufhält. Für HTML-Arbeit ist das die aufschlussreichste Ansicht überhaupt, weil sich Blockaden im Kopfbereich…

### Chrome UX Report
- Profil: [Chrome UX Report](https://hypertext-markup-language.com/downloads/crux)
- Inhaber: Google
- Website: [developer.chrome.com/docs/crux](https://developer.chrome.com/docs/crux)
- Standort: Ladezeit (kostenlos, ab genügend Verkehr)
- Aktiv seit: 2017
- Leistungen: Felddaten echter Besuche über 28 Tage, nach Gerät und Verbindung getrennt
- Kurzbeschreibung: Jeder Prüflauf erzeugt eine Momentaufnahme unter künstlichen Bedingungen. Diese Erhebung sammelt, was Nutzer tatsächlich erlebt haben – über 28 Tage, aufgeschlüsselt nach Gerät und Verbindung. Damit endet die häufigste Fehldiskussion. Ein Prüflauf sagt „langsam", die Felddaten sagen „bei 78 Prozent der Besuche gut" – und maßgeblich ist Letzteres, auch für Google. Zugänglich über mehrere Wege: in…

### Search-Console.PRO
- Profil: [Search-Console.PRO](https://hypertext-markup-language.com/downloads/search-console-pro)
- Inhaber: Eigenes Werkzeug von SEO NW
- Website: [search-console.pro](https://search-console.pro)
- Standort: SEO (eigenes Werkzeug)
- Aktiv seit: 2024
- Leistungen: Suchdaten und Ladezeit je Adresse, Sortierung nach Wirkung, Zeitraumvergleich
- Kurzbeschreibung: Eigenes Werkzeug – das gehört an den Anfang. Für ein HTML-Nachschlagewerk ist der Bezug mittelbar, aber vorhanden: Wenn eine Seite nicht indexiert wird oder Besucher verliert, liegt die Ursache oft im Dokument. Doppelte Titel, widersprüchliche Metaangaben, eine Seite, die als Duplikat einer anderen gewertet wird – das sind Auszeichnungsfragen. Die Search Console zeigt, dass etwas nicht stimmt.…

### Wayback Machine
- Profil: [Wayback Machine](https://hypertext-markup-language.com/downloads/wayback-machine)
- Inhaber: Internet Archive
- Website: [web.archive.org](https://web.archive.org)
- Standort: SEO (kostenlos, gemeinnützig)
- Aktiv seit: 2001
- Leistungen: Vorgeschichte von Domains, Rekonstruktion nach Datenverlust, Nachweis früherer Inhalte
- Kurzbeschreibung: Das Gedächtnis des Netzes, und in drei Lagen unersetzlich. Vor dem Kauf einer gebrauchten Domain: Was stand dort früher? Eine Adresse mit Spam-Vergangenheit ist auch kostenlos zu teuer, und man sieht es der Domain nicht an. Nach einem Umzug ohne Sicherung: Der alte Aufbau lässt sich zumindest teilweise rekonstruieren – Adressen, Titel, Struktur. Kein Ersatz für eine Sicherung, aber besser als…

### W3C Link Checker
- Profil: [W3C Link Checker](https://hypertext-markup-language.com/downloads/w3c-link-checker)
- Inhaber: World Wide Web Consortium
- Website: [validator.w3.org/checklink](https://validator.w3.org/checklink)
- Standort: SEO (kostenlos, ohne Anmeldung)
- Aktiv seit: 1999
- Leistungen: Prüft Verweisziele, unterscheidet Weiterleitung und Fehler, rekursiv über mehrere Ebenen
- Kurzbeschreibung: Ein Verweis ist beim Setzen richtig und irgendwann nicht mehr. Das passiert ohne eigenes Zutun: Die andere Seite zieht um, wird eingestellt, ändert ihre Adressstruktur. Bemerkt wird es meist gar nicht, weil niemand die eigenen alten Beiträge nachliest. Das Werkzeug folgt allen Verweisen einer Seite und meldet, was nicht mehr erreichbar ist. Es unterscheidet dabei zwischen dauerhaft verschoben…

### Notepad++
- Profil: [Notepad++](https://hypertext-markup-language.com/downloads/notepad-plus-plus)
- Inhaber: Don Ho
- Website: [notepad-plus-plus.org](https://notepad-plus-plus.org)
- Standort: Editoren (kostenlos, quelloffen, Windows)
- Aktiv seit: 2003
- Leistungen: Startet sofort, Suchen und Ersetzen über viele Dateien, Kodierung umstellen
- Kurzbeschreibung: Der schnelle Editor für Windows, wenn es nicht um ein Projekt geht, sondern um eine Datei. Zwei Stärken, für die er auch neben einem großen Editor seinen Platz behält. Erstens die Suche über viele Dateien mit regulären Ausdrücken – für Aufgaben wie „ändere in achtzig Dateien den Verweis auf die alte Domain" ist das der kürzeste Weg. Zweitens der Umgang mit Zeichenkodierung. Wenn Umlaute zu…

### Prettier
- Profil: [Prettier](https://hypertext-markup-language.com/downloads/prettier)
- Inhaber: Prettier-Projekt
- Website: [prettier.io](https://prettier.io)
- Standort: Editoren (kostenlos, quelloffen)
- Aktiv seit: 2017
- Leistungen: Einheitliche Formatierung beim Speichern, für alle verbreiteten Editoren
- Kurzbeschreibung: Formatiert HTML nach festen Regeln – beim Speichern, ohne Aushandlung. Der Nutzen ist gering, wenn man allein arbeitet, und groß, sobald zwei Personen dieselben Dateien anfassen. Ohne einheitliche Formatierung besteht jede Änderungsübersicht zur Hälfte aus verschobenen Leerzeichen, und die eigentliche Änderung findet niemand mehr. Für HTML gibt es eine Eigenheit, die man kennen muss: Bei…

### Emmet
- Profil: [Emmet](https://hypertext-markup-language.com/downloads/emmet)
- Inhaber: Sergey Chikuyonok
- Website: [emmet.io](https://emmet.io)
- Standort: Editoren (kostenlos, meist eingebaut)
- Aktiv seit: 2008
- Leistungen: Kurzschreibweise für ganze Gerüste, Syntax an CSS-Auswahlmuster angelehnt
- Kurzbeschreibung: Aus einer Zeile Kurzschrift wird ein ganzes Gerüst. Die Abkürzung `ul>li*5>a` wird per Tastendruck zu einer vollständigen Liste mit fünf Einträgen und Verweisen. Was nach Spielerei klingt, verändert die Arbeitsweise: Man denkt in Strukturen statt in einzelnen Zeichen. Nebeneffekt, der für dieses Portal der wichtigere ist – es entstehen weniger nicht geschlossene Elemente, weil man sie gar nicht…

### HTML Tidy
- Profil: [HTML Tidy](https://hypertext-markup-language.com/downloads/html-tidy)
- Inhaber: HTACG
- Website: [www.html-tidy.org](https://www.html-tidy.org)
- Standort: Editoren (kostenlos, quelloffen)
- Aktiv seit: 1998
- Leistungen: Repariert Verschachtelung, entfernt Fremdauszeichnung, automatisierbar
- Kurzbeschreibung: Der Anwendungsfall ist fast immer derselbe: Man bekommt HTML, das jemand anderes erzeugt hat – aus einem Textverarbeitungsprogramm, aus einem alten Redaktionssystem, aus einem Baukasten. Es ist gültig genug, um angezeigt zu werden, und unlesbar genug, um nicht bearbeitbar zu sein. Tidy repariert Verschachtelungen, schließt offene Elemente, entfernt überflüssige Auszeichnung und rückt das…

### Mozilla Observatory
- Profil: [Mozilla Observatory](https://hypertext-markup-language.com/downloads/mozilla-observatory)
- Inhaber: Mozilla
- Website: [developer.mozilla.org/en-US/observatory](https://developer.mozilla.org/en-US/observatory)
- Standort: Sicherheit (kostenlos)
- Aktiv seit: 2016
- Leistungen: Begründung und Empfehlung je Punkt, Verlauf früherer Prüfungen
- Kurzbeschreibung: Prüft dieselben Kopfzeilen und geht bei der Erklärung weiter: Zu jedem Punkt steht, welches Risiko dahintersteht und wie eine angemessene Einstellung aussieht. Für jemanden, der zum ersten Mal eine Richtlinie schreibt, ist das der Unterschied zwischen Abschreiben und Verstehen – und Abschreiben führt bei Sicherheitsangaben regelmäßig dazu, dass die Einstellung zwar vorhanden, aber wirkungslos…

### CSP Evaluator
- Profil: [CSP Evaluator](https://hypertext-markup-language.com/downloads/csp-evaluator)
- Inhaber: Google
- Website: [csp-evaluator.withgoogle.com](https://csp-evaluator.withgoogle.com)
- Standort: Sicherheit (kostenlos)
- Aktiv seit: 2016
- Leistungen: Bewertet jede Anweisung einzeln, nennt Umgehungsmöglichkeiten
- Kurzbeschreibung: Eine Content-Security-Policy zu schreiben ist einfach, eine wirksame zu schreiben nicht. Typische Fehler sind Angaben, die alles wieder erlauben, was die Richtlinie eigentlich verbieten sollte – etwa eine Freigabe für beliebige eingebettete Skripte. Die Richtlinie sieht dann streng aus und schützt vor nichts. Dieses Werkzeug zerlegt die Richtlinie und bewertet jede Anweisung einzeln, mit Hinweis…

### Webbkoll
- Profil: [Webbkoll](https://hypertext-markup-language.com/downloads/webbkoll)
- Inhaber: Dataskydd.net
- Website: [webbkoll.dataskydd.net](https://webbkoll.dataskydd.net)
- Standort: Sicherheit (kostenlos, quelloffen)
- Aktiv seit: 2016
- Leistungen: Listet Anfragen an Dritte, gesetzte Kennungen, Speicherzugriffe
- Kurzbeschreibung: Vor jeder Datenschutzerklärung steht die Frage: Was lädt meine Seite eigentlich, und von wem? Dieses Werkzeug beantwortet sie ohne Konto und ohne Installation – Anfragen an Dritte, gesetzte Kennungen, Speicherzugriffe, Verbindungssicherheit, Verweisverhalten. Alles in einer Ansicht, mit einer Erklärung dazu, warum der jeweilige Punkt zählt. Betrieben von einer schwedischen…

### Can I email
- Profil: [Can I email](https://hypertext-markup-language.com/downloads/caniemail)
- Inhaber: HTeuMeuLeu und Gemeinschaft
- Website: [www.caniemail.com](https://www.caniemail.com)
- Standort: E-Mail (kostenlos, quelloffen)
- Aktiv seit: 2019
- Leistungen: Unterstützungstabellen je E-Mail-Programm, auch für CSS, Fußnoten zur Teilunterstützung
- Kurzbeschreibung: HTML in E-Mails ist eine eigene Welt mit eigenen Regeln – und mit einem Rückstand von rund zwanzig Jahren gegenüber Browsern. Outlook stellt teilweise mit einer Textverarbeitungsmaschine dar, Gmail entfernt Teile der Auszeichnung, manche Programme unterstützen kein CSS im Kopfbereich. Was im Browser selbstverständlich ist, funktioniert dort oft nicht oder anders. Diese Tabellen zeigen je…

### MJML
- Profil: [MJML](https://hypertext-markup-language.com/downloads/mjml)
- Inhaber: Mailjet
- Website: [mjml.io](https://mjml.io)
- Standort: E-Mail (kostenlos, quelloffen)
- Aktiv seit: 2016
- Leistungen: Erzeugt kompatibles Tabellengerüst aus lesbarer Auszeichnung, Bausteine
- Kurzbeschreibung: Verlässliches E-Mail-HTML besteht aus verschachtelten Tabellen mit Zusatzangaben für einzelne Programme. Das von Hand zu schreiben ist mühsam und fehleranfällig – und das Ergebnis kann niemand pflegen. Hier schreibt man eine überschaubare Auszeichnung mit Elementen wie Abschnitt, Spalte, Text und Schaltfläche; erzeugt wird daraus das kompatible Gerüst mit allen nötigen Sonderbehandlungen.…

### WinSCP
- Profil: [WinSCP](https://hypertext-markup-language.com/downloads/winscp)
- Inhaber: Martin Přikryl
- Website: [winscp.net/eng/docs/lang:de](https://winscp.net/eng/docs/lang:de)
- Standort: Webhosting (kostenlos, quelloffen, Windows)
- Aktiv seit: 2000
- Leistungen: Dateiübertragung über SFTP und FTP, Abgleich von Verzeichnissen, Bearbeiten am Server
- Kurzbeschreibung: Dateiübertragung für Windows, mit zwei Eigenschaften, die im Alltag den Unterschied machen. Erstens der Verzeichnisabgleich: Er vergleicht lokal und entfernt und überträgt nur, was sich geändert hat – in beide Richtungen wählbar, mit Vorschau, was passieren wird. Für das Hochladen einer erzeugten Website ist das der sichere Weg; ein vollständiger Ladevorgang dauert länger und überschreibt mehr…

### SEO CMS
- Profil: [SEO CMS](https://hypertext-markup-language.com/downloads/seo-cms)
- Inhaber: Eigene Entwicklung von SEO NW
- Website: [seo-cms.seo-manager.info](https://seo-cms.seo-manager.info)
- Standort: Editoren (eigene Entwicklung)
- Aktiv seit: 2025
- Leistungen: Statische Auslieferung aus einer Datenbank, eigene Felder für Kurzantwort und Kernaussagen, frei wählbare Adresssegmente
- Kurzbeschreibung: Eigene Entwicklung – und das System, mit dem dieses Portal erzeugt wird. Es steht hier, weil die Frage regelmäßig kommt, womit die Seite gebaut ist. Aus einer Datenbank entsteht statisches HTML. Für die Themen dieses Portals ist der interessante Teil, dass Kurzantwort, Kernaussagen und Fragenblöcke eigene Felder sind – nicht Formatierung im Fließtext. Dadurch lässt sich dieselbe Aussage im…

### Klaro!
- Profil: [Klaro!](https://hypertext-markup-language.com/downloads/klaro)
- Inhaber: KIProtect, Berlin
- Website: [klaro.org](https://klaro.org)
- Standort: Cookies (quelloffen, kostenlos)
- Aktiv seit: 2018
- Leistungen: Einwilligungsdialog ohne fremden Dienst, blockiert Skripte bis zur Zustimmung, deutschsprachig
- Kurzbeschreibung: Ein Einwilligungsdialog, der auf dem eigenen Server läuft. Das ist der wesentliche Unterschied zu den verbreiteten Diensten: Es entsteht keine zusätzliche Verbindung zu einem Dritten, ausgerechnet an der Stelle, an der es um Datenschutz geht. Technisch arbeitet es so, wie ein Einwilligungsdialog arbeiten muss: Skripte werden erst geladen, wenn zugestimmt wurde. Das ist der Punkt, an dem viele…

### Matomo
- Profil: [Matomo](https://hypertext-markup-language.com/downloads/matomo)
- Inhaber: InnoCraft, Neuseeland
- Website: [matomo.org](https://matomo.org)
- Standort: Cookies (quelloffen, Eigenbetrieb kostenlos)
- Aktiv seit: 2007
- Leistungen: Reichweitenmessung auf eigenem Server, ohne Cookies betreibbar, gekürzte Adressen
- Kurzbeschreibung: Steht hier im Bereich Cookies, weil es die Frage an der Wurzel löst: Ohne Cookies und mit gekürzter Adresse entfällt die Einwilligungspflicht – und damit der Dialog, den ein erheblicher Teil der Besucher ohnehin wegklickt. Der Unterschied zu cloudbasierten Diensten liegt darin, wo die Daten liegen. Beim Eigenbetrieb bleiben sie auf dem eigenen Server; es entsteht keine Übermittlung an Dritte,…

### Google AdSense
- Profil: [Google AdSense](https://hypertext-markup-language.com/downloads/google-adsense)
- Inhaber: Google
- Website: [adsense.google.com](https://adsense.google.com)
- Standort: Google AdSense (kostenlos, Beteiligung an den Erlösen)
- Aktiv seit: 2003
- Leistungen: Werbeflächen einbinden, automatische oder feste Platzierung, Berichte
- Kurzbeschreibung: Der verbreitetste Weg, eine Website mit Werbung zu finanzieren – und für dieses Portal vor allem deshalb interessant, weil die Einbindung erhebliche Auswirkungen auf das Dokument hat. Drei Punkte, die man vorher wissen sollte: Ladezeit. Werbeskripte laden weitere Skripte nach. Was in Prüfläufen als guter Wert erscheint, kann mit aktiver Werbung deutlich schlechter ausfallen. Messen Sie mit…

### ads.txt
- Profil: [ads.txt](https://hypertext-markup-language.com/downloads/ads-txt)
- Inhaber: IAB Tech Lab
- Website: [iabtechlab.com/ads-txt/](https://iabtechlab.com/ads-txt/)
- Standort: Google AdSense (offener Standard, kostenlos)
- Aktiv seit: 2017
- Leistungen: Textdatei im Wurzelverzeichnis, benennt zugelassene Verkäufer der eigenen Werbeflächen
- Kurzbeschreibung: Eine einfache Textdatei im Wurzelverzeichnis der Domain, die benennt, wer die eigenen Werbeflächen verkaufen darf. Sie verhindert, dass Dritte im eigenen Namen Werbeplätze anbieten, die es gar nicht gibt. Der Aufbau ist bewusst schlicht: eine Zeile je zugelassenem Verkäufer, mit Kennung und Art der Beziehung. Wer AdSense nutzt, bekommt die passende Zeile im Konto angezeigt und muss sie nur…

### Stylelint
- Profil: [Stylelint](https://hypertext-markup-language.com/downloads/stylelint)
- Inhaber: Stylelint-Projekt
- Website: [stylelint.io](https://stylelint.io)
- Standort: CSS (kostenlos, quelloffen)
- Aktiv seit: 2015
- Leistungen: Prüfung im Editor und im Bauprozess, einstellbare Regeln, findet Doppelungen
- Kurzbeschreibung: Was HTMLHint für HTML ist, ist dieses Werkzeug für Stylesheets: eine Prüfung, die beim Schreiben mitläuft. Besonders nützlich sind die Regeln, die man von Hand nie prüfen würde: doppelte Eigenschaften im selben Block, Auswahlmuster, die nie greifen können, ungültige Farbwerte, uneinheitliche Schreibweisen. In gewachsenen Stylesheets findet der erste Durchlauf regelmäßig Dutzende solcher Stellen.…

### Autoprefixer
- Profil: [Autoprefixer](https://hypertext-markup-language.com/downloads/autoprefixer)
- Inhaber: PostCSS-Projekt
- Website: [autoprefixer.github.io](https://autoprefixer.github.io)
- Standort: CSS (kostenlos, quelloffen)
- Aktiv seit: 2013
- Leistungen: Ergänzt Herstellerpräfixe nach tatsächlicher Browserunterstützung
- Kurzbeschreibung: Ergänzt Herstellerpräfixe automatisch – und zwar nur die, die nach aktuellen Unterstützungsdaten noch gebraucht werden. Das ist der Punkt, der es von abgeschriebenen Präfix-Sammlungen unterscheidet: Es arbeitet mit demselben Datenbestand wie die Unterstützungstabellen. Wer eine Zielgruppe angibt – etwa die letzten zwei Browserfassungen –, bekommt genau die nötigen Präfixe und keine…

### Vite
- Profil: [Vite](https://hypertext-markup-language.com/downloads/vite)
- Inhaber: Vite-Projekt
- Website: [vite.dev](https://vite.dev)
- Standort: JavaScript (kostenlos, quelloffen)
- Aktiv seit: 2020
- Leistungen: Entwicklungsserver mit sofortiger Aktualisierung, Bündelung für die Veröffentlichung
- Kurzbeschreibung: Ein Entwicklungsserver, der Änderungen sofort im Browser zeigt – ohne dass die Seite neu geladen und der Zustand verloren geht. Für reine HTML-Arbeit braucht man das nicht; eine Datei im Browser öffnen genügt. Sobald aber Module, mehrere Stylesheets oder eine Vorschau über das Netzwerk ins Spiel kommen, ist der Unterschied deutlich: kein Speichern-Wechseln-Neuladen mehr. Ein zweiter Punkt, der…

### Bundlephobia
- Profil: [Bundlephobia](https://hypertext-markup-language.com/downloads/bundlephobia)
- Inhaber: Shubham Kanodia
- Website: [bundlephobia.com](https://bundlephobia.com)
- Standort: JavaScript (kostenlos)
- Aktiv seit: 2017
- Leistungen: Größe einer Bibliothek vor dem Einbinden, Ladezeit bei langsamer Verbindung, Alternativen
- Kurzbeschreibung: Beantwortet eine Frage, die zu selten gestellt wird: Was kostet diese Bibliothek eigentlich? Man gibt den Namen eines Pakets ein und bekommt die Größe nach Komprimierung, dazu die geschätzte Ladezeit bei langsamer Verbindung. Häufig steht dann die Erkenntnis am Ende, dass für eine einzige verwendete Funktion mehrere hundert Kilobyte mitgeladen werden. Der Zusammenhang mit HTML-Arbeit ist…

### Usercentrics
- Profil: [Usercentrics](https://hypertext-markup-language.com/downloads/usercentrics)
- Inhaber: Usercentrics GmbH, München
- Website: [usercentrics.com/de/](https://usercentrics.com/de/)
- Standort: Cookies (kostenpflichtig, kleine Fassung kostenfrei)
- Aktiv seit: 2017
- Leistungen: Einwilligungsverwaltung, Nachweisdokumentation, von Google zertifiziert
- Kurzbeschreibung: Der bekannteste Anbieter aus dem deutschsprachigen Raum. Für Websites mit Werbeeinbindung ist die Zertifizierung durch Google praktisch relevant: Ohne eine zertifizierte Lösung wird im Europäischen Wirtschaftsraum keine personalisierte Werbung ausgespielt. Der wesentliche Unterschied zu einer selbst betriebenen Lösung ist die Dokumentation. Der Dienst protokolliert, wer wann welcher Verarbeitung…

### Borlabs Cookie
- Profil: [Borlabs Cookie](https://hypertext-markup-language.com/downloads/borlabs-cookie)
- Inhaber: Borlabs GmbH, Hamburg
- Website: [borlabs.io/borlabs-cookie/](https://borlabs.io/borlabs-cookie/)
- Standort: Cookies (kostenpflichtig, WordPress)
- Aktiv seit: 2018
- Leistungen: Einwilligungsdialog für WordPress, blockiert Einbindungen vorab, deutschsprachiger Support
- Kurzbeschreibung: Die im deutschsprachigen WordPress-Umfeld verbreitetste Lösung. Alles läuft auf dem eigenen Server – es entsteht keine Verbindung zu einem fremden Anbieter, was gegenüber gehosteten Diensten der wesentliche Unterschied ist. Technisch wichtig ist die Vorabblockade: Einbindungen wie Karten, Videos oder Statistik werden ersetzt, bis zugestimmt wurde. Genau daran scheitern die meisten selbstgebauten…

### Real Cookie Banner
- Profil: [Real Cookie Banner](https://hypertext-markup-language.com/downloads/real-cookie-banner)
- Inhaber: devowl.io GmbH, Passau
- Website: [devowl.io/de/wordpress-real-cookie-banner/](https://devowl.io/de/wordpress-real-cookie-banner/)
- Standort: Cookies (Grundfassung kostenlos, WordPress)
- Aktiv seit: 2020
- Leistungen: Einwilligungsdialog für WordPress, Dienstevorlagen, Einwilligungsprotokoll
- Kurzbeschreibung: Zweite verbreitete Lösung für WordPress aus Deutschland, mit einer kostenlosen Grundfassung – das unterscheidet sie von den meisten Wettbewerbern. Der Aufbau ist ähnlich: Dialog auf dem eigenen Server, Vorabblockade der Einbindungen, Vorlagen für gängige Dienste. Enthalten ist außerdem ein Protokoll der erteilten Einwilligungen, das bei Rückfragen als Nachweis dient. Praktisch am ehesten…

### Orejime
- Profil: [Orejime](https://hypertext-markup-language.com/downloads/orejime)
- Inhaber: Empreinte Digitale
- Website: [orejime.empreintedigitale.fr](https://orejime.empreintedigitale.fr)
- Standort: Cookies (quelloffen, kostenlos)
- Aktiv seit: 2019
- Leistungen: Einwilligungsdialog mit Schwerpunkt Barrierefreiheit, ohne fremden Server
- Kurzbeschreibung: Eine Abspaltung von Klaro mit einem Schwerpunkt, der bei Einwilligungsdialogen selten ernst genommen wird: Bedienbarkeit mit Hilfsmitteln. Das Problem ist verbreitet und unangenehm. Der Dialog legt sich über die Seite und fängt den Tastaturfokus – oder eben nicht, und dann kann man ihn mit der Tastatur nicht schließen und die Seite nicht benutzen. Bei einem Element, das jeder Besucher als Erstes…

### Plausible Analytics
- Profil: [Plausible Analytics](https://hypertext-markup-language.com/downloads/plausible)
- Inhaber: Plausible Insights OÜ, Estland
- Website: [plausible.io](https://plausible.io)
- Standort: Cookies (quelloffen, Eigenbetrieb kostenlos)
- Aktiv seit: 2019
- Leistungen: Reichweitenmessung ohne Cookies, Server in der EU, sehr kleines Skript
- Kurzbeschreibung: Steht wie Matomo in diesem Bereich, weil es das Thema teilweise erübrigt: Es arbeitet grundsätzlich ohne Cookies und ohne personenbezogene Kennungen. Ein Einwilligungsdialog ist dafür nach verbreiteter Auffassung nicht erforderlich. Der Unterschied zu Matomo liegt im Umfang. Plausible zeigt bewusst weniger: Besuche, Quellen, Seiten, Länder, Geräte – auf einer einzigen Ansicht. Wer…

### Cookiedatabase.org
- Profil: [Cookiedatabase.org](https://hypertext-markup-language.com/downloads/cookiedatabase)
- Inhaber: Complianz
- Website: [cookiedatabase.org](https://cookiedatabase.org)
- Standort: Cookies (kostenlos, offene Datenbank)
- Aktiv seit: 2020
- Leistungen: Beschreibungen bekannter Cookies, Zweck und Laufzeit, für die eigene Erklärung nutzbar
- Kurzbeschreibung: Beantwortet die Frage, die nach jeder Prüfung kommt: Ich habe jetzt eine Liste mit sechzehn Cookies – was machen die eigentlich? Die Datenbank sammelt Beschreibungen bekannter Cookies: welcher Dienst sie setzt, wozu, mit welcher Laufzeit, in welche Kategorie sie fallen. Damit lässt sich eine Cookie-Erklärung schreiben, ohne für jeden Eintrag beim Anbieter nachzufragen. Nützlich ist das vor allem…

## Fachbeiträge

- Übersicht: [Html](https://hypertext-markup-language.com/html/)
- RSS: [Feed](https://hypertext-markup-language.com/html/feed.xml)

### [Bilder einbinden mit img](https://hypertext-markup-language.com/html/img)
- Kategorie: Verweise und Inhalte
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Quelle, Alternativtext, Maße und Ladeverhalten: vier Attribute, die über Zugänglichkeit und Ladezeit entscheiden.
- Kernaussagen:
  - src und alt sind Pflicht; ein dekoratives Bild bekommt ein leeres alt
  - Der Alternativtext beschreibt die Funktion des Bildes, nicht das Motiv
  - width und height reservieren den Platz und verhindern springendes Layout
  - loading lazy gehört nicht an das erste sichtbare Bild einer Seite
  - Mit srcset wählt der Browser die passende Größe selbst

### [Verweise mit dem a-Element: href, Ziele und Linktexte](https://hypertext-markup-language.com/html/a-href)
- Kategorie: Verweise und Inhalte
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Das Element, das aus Dokumenten ein Web macht. Adressarten, Sprungziele, Linktexte und die Frage, wann ein neues Fenster vertretbar ist.
- Kernaussagen:
  - Wurzelrelative Adressen überstehen das Verschieben einer Datei, dokumentrelative nicht
  - Sprungziele setzen eine im Dokument einmalige Kennung voraus
  - Der Linktext muss ohne den umgebenden Satz verständlich sein
  - Ein neues Fenster hebelt die Zurück-Taste aus und sollte angekündigt werden
  - Führt es woandershin, ist es ein Verweis; löst es etwas aus, ist es eine Schaltfläche

### [Überschriften h1 bis h6: Gliederung statt Schriftgröße](https://hypertext-markup-language.com/html/h1)
- Kategorie: Textauszeichnung
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Sechs Ebenen, eine Reihenfolge und ein verbreitetes Missverständnis: Überschriften bestimmen die Gliederung, nicht die Darstellung.
- Kernaussagen:
  - Die Abfolge der Ebenen ist die Information, nicht die Schriftgröße
  - Auf h2 folgt h3, nicht h4 – ein Sprung erzeugt eine Lücke im Verzeichnis
  - Eine h1 pro Seite ist die sichere Wahl, auch wenn mehrere erlaubt sind
  - Ein fett gesetzter Absatz ist keine Überschrift und fehlt in jeder Gliederung
  - Ein section-Element ohne formulierbare Überschrift ist meist nur eine Gruppierung

### [HTML5: was es gebracht hat und warum es keine Version mehr gibt](https://hypertext-markup-language.com/html/html5)
- Kategorie: HTML-Grundlagen
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Semantische Elemente, Medien ohne Zusatzsoftware, neue Formularfelder – und die Frage, welche Fassung heute eigentlich gilt.
- Kernaussagen:
  - HTML5 ist seit dem 28. Oktober 2014 W3C-Empfehlung
  - Bereichselemente geben Screenreadern eine Sprungliste durch die Seite
  - Video und Ton laufen seither ohne Flash oder andere Zusatzsoftware
  - Unbekannte Feldtypen fallen auf ein Textfeld zurück, neue Typen sind daher gefahrlos
  - Seit dem 28. Mai 2019 gibt es eine gemeinsame Fassung ohne Versionsnummern

### [Das body-Element: der sichtbare Teil einer Seite](https://hypertext-markup-language.com/html/body)
- Kategorie: HTML-Grundlagen
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Alles, was im Browserfenster erscheint, steht im body. Aufbau, erlaubter Inhalt und die Frage, warum Skripte am Ende stehen dürfen.
- Kernaussagen:
  - Der Rumpf enthält alles Sichtbare, der Kopfbereich alles über die Seite
  - Das main-Element darf nur einmal pro Dokument ohne hidden-Attribut vorkommen
  - Die Tags von html, head und body dürfen entfallen, sollten aber stehen bleiben
  - Skripte im Kopfbereich mit defer sind sauberer als Skripte am Ende des Rumpfes
  - Attribute wie bgcolor am Rumpf sind seit HTML5 ungültig

### [HTML-Spickzettel: die wichtigsten Elemente auf einen Blick](https://hypertext-markup-language.com/html/html-spickzettel)
- Kategorie: Verweise und Inhalte
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Grundgerüst, Struktur, Text, Verweise, Medien, Formulare – zum Nachschlagen, ohne Erklärung drumherum.
- Kernaussagen:
  - Das Grundgerüst besteht aus Typangabe, Wurzelelement, Kopfbereich und Rumpf
  - Bereichselemente ersetzen den Container mit Klassennamen
  - Überschriftenebenen bilden die Gliederung und werden nicht übersprungen
  - Tabellen brauchen eine Beschriftung und Kopfzellen mit Geltungsbereich
  - Jedes Formularfeld braucht eine Beschriftung und ein name-Attribut

### [Emojis in HTML: Kodierung, Zugänglichkeit, Darstellung](https://hypertext-markup-language.com/html/emojis)
- Kategorie: Verweise und Inhalte
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Direkt einfügen oder als Zeichenreferenz? Und was ein Screenreader daraus macht – die Antwort hängt vom Zweck ab.
- Kernaussagen:
  - Emojis brauchen UTF-8 als Kodierung, und die Datei muss auch so gespeichert sein
  - Direkte Zeichen sind lesbarer, numerische Referenzen robuster gegenüber alten Systemen
  - Dekorative Emojis gehören für Screenreader ausgeblendet
  - Bedeutungstragende Emojis brauchen eine Beschriftung, besser noch ein Wort daneben
  - Das Aussehen entscheidet das Betriebssystem, für gleichbleibende Symbole ist SVG geeigneter

### [Das hr-Element: thematischer Wechsel statt Trennlinie](https://hypertext-markup-language.com/html/hr)
- Kategorie: Verweise und Inhalte
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Aus der Trennlinie ist in HTML5 eine Bedeutung geworden. Wann sie richtig ist und wann eine Linie in CSS gehört.
- Kernaussagen:
  - Seit HTML5 bedeutet das Element einen thematischen Wechsel, keine Linie
  - Klassischer Fall ist der Szenenwechsel in einem erzählenden Text
  - Eine Linie über dem Fußbereich ist Gestaltung und gehört in CSS
  - Die alten Attribute für Größe, Breite und Ausrichtung sind ungültig
  - Manche Screenreader kündigen das Element an, was bei reiner Gestaltung stört

### [Listen in HTML: ul, ol, li und dl](https://hypertext-markup-language.com/html/ul-ol-und-li)
- Kategorie: Verweise und Inhalte
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Geordnet, ungeordnet, als Begriffsliste: Welche Liste wann passt und warum eine Liste mehr ist als Aufzählungspunkte.
- Kernaussagen:
  - Vertauschbar bedeutet ungeordnet, Reihenfolge mit Bedeutung bedeutet geordnet
  - Eine Begriffsliste passt für Paare aus Bezeichnung und Wert
  - Nur Listenelemente dürfen direkte Kinder von ul und ol sein
  - Eine Unterliste gehört in das übergeordnete Listenelement, nicht daneben
  - Absätze mit Aufzählungszeichen sehen aus wie eine Liste, werden aber nicht als solche angesagt

### [Tabellen in HTML: Aufbau, Kopfzellen und Zugänglichkeit](https://hypertext-markup-language.com/html/tabellen)
- Kategorie: Verweise und Inhalte
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Von table bis scope: wie eine Tabelle aufgebaut wird, die auch mit Screenreader benutzbar bleibt.
- Kernaussagen:
  - Tabellen sind für Daten gedacht, nicht für Seitenaufteilung
  - Die Beschriftung mit caption ist die Überschrift, die Screenreader ansagen
  - Kopfzellen brauchen scope mit dem Wert col oder row
  - Beim Verbinden von Zellen muss jede Zeile auf dieselbe Spaltenzahl kommen
  - Ein scrollbarer Bereich braucht tabindex null, sonst ist er per Tastatur unerreichbar

### [Zeilenumbruch mit br – und wann er falsch ist](https://hypertext-markup-language.com/html/br)
- Kategorie: Textauszeichnung
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Ein leeres Element mit einer engen Berechtigung: Umbrüche, die zum Inhalt gehören. Für Abstände ist es das falsche Werkzeug.
- Kernaussagen:
  - Der Umbruch gehört zum Inhalt: Anschriften, Gedichte, Formeln
  - Für Abstände zwischen Absätzen ist CSS zuständig, nicht das Umbruchelement
  - Eine Aufzählung mit Umbrüchen ist für Screenreader keine Liste
  - In HTML genügt die Schreibweise ohne Schrägstrich, ein schließendes Tag gibt es nicht
  - Ein geschütztes Leerzeichen verhindert Umbrüche, wbr erlaubt sie an einer Stelle

### [Zitate mit blockquote und q](https://hypertext-markup-language.com/html/blockquote)
- Kategorie: Textauszeichnung
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Ein Zitat ist kein Einzug. Wie Zitate ausgezeichnet werden und wohin die Quellenangabe gehört.
- Kernaussagen:
  - blockquote für längere Zitate, q für kurze innerhalb eines Satzes
  - Das cite-Attribut ist unsichtbar und ersetzt keine lesbare Quellenangabe
  - Die Quellenangabe gehört in figcaption, nicht in das Zitat selbst
  - Das cite-Element bezeichnet den Titel eines Werks, nicht eine Person
  - Für reine Einrückung ist CSS zuständig, nicht das Zitatelement

### [Quelltext auszeichnen mit code und pre](https://hypertext-markup-language.com/html/code)
- Kategorie: Textauszeichnung
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Ein Element für den Schnipsel in der Zeile, eins für den Block – und die Regel, ohne die jedes Codebeispiel kaputtgeht.
- Kernaussagen:
  - code steht in der Zeile, pre erhält Umbrüche und Leerzeichen
  - Die empfohlene Form für Blöcke ist pre mit code darin
  - Spitze Klammern und das kaufmännische Und müssen maskiert werden
  - Das öffnende Tag steht ohne Umbruch direkt vor dem Code, sonst wandert die Einrückung mit
  - Für Tasteneingaben gibt es kbd, für Programmausgaben samp

### [Tief- und Hochstellung mit sub und sup](https://hypertext-markup-language.com/html/sub)
- Kategorie: Textauszeichnung
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Summenformeln, Fußnoten, Maßeinheiten: zwei kleine Elemente mit klarer Regel – sie sind für Bedeutung da, nicht für Optik.
- Kernaussagen:
  - Tief- und Hochstellung gehören zur Schreibweise, nicht zur Gestaltung
  - Typische Fälle sind Summenformeln, Exponenten, Maßeinheiten und Fußnoten
  - Eine Fußnote braucht einen Rückverweis, sonst führt der Sprung in eine Sackgasse
  - Ordnungszahlen werden im Deutschen nicht hochgestellt
  - Eine Mindestgröße in CSS hält verschachtelte Stellungen lesbar

### [Das u-Element: unterstreichen ohne Verweis](https://hypertext-markup-language.com/html/u)
- Kategorie: Textauszeichnung
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Unterstrichener Text sieht im Web nach einem Verweis aus. Warum das u-Element trotzdem existiert und wann es passt.
- Kernaussagen:
  - Unterstrichener Text wird im Web als Verweis gelesen
  - Für Wichtigkeit ist strong die richtige Wahl, nicht die Unterstreichung
  - Vorgesehen ist u für markierte Fehler und für Eigennamen in chinesischen Texten
  - Für Änderungen an einem Dokument gibt es ins und del mit Zeitangabe
  - Verweise sollten unterstrichen bleiben, weil Farbe allein nicht ausreicht

### [Das i-Element: kursiv aus anderem Grund](https://hypertext-markup-language.com/html/i)
- Kategorie: Textauszeichnung
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Fremdwörter, Fachbegriffe, Schiffsnamen: Wofür das i-Element gedacht ist und warum em etwas anderes bedeutet.
- Kernaussagen:
  - i markiert Abweichung, em markiert Betonung mit Sinnänderung
  - Bei fremdsprachigen Ausdrücken gehört ein lang-Attribut dazu
  - Für Titel von Werken ist cite meist die passendere Wahl
  - Für einen Begriff, der gerade definiert wird, gibt es dfn
  - Rein gestalterische Kursivschrift gehört in CSS, nicht in ein Element

### [Das b-Element: fett ohne Bedeutung](https://hypertext-markup-language.com/html/b)
- Kategorie: Textauszeichnung
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: b und strong sehen gleich aus und sagen Verschiedenes. Wann das kleinere Element trotzdem das richtige ist.
- Kernaussagen:
  - b hebt hervor, ohne einen Grund anzugeben; strong bedeutet Wichtigkeit
  - Beide sehen voreingestellt gleich aus, sagen aber Verschiedenes
  - Passend für b sind Schlüsselwörter, Produktnamen und Ortsangaben
  - Im Zweifel ist strong richtig, weil meistens Wichtigkeit gemeint ist
  - Eine Klasse namens fett teilt keiner Software eine Hervorhebung mit

### [HTML-Kommentare: Notizen im Quelltext](https://hypertext-markup-language.com/html/kommentar)
- Kategorie: HTML-Grundlagen
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Kommentare erklären den Quelltext, ohne im Browser zu erscheinen. Was dabei niemand vergessen sollte: Sie werden mitgeliefert.
- Kernaussagen:
  - Kommentare erscheinen nicht auf der Seite, werden aber mitgeliefert und sind lesbar
  - Zugangsdaten, interne Pfade und unveröffentlichte Vorhaben gehören nicht hinein
  - Zwei Bindestriche im Kommentar können ihn vorzeitig beenden
  - Kommentare lassen sich nicht verschachteln
  - Ein guter Kommentar erklärt das Warum, nicht das Was

### [Absätze mit dem p-Element](https://hypertext-markup-language.com/html/p)
- Kategorie: Elemente
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Das meistgenutzte Element überhaupt. Was hineindarf, was nicht, und warum das schließende Tag trotzdem stehen sollte.
- Kernaussagen:
  - Ein Absatz enthält einen abgeschlossenen Gedanken, Umbrüche im Quelltext sind bedeutungslos
  - Erlaubt ist nur Inline-Inhalt: Text, Verweise, Hervorhebungen, Bilder
  - Ein Blockelement im Absatz beendet ihn vorzeitig, ohne Fehlermeldung
  - Abstände gehören ins Stylesheet, nicht in leere Absätze
  - Ein Absatz in Überschriftengröße fehlt in Inhaltsverzeichnis und Gliederung

### [Das span-Element: Auszeichnung innerhalb einer Zeile](https://hypertext-markup-language.com/html/span)
- Kategorie: Elemente
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Ein span greift einen Teil eines Textes heraus, ohne den Fluss zu unterbrechen. Wann er nötig ist – und wann strong oder em die bessere Wahl sind.
- Kernaussagen:
  - Ein span greift Text heraus, ohne den Fluss zu unterbrechen und ohne Bedeutung
  - Für Wichtigkeit, Betonung, Zeit, Abkürzung und Quelltext gibt es eigene Elemente
  - strong bedeutet Wichtigkeit, b markiert nur abgesetzten Text ohne Begründung
  - Maße wirken erst mit inline-block, weil ein span im Textfluss steht
  - Die Inhaltskategorie hängt am Element, nicht an der Darstellung

### [Das div-Element: der Container ohne Bedeutung](https://hypertext-markup-language.com/html/div)
- Kategorie: Elemente
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Ein div sagt nichts aus. Genau das ist sein Zweck – und der Grund, warum er in vielen Projekten an falscher Stelle steht.
- Kernaussagen:
  - Ein div trägt keine Bedeutung, und genau das ist sein Zweck
  - Vor jedem div prüfen, ob nav, article, section, aside, header oder footer passt
  - Ein angeklicktes div ersetzt keine Schaltfläche: Fokus, Tastatur und Ansage fehlen
  - Test ohne CSS: bleibt die Gliederung lesbar, stimmt die Struktur
  - Weniger Verschachtelung macht auch das Stylesheet einfacher

### [HTML-Befehle: warum es sie nicht gibt und was stattdessen gemeint ist](https://hypertext-markup-language.com/html/html-befehle)
- Kategorie: HTML-Grundlagen
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: HTML kennt keine Befehle, sondern Elemente. Die Unterscheidung erklärt, warum manche Erwartungen an HTML nie erfüllt werden.
- Kernaussagen:
  - Elemente beschreiben Bedeutung, sie weisen nichts an
  - Wie etwas aussieht, entscheidet CSS, nicht das Element
  - Rund dreißig Elemente decken den größten Teil aller Webseiten ab
  - Verhalten wie Aufklappen bringen einzelne Elemente von sich aus mit, etwa details und summary
  - Fragen nach Bedingungen und Reaktionen führen fast immer zu JavaScript

### [Der head-Bereich: was der Browser vor dem Inhalt liest](https://hypertext-markup-language.com/html/head)
- Kategorie: HTML-Grundlagen
- Veröffentlicht: 2026-08-16
- Autor: Alexander Müller
- Zusammenfassung: Zeichenkodierung, Titel, Viewport, Stylesheets: Was im Kopfbereich steht, entscheidet über Darstellung, Ladezeit und Auffindbarkeit.
- Kernaussagen:
  - Die Zeichenkodierung gehört in die ersten 1024 Byte des Dokuments
  - Titel und Beschreibung bestimmen, wie die Seite in der Trefferliste erscheint
  - Stylesheets blockieren die Darstellung, bis sie geladen sind
  - Skripte im Kopfbereich brauchen defer oder async, sonst hält der Seitenaufbau an
  - head ist unsichtbar, header ist ein sichtbares Element im Rumpf

## Glossar

- Übersicht: [Glossar](https://hypertext-markup-language.com/glossar/)
- Aufbau je Eintrag: Kurzantwort, Kurz-Fakten, Einordnung, verwandte Begriffe

- [alt-Attribut](https://hypertext-markup-language.com/glossar/alt-attribut): Das alt-Attribut enthält den Alternativtext eines Bildes: die Beschreibung, die an die Stelle des Bildes tritt, wenn es nicht angezeigt werden kann oder nicht gesehen wird. Es ist bei jedem img-Element vorgeschrieben. Ein rein dekoratives Bild bekommt ein leeres alt-Attribut (alt=""), damit…
- [Semantisches HTML](https://hypertext-markup-language.com/glossar/semantic-html): Semantisches HTML bedeutet, für jeden Inhalt das Element zu wählen, das seine Rolle beschreibt – nav für Navigation, article für einen eigenständigen Beitrag, button für eine Schaltfläche. Die Alternative ist ein div für alles, das zwar gleich aussieht, aber weder Screenreadern noch Suchmaschinen…
- [Canonical-Tag](https://hypertext-markup-language.com/glossar/canonical-tag): Das Canonical-Tag ist ein link-Element im Kopfbereich, das angibt, welche Adresse als maßgebliche Fassung eines Inhalts gelten soll. Es wird gebraucht, wenn derselbe Inhalt unter mehreren Adressen erreichbar ist – etwa mit und ohne Parameter, mit und ohne www. Suchmaschinen behandeln die Angabe…
- [Element](https://hypertext-markup-language.com/glossar/elemente): Ein Element ist der Grundbaustein eines HTML-Dokuments: ein öffnendes Tag, ein Inhalt und ein schließendes Tag, zusammen eine benannte Einheit mit einer Bedeutung. Nicht jedes Element hat Inhalt – leere Elemente wie img, br und hr bestehen nur aus einem Tag. Der Elementname legt fest, wie Browser,…
- [Attribut](https://hypertext-markup-language.com/glossar/attribute): Attribute stehen im öffnenden Tag eines Elements und verändern dessen Verhalten oder liefern zusätzliche Angaben – etwa die Bildquelle bei src, das Verweisziel bei href oder den Alternativtext bei alt. Sie bestehen aus Name und Wert in Anführungszeichen. Globale Attribute wie id, class, lang und…
- [Tag](https://hypertext-markup-language.com/glossar/tag-struktur): Ein Tag ist die Schreibweise, mit der ein Element im Quelltext markiert wird: der Name in spitzen Klammern, beim schließenden Tag mit vorangestelltem Schrägstrich. Ein Element besteht in der Regel aus zwei Tags und dem Inhalt dazwischen. Leere Elemente haben nur ein Tag – ein schließendes wäre…
- [DOCTYPE-Deklaration](https://hypertext-markup-language.com/glossar/doctype-deklaration): Die DOCTYPE-Deklaration steht als erste Zeile eines HTML-Dokuments und lautet vollständig: <!DOCTYPE html>. Sie beschreibt keinen Dokumenttyp mehr, sondern hat nur noch eine Aufgabe – sie hält den Browser im Standardmodus. Fehlt sie, schaltet er in den Quirks-Modus und rechnet nach den Regeln der…
- [Verschachtelung](https://hypertext-markup-language.com/glossar/verschachtelung): Verschachtelung bezeichnet Elemente, die andere Elemente enthalten. Die Regel ist einfach: Was zuletzt geöffnet wurde, wird zuerst geschlossen. Welche Elemente ein Element überhaupt enthalten darf, legt sein Inhaltsmodell in der Spezifikation fest – ein Absatz darf keinen Absatz und kein div…
- [Block-Elemente](https://hypertext-markup-language.com/glossar/block-elemente): Als Block-Elemente werden Elemente bezeichnet, die im Normalfall die volle verfügbare Breite einnehmen und in einer neuen Zeile beginnen – etwa div, p, h1 bis h6, section und article. Genau genommen ist das eine CSS-Eigenschaft und keine HTML-Kategorie: Die Einteilung ergibt sich aus dem…
- [Inline-Elemente](https://hypertext-markup-language.com/glossar/inline-elemente): Inline-Elemente nehmen nur so viel Platz ein, wie ihr Inhalt braucht, und erzeugen keinen Zeilenumbruch – etwa a, span, strong, em und img. Wie bei den Block-Elementen ist das eine Beschreibung des voreingestellten display-Werts, keine HTML-Kategorie. In der Spezifikation heißt die entsprechende…
- [DOM](https://hypertext-markup-language.com/glossar/dom): Das Document Object Model ist die Baumstruktur, die ein Browser aus einem HTML-Dokument erzeugt, sowie die Schnittstelle, über die Programme darauf zugreifen. Jedes Element, jedes Attribut und jeder Textabschnitt wird darin zu einem Knoten. JavaScript verändert nie die HTML-Datei, sondern immer…
- [Validierung](https://hypertext-markup-language.com/glossar/validierung): Validierung bezeichnet die Prüfung eines Dokuments gegen die Regeln der HTML-Spezifikation: erlaubte Elemente, erlaubte Attribute, zulässige Verschachtelung. Sie wird von einem Prüfprogramm vorgenommen, nicht vom Browser – Browser reparieren Fehler stillschweigend und zeigen sie nie an. Gültiges…
- [HTML-Entities](https://hypertext-markup-language.com/glossar/html-entities): HTML-Entities sind Ersatzschreibweisen für Zeichen, die im Quelltext eine eigene Bedeutung haben oder sich schlecht eingeben lassen. Sie beginnen mit einem kaufmännischen Und und enden mit einem Semikolon, etwa &lt; für die spitze Klammer links. Zwingend nötig sind sie nur für wenige Zeichen: das…
- [CSS einbinden](https://hypertext-markup-language.com/glossar/css-integration): CSS lässt sich auf drei Wegen mit HTML verbinden: als externe Datei über ein link-Element im Kopfbereich, als style-Block im Dokument oder als style-Attribut an einem einzelnen Element. Der Regelfall ist die externe Datei, weil sie über alle Seiten hinweg zwischengespeichert wird. Das…
- [JavaScript einbinden](https://hypertext-markup-language.com/glossar/javascript-einbindung): JavaScript wird über das script-Element eingebunden – entweder mit einem src-Attribut als externe Datei oder direkt als Inhalt des Elements. Entscheidend ist der Zeitpunkt der Ausführung: Ohne Zusatz hält ein Skript den Aufbau der Seite an, defer verschiebt die Ausführung ans Ende und behält die…
- [Responsive HTML](https://hypertext-markup-language.com/glossar/responsive-html): Responsives Verhalten entsteht überwiegend in CSS – HTML steuert zwei Dinge bei: die Viewport-Angabe im Kopfbereich und die Auswahl passender Bilder über srcset, sizes und das picture-Element. Ohne die Viewport-Angabe stellt ein Mobilbrowser die Seite in einer angenommenen Desktop-Breite dar und…
- [Web Components](https://hypertext-markup-language.com/glossar/web-components): Web Components sind eine Sammlung von Browser-Techniken, mit denen sich eigene HTML-Elemente bauen lassen: Custom Elements definieren den Namen und das Verhalten, der Shadow DOM kapselt Aufbau und Gestaltung gegen den Rest der Seite ab, das template-Element hält die Vorlage bereit. Ein eigener…
- [header](https://hypertext-markup-language.com/glossar/header): Das header-Element kennzeichnet den einleitenden Bereich eines Abschnitts: üblicherweise Logo, Seitentitel, Navigation oder bei einem Artikel dessen Überschrift und Datum. Es ist nicht auf einmal pro Seite beschränkt – jeder Artikel und jede Section darf einen eigenen header haben. Zu verwechseln…
- [footer](https://hypertext-markup-language.com/glossar/footer): Das footer-Element kennzeichnet den abschließenden Bereich eines Abschnitts – auf Seitenebene typischerweise mit Impressum, Datenschutz und Urheberrechtshinweis, bei einem Artikel mit Verfasserangabe und Quellen. Es muss nicht am Ende des Dokuments stehen: Maßgeblich ist die Zugehörigkeit zum…
- [Multimedia-Elemente](https://hypertext-markup-language.com/glossar/multimedia-elemente): Als Multimedia-Elemente werden die Elemente bezeichnet, mit denen sich Bild, Ton und Video ohne Zusatzprogramme einbinden lassen: img für Bilder, audio für Ton, video für Bewegtbild, picture für die Auswahl unter mehreren Bildfassungen und canvas für gezeichnete Grafik. Vor HTML5 war dafür…
- [class-Attribut](https://hypertext-markup-language.com/glossar/class-attribut): Das class-Attribut ordnet einem Element eine oder mehrere Bezeichnungen zu, über die CSS und JavaScript es ansprechen können. Mehrere Klassen werden durch Leerzeichen getrennt, dieselbe Klasse darf an beliebig vielen Elementen stehen. Für den Browser ist der Klassenname bedeutungsloser Text – er…
- [id-Attribut](https://hypertext-markup-language.com/glossar/id-attribut): Das id-Attribut vergibt eine Kennung, die im gesamten Dokument nur einmal vorkommen darf. Sie dient als Sprungziel für Verweise, als Verbindung zwischen Beschriftung und Formularfeld und als Zugriffspunkt für JavaScript. Eine doppelt vergebene id ist ein Validierungsfehler mit spürbaren Folgen –…
- [style-Attribut](https://hypertext-markup-language.com/glossar/style-attribut): Das style-Attribut enthält CSS-Deklarationen, die nur für das eine Element gelten, an dem es steht. Es hat eine höhere Spezifität als jede Regel aus einem Stylesheet und lässt sich nur mit !important überschreiben. Sinnvoll ist es für Werte, die erst zur Laufzeit entstehen – für alles andere…
- [title-Attribut](https://hypertext-markup-language.com/glossar/title-attribut): Das title-Attribut hinterlegt einen erläuternden Text, den Browser als Sprechblase anzeigen, wenn der Mauszeiger auf dem Element verweilt. Es ist an jedem Element erlaubt, aber als Träger wichtiger Information unbrauchbar: Auf Touchgeräten erscheint es gar nicht, per Tastatur meist nicht, und…
- [target-Attribut](https://hypertext-markup-language.com/glossar/target-attribut): Das target-Attribut an einem Verweis legt fest, wo das Ziel geöffnet wird. Praktisch relevant ist nur ein Wert: _blank öffnet in einem neuen Tab. Ohne Angabe wird im selben Tab geöffnet, was der Regelfall bleiben sollte – die Entscheidung über ein neues Fenster gehört dem Nutzer, nicht dem Autor.
- [data-Attribute](https://hypertext-markup-language.com/glossar/data-attribute): Mit dem Präfix data- lassen sich eigene Attribute an jedem Element anlegen, ohne die Gültigkeit des Dokuments zu verletzen. Sie halten Daten für JavaScript bereit – eine Kennung, einen Zustand, einen Zielwert. Der Browser selbst wertet sie nicht aus; sie sind ausdrücklich für den Autor der Seite…
- [hreflang-Attribut](https://hypertext-markup-language.com/glossar/hreflang-attribut): Das hreflang-Attribut an einem Verweis gibt an, in welcher Sprache das verlinkte Dokument vorliegt. Es ist ein Hinweis für Nutzer und Hilfstechnik, kein Steuerbefehl – der Browser lädt dieselbe Adresse, unabhängig von der Angabe. Nicht zu verwechseln ist es mit den hreflang-Angaben im Kopfbereich,…
- [link-Element](https://hypertext-markup-language.com/glossar/link-tag): Das link-Element stellt im Kopfbereich eine Beziehung zwischen dem Dokument und einer externen Ressource her – am häufigsten zu einem Stylesheet, außerdem zu Symbolbildern, zur kanonischen Adresse, zu Sprachversionen oder zu einem Feed. Es ist ein leeres Element ohne Inhalt und darf nicht mit dem…
- [Formularelemente](https://hypertext-markup-language.com/glossar/form-elemente): Ein Formular besteht aus dem form-Element als Rahmen und den Feldern darin: input, textarea, select, button, dazu label für die Beschriftung und fieldset für die Gruppierung. Das form-Element bestimmt über action, wohin die Daten gehen, und über method, wie sie übertragen werden – get hängt sie an…
- [Input-Typen](https://hypertext-markup-language.com/glossar/input-typen): Das type-Attribut am input-Element legt fest, welche Art von Eingabe erwartet wird – text, email, tel, url, number, date, color, range, file, checkbox, radio, password und weitere. Der Typ steuert die Tastatur auf Mobilgeräten, die eingebaute Prüfung und die Darstellung. Kennt ein Browser einen…
- [label-Element](https://hypertext-markup-language.com/glossar/label-element): Das label-Element beschriftet ein Formularfeld und verbindet sich mit ihm – entweder über das for-Attribut, das die id des Feldes nennt, oder indem es das Feld umschließt. Die Verbindung hat zwei Wirkungen: Screenreader sagen die Beschriftung beim Fokussieren an, und ein Klick auf den Text…
- [button-Element](https://hypertext-markup-language.com/glossar/button-element): Das button-Element erzeugt eine Schaltfläche mit Beschriftung aus seinem Inhalt. Innerhalb eines Formulars ist der Vorgabewert von type submit – ein button ohne Typangabe schickt das Formular ab, auch wenn er etwas ganz anderes tun sollte. Wer nur JavaScript auslösen will, setzt type="button".
- [Formularvalidierung](https://hypertext-markup-language.com/glossar/formular-validierung): Die eingebaute Formularvalidierung prüft Eingaben im Browser, bevor ein Formular abgeschickt wird – über Attribute wie required, pattern, min, max, minlength und maxlength sowie über den Feldtyp. Sie ist eine Hilfe für den Nutzer und keine Sicherheitsmaßnahme: Jede dieser Prüfungen lässt sich…
- [iframe](https://hypertext-markup-language.com/glossar/iframe): Ein iframe bettet ein eigenständiges Dokument in eine Seite ein – eine Karte, ein Video eines Anbieters, ein Formular eines fremden Dienstes. Der eingebettete Inhalt bleibt ein eigenes Dokument mit eigenem Kontext; Zugriff zwischen beiden Seiten ist nur eingeschränkt möglich. Ein title-Attribut…
- [template-Element](https://hypertext-markup-language.com/glossar/template-tag): Das template-Element hält Markup bereit, das nicht dargestellt wird: Der Browser verarbeitet den Inhalt beim Laden nicht – Bilder werden nicht geladen, Skripte nicht ausgeführt, Gestaltung nicht angewendet. Erst wenn JavaScript den Inhalt kopiert und einfügt, wird er lebendig. Gedacht ist es für…
- [Local Storage](https://hypertext-markup-language.com/glossar/local-storage): Local Storage ist ein Speicher im Browser, in dem eine Website Werte als Schlüssel-Wert-Paare ablegen kann – dauerhaft, bis sie gelöscht werden. Er gehört nicht zu HTML, sondern zur Web-Storage-Schnittstelle und wird über JavaScript angesprochen. Der Speicher ist an die Herkunft gebunden: Nur…
- [colspan](https://hypertext-markup-language.com/glossar/colspan): Das colspan-Attribut lässt eine Tabellenzelle über mehrere Spalten reichen. Es steht an td oder th und enthält die Anzahl der Spalten, die die Zelle einnimmt. Damit die Tabelle gültig bleibt, muss jede Zeile rechnerisch auf dieselbe Spaltenzahl kommen – verbundene Zellen zählen entsprechend…
- [rowspan](https://hypertext-markup-language.com/glossar/rowspan): Das rowspan-Attribut lässt eine Tabellenzelle über mehrere Zeilen reichen. Es steht an td oder th und enthält die Anzahl der Zeilen. In den überspannten Zeilen entfällt die entsprechende Zelle – sie darf dort nicht noch einmal geschrieben werden, sonst verschiebt sich die Tabelle um eine Spalte.
- [Meta-Tags](https://hypertext-markup-language.com/glossar/meta-tags): Meta-Tags sind Angaben im Kopfbereich eines Dokuments, die etwas über die Seite aussagen, statt Inhalt darzustellen: Zeichenkodierung, Kurzbeschreibung, Anweisungen an Suchmaschinen, Viewport-Einstellung. Sie werden mit dem leeren Element meta geschrieben und tragen ihre Bedeutung in den…
- [Meta-Description](https://hypertext-markup-language.com/glossar/meta-description): Die Meta-Description ist eine Kurzbeschreibung der Seite im Kopfbereich. Sie ist kein Rangfaktor, beeinflusst aber, was in der Trefferliste unter dem Titel steht – und damit, wie viele Menschen klicken. Suchmaschinen übernehmen sie nicht immer: Passt ein Abschnitt aus dem Text besser zur…
- [Meta-Keywords](https://hypertext-markup-language.com/glossar/meta-keywords): Das Meta-Keywords-Element listete früher Schlüsselwörter zu einer Seite auf. Google hat 2009 öffentlich erklärt, es für die Bewertung nicht zu verwenden – seither ist es ohne Wirkung auf die Platzierung. Es schadet nicht, kostet aber Pflegeaufwand und verrät Wettbewerbern, auf welche Begriffe eine…
- [Meta-Robots](https://hypertext-markup-language.com/glossar/meta-robots): Das Robots-Meta-Element weist Suchmaschinen an, wie sie mit einer Seite umgehen sollen: noindex hält sie aus dem Index, nofollow unterbindet das Verfolgen der Verweise darauf, noarchive verhindert die zwischengespeicherte Fassung. Die Anweisung greift nur, wenn die Seite abgerufen werden darf –…
- [title-Element](https://hypertext-markup-language.com/glossar/title-tag): Das title-Element im Kopfbereich enthält den Titel des Dokuments. Er erscheint im Browsertab, als Vorschlag beim Setzen eines Lesezeichens und als anklickbare Zeile in der Trefferliste. Er ist Pflicht in jedem HTML-Dokument und darf nur einmal vorkommen. Zu unterscheiden ist er von der…
- [Open Graph](https://hypertext-markup-language.com/glossar/open-graph-tags): Open Graph ist ein Satz von Metaangaben, mit denen eine Seite festlegt, wie sie beim Teilen in sozialen Netzwerken und Messengern aussieht: Titel, Beschreibung, Vorschaubild, Adresse und Typ. Die Angaben stehen im Kopfbereich und verwenden das Attribut property statt name. Ohne sie sucht sich die…
- [Strukturierte Daten](https://hypertext-markup-language.com/glossar/strukturierte-daten): Strukturierte Daten beschreiben den Inhalt einer Seite in einer Form, die Maschinen eindeutig lesen können: Was ist ein Preis, was ein Datum, was ein Verfasser. Das gebräuchliche Vokabular dafür ist Schema.org, die gebräuchliche Schreibweise JSON-LD in einem script-Element. Suchmaschinen nutzen…
- [Microdata](https://hypertext-markup-language.com/glossar/microdata): Microdata ist eine Schreibweise für strukturierte Daten, bei der die Angaben über Attribute direkt in das sichtbare Markup eingewoben werden: itemscope öffnet ein Objekt, itemtype nennt den Typ, itemprop bezeichnet die einzelne Eigenschaft. Der Vorteil ist die feste Verbindung zwischen Anzeige und…
- [Barrierefreiheit](https://hypertext-markup-language.com/glossar/accessibility): Barrierefreiheit bedeutet, dass eine Website auch mit Screenreader, Tastatur, Vergrößerung oder eingeschränkter Farbwahrnehmung nutzbar ist. Der größte Teil davon entsteht in HTML, nicht in Zusatztechnik: richtige Elemente, sinnvolle Überschriftenfolge, beschriftete Formularfelder,…
- [ARIA](https://hypertext-markup-language.com/glossar/aria): ARIA ist ein Satz von Attributen, mit denen sich Rolle, Zustand und Eigenschaften eines Bedienelements für Hilfstechnik beschreiben lassen – etwa role, aria-label, aria-expanded oder aria-hidden. Gedacht ist es für Fälle, die HTML nicht abdeckt. Wo ein passendes Element existiert, ist dieses…
- [picture-Element](https://hypertext-markup-language.com/glossar/picture-element): Das picture-Element umschließt mehrere source-Angaben und ein img-Element als Rückfall. Der Browser wählt die erste source, deren Bedingung zutrifft – nach Bildschirmbreite oder nach unterstütztem Dateiformat. Gebraucht wird es für zwei Fälle: einen anderen Bildausschnitt auf kleinen Bildschirmen…
- [SVG einbinden](https://hypertext-markup-language.com/glossar/svg-integration): SVG ist ein Format für Vektorgrafiken, das sich verlustfrei skalieren lässt. Es kann als Datei über ein img-Element eingebunden oder direkt als Markup in das Dokument geschrieben werden. Der Unterschied ist erheblich: Als Datei bleibt die Grafik ein abgeschlossenes Bild, inline wird sie Teil des…
- [canvas-Element](https://hypertext-markup-language.com/glossar/canvas-element): Das canvas-Element stellt eine Zeichenfläche bereit, auf der JavaScript Pixel für Pixel Grafiken erzeugt – für Diagramme, Bildbearbeitung, Spiele und Visualisierungen. Anders als bei SVG entsteht dabei kein Objektbaum: Was gezeichnet wurde, ist danach nur noch ein Bild. Für Hilfstechnik und…
- [video-Element](https://hypertext-markup-language.com/glossar/video-tag): Das video-Element bindet Bewegtbild ohne Zusatzsoftware ein. Mit dem Attribut controls zeigt der Browser seine eigene Bedienleiste, mehrere source-Elemente bieten dasselbe Video in verschiedenen Formaten an. Untertitel werden über track-Elemente eingebunden – bei Videos mit Sprache ist das keine…
- [audio-Element](https://hypertext-markup-language.com/glossar/audio-tag): Das audio-Element bindet Tondateien ein – Musik, Sprachaufnahmen, Podcast-Folgen. Es funktioniert wie das video-Element: controls zeigt die Bedienleiste des Browsers, mehrere source-Elemente bieten verschiedene Formate an. Ohne controls ist das Element unsichtbar und nur über JavaScript steuerbar,…

## Redaktion

### Alexander Müller
- Profil: [Alexander Müller](https://hypertext-markup-language.com/autor/alexander-mueller)
- Rolle: Webmaster, SEO- und HTML-Berater
- Kurzvorstellung: Betreibt hypertext-markup-language.com als privates Projekt. Beruflich SEO und Webentwicklung seit 2012.
- Fachgebiete: HTML, Semantische Auszeichnung, Barrierefreiheit im Web, Suchmaschinenoptimierung, Hypertext Markup Language, Strukturierte Daten
- Dieselbe Person unter:
  - https://www.linkedin.com/in/alexander-gerhard-müller-806722200/
  - https://www.provenexpert.com/seo-nw-alexander-mueller/
  - https://knowsabout.me
  - https://www.facebook.com/seonetzwerk

## Extras

- [CSS: Gestaltung getrennt vom Inhalt](https://hypertext-markup-language.com/extras/css)
- [JavaScript: Verhalten zum Dokument hinzufügen](https://hypertext-markup-language.com/extras/javascript)
- [Webhosting: was eine Website zum Laufen braucht](https://hypertext-markup-language.com/extras/webhosting)
- [SEO: was HTML zur Auffindbarkeit beiträgt](https://hypertext-markup-language.com/extras/seo)
- [Google AdSense: Werbung im HTML einer Seite](https://hypertext-markup-language.com/extras/google-adsense)
- [Cookies: Technik, Einwilligung, Alternativen](https://hypertext-markup-language.com/extras/cookie)
- [Browser: was sie aus HTML machen](https://hypertext-markup-language.com/extras/browser)
- [Editoren: womit HTML geschrieben wird](https://hypertext-markup-language.com/extras/editoren)
- [Grafik im Web: Formate, Größen, Werkzeuge](https://hypertext-markup-language.com/extras/grafik)
- [HTML in E-Mails: andere Regeln als im Browser](https://hypertext-markup-language.com/extras/e-mail)
- [Validierung: Woran man gültiges HTML erkennt](https://hypertext-markup-language.com/extras/validierung)
- [Barrierefreiheit: Was HTML dazu beiträgt](https://hypertext-markup-language.com/extras/barrierefreiheit)
- [Strukturierte Daten: Bedeutung maschinell lesbar](https://hypertext-markup-language.com/extras/strukturierte-daten)
- [Ladezeit: Was das Dokument dazu beiträgt](https://hypertext-markup-language.com/extras/ladezeit)
- [Sicherheit: Schutzangaben und Drittanbieter](https://hypertext-markup-language.com/extras/sicherheit)
- [Nachschlagen: Welche Quelle wann gilt](https://hypertext-markup-language.com/extras/nachschlagen)

## Häufige Fragen

**Welches Werkzeug brauche ich als Erstes?**
Den Markup Validation Service des W3C. Er sagt, ob das Dokument gültig ist, und benennt jeden Fund mit Zeile und Spalte. Wer diese Liste abarbeitet, beseitigt fast immer auch Probleme, die vorher unerklärlich schienen.

**Verbessert gültiges HTML mein Ranking?**
Nein, Gültigkeit ist kein Rangfaktor. Der Nutzen liegt woanders: in vorhersagbarer Darstellung, in Zugänglichkeit und darin, dass maschinelle Auswerter die Struktur überhaupt erkennen.

**Reicht eine automatische Prüfung für Barrierefreiheit?**
Nein. Automatische Werkzeuge finden je nach Untersuchung nur einen Teil der tatsächlichen Barrieren. Ob ein Alternativtext etwas Sinnvolles sagt oder eine Bedienung mit der Tastatur wirklich funktioniert, lässt sich nur durch Ausprobieren feststellen.

**Warum stehen eigene Projekte in dieser Liste?**
Weil sie im Alltag benutzt werden und eine Liste ohne sie unvollständig wäre. Der Interessenkonflikt bleibt und steht deshalb offen dabei. Wer ihn für zu groß hält, blendet die drei gekennzeichneten Einträge aus – die übrigen sieben stehen für sich.

**Ist HTML eine Programmiersprache?**
Nein. HTML führt keine Logik aus, trifft keine Entscheidungen und berechnet nichts. Es beschreibt, welche Bedeutung ein Textabschnitt hat. Für Berechnungen und Reaktionen auf Eingaben wird JavaScript verwendet.

**Welche HTML-Version soll ich lernen?**
Die aktuelle – und die hat keine Nummer mehr. Seit dem 28. Mai 2019 pflegen W3C und WHATWG einen gemeinsamen Living Standard, der laufend ergänzt wird. Wer HTML5 lernt, lernt die Grundlage davon; Änderungen betreffen seither vor allem Randbereiche.

**Wie lange dauert es, HTML zu lernen?**
Die Struktur eines Dokuments und die zwei Dutzend häufigsten Elemente sind an einem Wochenende zu verstehen. Was Zeit braucht, ist die Elementwahl: zu erkennen, wann ein Abschnitt ein article ist und wann eine section. Dafür hilft nur, fremdes Markup zu lesen.

**Brauche ich einen Server, um HTML zu testen?**
Nein. Eine lokal gespeicherte HTML-Datei lässt sich im Browser öffnen. Ein Server wird gebraucht, sobald die Seite von außen erreichbar sein oder serverseitige Verarbeitung stattfinden soll.

## Verwandte Seiten

- [HTML Living Standard, WHATWG](https://html.spec.whatwg.org)
- [Referenz, MDN](https://developer.mozilla.org/de/docs/Web/HTML)
- [Prüfdienst des W3C](https://validator.w3.org)
- [eigener Prüfdienst](https://validator.hypertext-markup-language.com)