Html
ARIA Live Region Generator
Erstelle barrierefreie ARIA-Live-Regionen für Screenreader-Ankündigungen.
Tools
Kostenlose HTML-Tools
Hilfen für saubere HTML-Tags, Head-Markup, Snippets und Publishing-Abläufe.
Verfügbare Tools
HTML-Tools, die du sofort nutzen kannst
Tool öffnen
Html
CSP Hash Generator
Erstelle CSP-Hash-Werte für Inline-Skripte und -Styles. Hashe exakten Code mit SHA-256, SHA-384 oder SHA-512.
Html
Customizable Select Generator
Generate CSS for customizable select elements using appearance: base-select, picker icons, checkmarks, and open/closed state styling.
Html
Declarative Shadow DOM Generator
Erstelle HTML-Snippets für Declarative Shadow DOM mit Scoped CSS, Slots und Server-Rendering.
Html
HTML Invoker Command Generator
Generate declarative command buttons for dialogs, popovers, and disclosure elements using the Invoker Commands API. No JavaScript needed.
Html
HTML Sanitizer Config Builder
Erstelle Sanitizer-API- und DOMPurify-Allowlist-Konfigurationen für sicheres HTML-Rendering.
Html
SRI Hash Generator
Erstelle Subresource-Integrity-Hashes für Skript- und Stylesheet-Dateien mit SHA-256, SHA-384 oder SHA-512.
Html
HTML-Link-Rel-Generator
Erzeuge Link-Tags für preload, preconnect, dns-prefetch, canonical und alternate URLs.
Html
Responsive-Iframe-Embed-Generator
Generiere responsives Iframe-Embed-Markup für Videos, Karten, Demos und Dokumentation.
Html
URL-Slug-Generator
Wandle Titel in saubere, kleingeschriebene, mit Bindestrichen getrennte URL-Slugs um.
Html
HTML-Überschriften-Prüfer
Prüfe die Überschriftenhierarchie mit einem Baum. Finde übersprungene Ebenen und fehlende h1.
Html
Lesezeit-Schatzer
Berechne die geschatzte Lesezeit aus Wortanzahl und einstellbarer Lesegeschwindigkeit.
Html
HTML-Entity-Kurzreferenz
Durchsuche und kopiere haufige HTML-Entities: Pfeile, Striche, Anfuhrungszeichen und Symbole.
Html
HTML-Popover-Generator
Generiere natives HTML-Popover-Markup mit popovertarget und der Popover-API ohne JavaScript.
Html
Iframe-Sandbox-und-Allow-Generator
Generiere sicheres Iframe-Markup mit Sandbox-Flags und Allow-Berechtigungen nach Embed-Typ.
Html
Inhaltsverzeichnis-Anker-Generator
Füge HTML-Überschriften ein und erhalte ein verschachteltes Inhaltsverzeichnis mit Ankerlinks.
Html
Dialog-Modal-HTML-Generator
Generiere ein natives HTML-Dialog-Modal mit Offnungs- und Schlies-Buttons.
Html
No-JS-Weiterleitungsseiten-Generator
Generiere eine vollstandige HTML-Weiterleitungsseite mit dem Meta-Refresh-Tag ohne JavaScript.
Html
Statischer-404-Seiten-Template-Generator
Generiere eine freundliche 404-Fehlerseite mit Navigationslinks für statische Websites und GitHub Pages.
Html
Barrierefreier-Skip-Link-Generator
Generiere einen barrierefreien Skip-Link mit CSS für Tastatur- und Screenreader-Navigation.
Html
HTML-Landmark-Prüfer
Füge HTML ein und prüfe auf ARIA-Landmark-Elemente für Screenreader-Navigation.
Html
Input-Attribute-Generator
Generiere HTML-Input-Elemente mit typspezifischen Attributen für Formulare.
Html
Fetch-Priority-Attribut-Generator
Generiere fetchpriority-Attribute für Bilder, Skripte und Link-Tags zur Verbesserung der Core Web Vitals.
Html
Preload-Tag-Builder
Generiere korrekte Preload-Link-Tags für Schriftarten, Hero-Bilder, CSS und Skripte.
Html
Modulepreload-Tag-Generator
Generiere modulepreload-Link-Tags für ES-Module in Vite-, Astro- und modernen statischen Sites.
Html
Bild-Ladeattribut-Builder
Erstelle optimierte img-Tags durch Kombination von loading, decoding und fetchpriority.
Html
HTML-Details-Akkordeon-Generator
Generiere FAQ-Akkordeons mit den nativen details- und summary-Elementen ohne JavaScript.
Html
Externer-Link-Attribut-Generator
Generiere externes Link-Markup mit korrekten rel-Attributen für Sicherheit und SEO.
Html
HTML-Script-Ladestrategie-Builder
Generiere Script-Tags mit der richtigen Ladestrategie — normal, defer, async oder type module.
Html
Navigation API Router Snippet Generator
Generieren Sie JavaScript-Routing-Snippets mit der Navigation API fur SPAs ohne History-API.
Html
Service Worker Modul-Template Generator
Generieren Sie ES-Modul-Service-Worker-Templates mit Cache-Strategien, Precache-Liste und Offline-Unterstutzung.
Html
Trusted Types Policy Generator
Generieren Sie Trusted Types-Richtlinien und CSP-Header, um DOM-basierte XSS durch typisierte Werte fur gefahrliche DOM-Senken zu verhindern.
Html
URLPattern Tester
Testen Sie URL-Muster mit der URLPattern-API — benannte Gruppen, Wildcards und Regex-Abgleich ohne manuelles Parsen.
Html
contenteditable=plaintext-only Generator
Generieren Sie barrierefreies HTML-Markup mit contenteditable=plaintext-only fur reine Texteingabe ohne Rich-Text-Formatierung.
Html
Directory Upload Input Generator
Generieren Sie HTML-Datei-Inputs mit webkitdirectory fur Ordner-Upload, Drag-and-Drop-Zone und Dateiliste mit webkitRelativePath.
Html
scrollend Event Snippet Generator
Generieren Sie scrollend-Event-Handler, die nach vollstandigem Scrollen mit Momentum/Inertia auslosen, mit Debounce-Vergleich.
Html
PerformanceObserver Snippet Generator
Generieren Sie PerformanceObserver-Code fur Core Web Vitals (LCP, INP, CLS) mit good/needs-improvement/poor-Schwellenwerten.
Html
Uint8Array Base64/Hex Konverter
Generieren Sie Code-Snippets mit Uint8Array.toBase64(), .toHex(), .fromBase64() und .fromHex() fur native binare Kodierung.
Html
RegExp.escape() Helfer
Generieren Sie RegExp.escape()-Aufrufe zum Escapen von Sonderzeichen in Strings fur sichere dynamische Regex-Muster.
Html
Intl.DurationFormat Generator
Generieren Sie Intl.DurationFormat-Code fur lokalisierte Zeitdauerformatierung mit long/short/narrow/digital Stilen.
Html
Custom Highlights API Generator
Generieren Sie CSS ::highlight() und JavaScript Highlight-Objekte zur Stilisierung von Textbereichen ohne DOM-Anderungen.
Html
WebTransport URL Template Helfer
Generieren Sie WebTransport-Verbindungssnippets uber HTTP/3 (QUIC) mit bidirektionalen Streams und Datagrammen.
Html
Interest Invoker Popover Generator
Generieren Sie deklaratives HTML-Markup mit interestfor fur Hover- und Fokus-ausgeloste Popovers ohne JavaScript.
Html
ARIA Notify Snippet Generator
Generieren Sie ariaNotify()-Aufrufe fur programmatische Screenreader-Ankundigungen mit aria-live-Fallback.
Html
JSON-Formatierer und -Validator
JSON-Daten formatieren, validieren, minifizieren und als Baumansicht anzeigen. Erkennt nachgestellte Kommas und zeigt Fehlerpositionen an. Die gesamte Verarbeitung erfolgt lokal in Ihrem Browser.
Html
JSON-zu-CSV-Konverter
JSON-Arrays in CSV oder TSV konvertieren. Verschachtelte Objekte mit Punktnotation abflachen, Trennzeichen waehlen und Kopfzeilen einfuegen.
Html
YAML-JSON-Konverter
Bidirektional zwischen YAML und JSON konvertieren. Behandelt verschachtelte Strukturen, Arrays und Skalarwerte. Ideal fuer Konfigurationsdateien.
Html
JSONPath-Tester
JSONPath-Ausdruecke gegen JSON-Daten testen. Unterstuetzt Punktnotation, Platzhalter, Filter und Array-Indizes. Zeigt uebereinstimmende Ergebnisse an.
Html
JSON-Schema-Generator und -Validator
JSON-Schema aus Beispieldaten generieren oder JSON gegen ein Schema validieren. Unterstuetzt mehrere Drafts und leitet Typen automatisch ab.
Html
Regex-Tester und Debugger
Testen Sie reguläre Ausdrücke mit Match-Hervorhebung, Erfassungsgruppen und Ersetzungsvorschau. Die gesamte Verarbeitung erfolgt lokal im Browser.
Html
JWT-Decoder und Claims-Inspektor
Dekodieren Sie JWT-Tokens, um Header, Payload-Claims und Zeitstempel zu überprüfen. Die gesamte Dekodierung erfolgt lokal – kein Token wird an einen Server gesendet.
Html
Base64-Encoder und -Decoder
Kodieren Sie Text in Base64 oder dekodieren Sie Base64 zurück in Text. Unterstützt URL-sichere Base64-Variante. Die gesamte Verarbeitung erfolgt lokal.
Html
URL-Encoder und -Decoder
Kodieren oder dekodieren Sie URL-kodierte Zeichenfolgen. Unterstützt sowohl encodeURIComponent (vollständig) als auch encodeURI (URL-sicher) Modi.
Html
Query-String-Parser und -Builder
Analysieren Sie URL-Query-Strings in Schlüssel-Wert-Tabellen oder erstellen Sie Query-Strings aus Parametern. Erkennt Duplikate und sortiert Parameter.
Html
UUID-Generator
Generieren Sie UUID-v4-(Zufalls-) oder v7-(zeitlich geordnete) Identifikatoren mit konfigurierbaren Optionen
Html
Unix-Timestamp-Konverter
Konvertieren Sie zwischen Unix-Zeitstempeln und lesbaren Daten mit Zeitzonenunterstuetzung
Html
Cron-Expression-Builder
Erstellen und verstehen Sie Cron-Planausdruecke mit Voreinstellungen oder benutzerdefinierten Feldern
Html
Text-Diff-Checker
Vergleichen Sie zwei Texte zeilenweise oder nebeneinander mit visueller Hervorhebung
Html
Hash- und HMAC-Generator
Generieren Sie kryptografische Hashes und HMAC-JavaScript-Code mit der Web Crypto API
Html
Markdown Vorschau-Editor
Geteilter Bildschirm-Markdown-Editor mit Live-GitHub-Flavored-Markdown-Vorschau. Unterstuetzt Ueberschriften, fett/kursiv, Links, Codebloecke, Tabellen und Aufgabenlisten.
Html
QR-Code-Generator
Generieren Sie QR-Codes als SVG fuer URLs, Text, E-Mail, Telefon und WLAN. Anpassbare Farben und Groesse mit SVG-Code-Ausgabe.
Html
Bildkompressor und -konverter
Komprimieren und konvertieren Sie Bilder lokal mit der Canvas-API. Groessenanpassung, JPEG/PNG/WebP-Ausgabe und Qualitaetsregelung. Kein Upload.
Wobei diese Sammlung hilft
HTML-Fehler wirken klein, erreichen aber schnell Produktion. Ein falsches Head-Tag oder ein fehlendes Attribut kann Previews, Barrierefreiheit und Wartung beeinflussen.
Geeignet fur
- HTML-Snippets für statische Seiten vorbereiten.
- Tippfehler in wiederkehrendem Markup reduzieren.
- Head-Markup über mehrere Seiten konsistent halten.
Typische Anwendungsfalle
- Strukturiertes Head-Markup erzeugen.
- Snippets für Beiträge und Tools vorbereiten.
- HTML vor dem Einbau in Templates prüfen.
Task guide
Use HTML tools when you need structured head markup, link relationships, or embed code for a page. Start by identifying what you need: preload and prefetch hints for performance-critical resources, link rel tags for SEO and documentation relationships, or responsive iframe embeds for external content. Review the generated output against your page structure before pasting it into your template or CMS. For repeated snippets across many pages, keep a consistent pattern by using the same tool inputs for every post.
Publishing checklist
- Verify generated tags match the HTML5 doctype requirements for your document.
- Check that all attribute values, such as href and src paths, resolve to the correct URLs in your final output.
- Confirm preload and prefetch hints reference actual resources that exist on your server or CDN.
- Test responsive iframe embeds at multiple screen widths, especially the narrowest breakpoint.
- Validate the output against the W3C markup validator before publishing.
FAQ
Fragen zu html-tools
Kann ich die Ausgabe direkt einfügen?
Nutze sie als geprüften Startpunkt und passe sie an dein Template, Framework und Projekt an.
Warum ein Tool statt Handarbeit?
Ein Tool hilft bei Syntax, die wiederholt, fehleranfällig oder über viele Seiten gleich sein muss.