Was ein Element ist, wann welches gehört und warum semantische Auszeichnung mehr ist als Geschmackssache – erklärt in der kürzestmöglichen Fassung, die noch vollständig ist.
Was neben HTML gebraucht wird: Gestaltung mit CSS, Verhalten mit JavaScript, Betrieb, Sichtbarkeit und rechtliche Pflichten.
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 Verfahre…
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…
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 a…
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 dreis…
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. Gerad…
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 …
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 Browse…
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 …
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…
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 im…
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 vo…
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…
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 z…
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…
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 d…
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 …
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 inzwis…
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 …
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 t…
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 prak…
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 Kundenp…
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 i…
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 auf…
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 all…
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. Si…
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 Darstell…
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…
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 al…
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 A…
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".…
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…
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…
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 Formul…
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 Einsc…
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 – …
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 durchgeh…
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 …
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 …
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 Vorschaubil…
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 Wer…
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…
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…
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 d…
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 …
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, un…
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 da…
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 …
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 Meta…
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 S…
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 nachlie…
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…
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ä…
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 i…
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 genu…
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 zwisc…
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…
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, Verwei…
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 …
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 Auszeichn…
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 …
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 Te…
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. Techn…
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 cloudb…
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: <strong>Ladezeit.</s…
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…
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…
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 Un…
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 Stylesheet…
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 …
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 ausge…
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 di…
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…
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 – …
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…
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…