Html
ARIA Live Region Generator
Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.
Tools
Free HTML Tools
Copy-paste helpers for cleaner HTML tags, head markup, snippets, and publishing workflows.
Available tools
HTML Tools you can use now
Open tool
Html
CSP Hash Generator
Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.
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 Snippet Generator
Generate HTML snippets for Declarative Shadow DOM with scoped CSS, slots, open/closed mode, and server-rendering fallback content.
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
Generate Sanitizer API and DOMPurify allowlist configurations. Choose content-type presets or customize allowed tags and attributes for safe HTML rendering.
Html
SRI Hash Generator
Generate Subresource Integrity hashes for script and stylesheet files. Paste code, upload a local file, or reference a CDN URL and get the integrity attribute for your HTML tags.
Html
HTML Link Rel Generator
Generate link tags for preload, preconnect, dns-prefetch, canonical, and alternate URLs.
Html
Responsive Iframe Embed Generator
Generate responsive iframe embed markup for videos, maps, demos, and docs.
Html
HTML Heading Hierarchy Checker
Paste HTML and see the heading structure as a tree. Find skipped levels, missing h1 tags, and hierarchy problems.
Html
Reading Time Estimator
Paste text and get an estimated reading time based on word count and adjustable reading speed.
Html
HTML Entity Quick Reference
Search and copy common HTML entities including arrows, dashes, quotes, math symbols, and special characters.
Html
HTML Popover Generator
Generate native HTML popover markup using popovertarget and the Popover API without JavaScript.
Html
Iframe Sandbox & Allow Attribute Generator
Generate secure iframe markup with sandbox flags and allow permissions by embed type.
Html
Table of Contents Anchor Generator
Paste HTML headings and get a nested table of contents with anchor links for articles and documentation.
Html
Dialog Modal HTML Generator
Generate a native HTML dialog modal with open and close buttons using the dialog element.
Html
No-JS Redirect Page Generator
Generate a complete HTML redirect page using the meta refresh tag without JavaScript.
Html
Static 404 Page Template Generator
Generate a friendly 404 error page with navigation links for static websites and GitHub Pages.
Html
Accessible Skip Link Generator
Generate an accessible skip-to-main-content link with CSS for keyboard and screen reader navigation.
Html
HTML Landmark Checker
Paste HTML and check for ARIA landmark elements that help screen readers navigate the page structure.
Html
Input Attributes Generator
Generate HTML input elements with type-specific attributes for forms on static websites.
Html
Fetch Priority Attribute Generator
Generate fetchpriority attributes for images, scripts, and link tags to improve Core Web Vitals.
Html
Preload Tag Builder
Generate correct preload link tags for fonts, hero images, CSS, and scripts with the right as and crossorigin attributes.
Html
Modulepreload Tag Generator
Generate modulepreload link tags for ES module scripts in Vite, Astro, and modern static sites.
Html
Image Loading Attribute Builder
Build optimized img tags by combining loading, decoding, and fetchpriority for hero images, galleries, and article content.
Html
HTML Details Accordion Generator
Generate FAQ accordions and collapsible disclosure panels using the native details and summary elements without JavaScript.
Html
External Link Attribute Generator
Generate external link markup with the correct rel attributes for security, SEO, sponsored content, and user-generated content.
Html
HTML Script Loading Strategy Builder
Generate script tags with the right loading strategy -- normal, defer, async, or type module -- based on use case.
Html
Navigation API Router Snippet Generator
Generate JavaScript code for client-side routing using the Navigation API. Intercept navigations, match route patterns, and update content without full page reloads.
Html
Service Worker Module Template Generator
Generate an ES module service worker with configurable cache strategies, precache URL list, auto-activation, and offline fallback support.
Html
Trusted Types Policy Generator
Generate a Trusted Types policy with configurable createHTML/createScript/createScriptURL operations and matching Content-Security-Policy headers for Nginx and Apache.
Html
URLPattern Tester
Test URL patterns with named groups, wildcards, and regex constraints. Generate JavaScript URLPattern code and see live match results with extracted parameters for multiple test URLs.
Html
contenteditable plaintext-only Generator
Generate accessible contenteditable=plaintext-only HTML markup with placeholder styling, focus states, and ARIA attributes. Pasting rich text strips formatting automatically -- no JavaScript needed.
Html
Directory Upload Input Generator
Generate HTML input markup with the webkitdirectory attribute for folder selection, drag-and-drop zone, file list display with webkitRelativePath, and support for single-file, multiple-file, and directory modes.
Html
scrollend Event Snippet Generator
Generate JavaScript snippets using the scrollend event that fires when scrolling fully completes including momentum and inertia, with debounce comparison to show why native scrollend is more accurate.
Html
PerformanceObserver Snippet Generator
Generate JavaScript snippets using PerformanceObserver to monitor Core Web Vitals (LCP, INP, CLS, FID, FCP, TTFB) and other performance metrics in real-time with good/needs-improvement/poor threshold classifications.
Html
Uint8Array Base64/Hex Converter
Encode and decode Uint8Array data using native toBase64(), toHex(), fromBase64(), and fromHex() methods. No more manual btoa or charCodeAt loops.
Html
RegExp.escape() Helper
Escape special regex characters in user input using the native RegExp.escape() method. Generate safe dynamic regex patterns with comparison to old manual escaping.
Html
Intl.DurationFormat Generator
Format durations with locale-aware Intl.DurationFormat. Supports long, short, narrow, and digital styles in 6+ locales. No more moment-duration-format.
Html
Custom Highlight API Generator
Generate JavaScript and CSS snippets for the Custom Highlights API to style arbitrary text ranges without modifying the DOM. Uses CSS.highlights registry and ::highlight() pseudo-element for find-in-page, syntax highlighting, and search results.
Html
WebTransport URL Template Helper
Generate a JavaScript WebTransport connection snippet with URL template, bidirectional streams, and datagram support for low-latency client-server communication over HTTP/3 (QUIC).
Html
Interest Invoker Popover Generator
Generate declarative HTML popover markup using the interestfor invoker command for hover and focus-triggered tooltips without JavaScript.
Html
ARIA Notify Snippet Generator
Generate JavaScript snippets using the ARIA Notify API for programmatic screen reader announcements with aria-live fallback.
Html
JSON Formatter & Validator
Format, validate, minify, and tree-view JSON data. Detects trailing commas, shows error position with context. All processing happens in the browser -- no data sent anywhere.
Html
JSON to CSV Converter
Convert JSON arrays to CSV/TSV with configurable delimiter, optional header row, nested field flattening via dot notation, and download-ready output.
Html
YAML JSON Converter
Bidirectional YAML to JSON and JSON to YAML converter. Handles nested objects, arrays, and scalar values. Useful for config files, GitHub Actions, front matter, and Docker Compose.
Html
JSONPath Tester
Test JSONPath expressions against JSON data. Supports dot notation, bracket notation, wildcards, array indices, and filter expressions. Shows matched values with paths.
Html
JSON Schema Generator & Validator
Generate JSON Schema from sample JSON data, or validate JSON against an existing schema. Supports Draft 04/07/2020-12. Infers types, marks required fields, includes examples.
Html
Regex Tester and Debugger
Test regular expressions against text with match highlighting, capture groups, and replacement preview. All processing is local in the browser.
Html
JWT Decoder and Claims Inspector
Decode JWT tokens to inspect header, payload claims, and timestamps. All decoding happens locally 閳?no token is sent to any server.
Html
Base64 Encoder and Decoder
Encode text to Base64 or decode Base64 back to text. Supports URL-safe Base64 variant. All processing is local.
Html
URL Encoder and Decoder
Encode or decode URL-encoded strings. Supports both encodeURIComponent (full) and encodeURI (URL-safe) modes.
Html
Query String Parser and Builder
Parse URL query strings into key-value tables, or build query strings from parameters. Detects duplicates and sorts parameters.
Html
UUID Generator
Generate UUID v4 (random) or v7 (time-ordered) identifiers with configurable options
Html
Unix Timestamp Converter
Convert between Unix timestamps and human-readable dates with timezone support
Html
Cron Expression Builder
Build and understand cron schedule expressions with presets or custom fields
Html
Hash and HMAC Generator
Generate cryptographic hashes and HMAC JavaScript code using Web Crypto API
Html
Markdown Preview Editor
Split-screen Markdown editor with live GitHub-Flavored Markdown preview. Supports headings, bold/italic, links, code blocks, tables, and task lists.
Html
QR Code Generator
Generate QR codes as SVG for URLs, text, email, phone, and WiFi. Customizable colors, size, and includes SVG code output for use in HTML.
Html
Image Compressor and Converter
Compress and convert images locally using Canvas API. Resize by width/height, choose JPEG/PNG/WebP output, and adjust quality. No upload -- all processing is local.
What this collection helps with
HTML mistakes are rarely dramatic, but they can be expensive when they reach production. A broken head tag, inconsistent snippet, or missing attribute can affect previews, accessibility, crawlability, and maintenance. This collection keeps common markup work visible and easy to review.
Best for
- Preparing HTML snippets for static pages and documentation.
- Reducing hand-written tag mistakes before publishing.
- Keeping repeated page markup consistent across a small site.
Common use cases
- Create structured head markup from clear input fields.
- Prepare reusable snippets for posts, pages, and small tools.
- Check generated HTML before it is added to a template.
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
Questions about html tools
Can I paste generated snippets directly into production?
Use generated snippets as a starting point and review them in your template. The final markup depends on your framework, content management system, and document structure. Always validate output before deploying.
Where in the document should preload tags go?
Preload link tags belong in the head element. They tell the browser to fetch resources early during page load. Placing them outside the head, such as in the body, may cause some browsers to ignore them.
How many link rel values should a single page have?
Include only the link relationships that apply to the page. Common values include canonical, stylesheet, and alternate hreflang links. Adding unnecessary relationships like prev and next on pages outside a paginated sequence adds noise without benefit.
Do responsive iframe embeds affect page speed scores?
Iframes can slow page load because they load external content. The responsive iframe embed generator helps prevent layout shift but does not control the external page size or resource count. Consider lazy loading iframes below the fold.
Should I use preload or prefetch for my hero image?
Use preload for resources needed during the current navigation, such as a hero image above the fold. Use prefetch for resources likely needed during a future navigation, such as the next page post. The wrong choice can waste bandwidth on resources the browser does not need yet.