Herramientas

Gratis Herramientas HTML

Ayudas para etiquetas HTML, head markup, snippets y flujos de publicación.

Herramientas disponibles

Herramientas HTML que puedes usar ahora

Html

Generador de regiones ARIA live

Crea regiones ARIA live accesibles para anuncios de lectores de pantalla.

Abrir herramienta

Html

Generador de hash CSP

Genera valores hash CSP para scripts y estilos inline. Hashea el código exacto con SHA-256, SHA-384 o SHA-512.

Abrir herramienta

Html

Customizable Select Generator

Generate CSS for customizable select elements using appearance: base-select, picker icons, checkmarks, and open/closed state styling.

Abrir herramienta

Html

Generador de Shadow DOM declarativo

Crea snippets HTML para Shadow DOM declarativo con CSS aislado, slots y renderizado del servidor.

Abrir herramienta

Html

HTML Invoker Command Generator

Generate declarative command buttons for dialogs, popovers, and disclosure elements using the Invoker Commands API. No JavaScript needed.

Abrir herramienta

Html

Generador de config Sanitizer HTML

Crea configuraciones de lista permitida para Sanitizer API y DOMPurify para renderizado HTML seguro.

Abrir herramienta

Html

Generador de hash SRI

Genera hashes Subresource Integrity para archivos script y stylesheet con SHA-256, SHA-384 o SHA-512.

Abrir herramienta

Html

Generador HTML link rel

Genera etiquetas link para preload, preconnect, dns-prefetch, canonical y alternate.

Abrir herramienta

Html

Generador de iframe responsive

Crea marcado iframe responsive para videos, mapas, demos y documentación.

Abrir herramienta

Html

Generador de slug URL

Convierte títulos en slugs limpios, en minusculas y separados por guiones.

Abrir herramienta

Html

Comprobador de jerarquia HTML

Pega HTML y visualiza el árbol de encabezados. Encuentra niveles saltados y h1 faltantes.

Abrir herramienta

Html

Estimador de tiempo de lectura

Calcula el tiempo de lectura estimadoà partir del recuento de palabras y velocidad ajustable.

Abrir herramienta

Html

Referencia rapida de entidades HTML

Busca y copia entidades HTML comunes: flechas, guiones, comillas y simbolos.

Abrir herramienta

Html

Generador HTML popover

Genera marcado popover HTML nativo usando popovertarget y la API Popover sin JavaScript.

Abrir herramienta

Html

Generador iframe sandbox y allow

Genera marcado iframe seguro con banderas sandbox y permisos allow por tipo de insercion.

Abrir herramienta

Html

Generador de indice con anclas

Pega HTML con encabezados y obten un indice anidado con enlaces de anclaje.

Abrir herramienta

Html

Generador HTML de dialogo modal

Genera un dialogo modal HTML nativo con botones de abrir y cerrar.

Abrir herramienta

Html

Generador de página de redirección sin JS

Genera una página HTML de redirección completa usando meta refresh sin JavaScript.

Abrir herramienta

Html

Generador de plantilla página 404 estática

Genera una página 404 amigable con enlaces de navegación para sitios estáticos.

Abrir herramienta

Html

Generador de enlace de salto accesible

Genera un enlace de salto accesible con CSS para navegación por teclado.

Abrir herramienta

Html

Comprobador de landmarks HTML

Pega HTML y verifica elementos landmark ARIA para navegación con lector de pantalla.

Abrir herramienta

Html

Generador de atributos input

Genera elementos input HTML con atributos específicos por tipo para formularios.

Abrir herramienta

Html

Generador de atributo fetchpriority

Genera atributos fetchpriority para imágenes, scripts y etiquetas link.

Abrir herramienta

Html

Constructor de etiquetas preload

Genera etiquetas link preload correctas para fuentes, imágenes hero, CSS y scripts.

Abrir herramienta

Html

Generador de etiquetas modulepreload

Genera etiquetas link modulepreload para modulos ES en Vite, Astro y sitios estáticos modernos.

Abrir herramienta

Html

Constructor de atributos de carga de imagen

Crea etiquetas img optimizadas combinando loading, decoding y fetchpriority.

Abrir herramienta

Html

Generador de acordeon HTML details

Genera acordeones FAQ con elementos nativos details y summary sin JavaScript.

Abrir herramienta

Html

Generador de atributos de enlace externo

Genera marcado de enlace externo con atributos rel correctos para seguridad y SEO.

Abrir herramienta

Html

Constructor de estrategia de carga de script

Genera etiquetas script con la estrategia correcta — normal, defer, async o type module.

Abrir herramienta

Html

Generador de snippets Navigation API Router

Genere snippets de enrutamiento JavaScript con la API Navigation para SPAs, sin History API.

Abrir herramienta

Html

Generador de plantillas Service Worker modulo ES

Genere plantillas de service workers en modulo ES con estrategias de cache, lista de precache y soporte offline.

Abrir herramienta

Html

Generador de politicas Trusted Types

Genere politicas Trusted Types y cabeceras CSP para prevenir XSS basado en DOM con valores tipados para sumideros DOM peligrosos.

Abrir herramienta

Html

Probador de URLPattern

Pruebe patrones de URL con la API URLPattern — grupos nombrados, comodines y coincidencia regex sin analisis manual.

Abrir herramienta

Html

Generador contenteditable=plaintext-only

Genere HTML accesible con contenteditable=plaintext-only para entrada de texto plano sin formato enriquecido.

Abrir herramienta

Html

Generador de input de carga de directorio

Genere inputs HTML con webkitdirectory para carga de carpetas, zona de arrastrar y soltar y lista de archivos con webkitRelativePath.

Abrir herramienta

Html

Generador de snippet scrollend

Genere manejadores de evento scrollend que se disparan tras el desplazamiento completo con inercia, con comparacion debounce.

Abrir herramienta

Html

Generador de snippet PerformanceObserver

Genere codigo PerformanceObserver para Core Web Vitals (LCP, INP, CLS) con umbrales good/needs-improvement/poor.

Abrir herramienta

Html

Conversor Uint8Array Base64/Hex

Genere snippets con Uint8Array.toBase64(), .toHex(), .fromBase64() y .fromHex() para codificacion binaria nativa.

Abrir herramienta

Html

Ayudante RegExp.escape()

Genere llamadas RegExp.escape() para escapar caracteres especiales en cadenas para patrones regex dinamicos seguros.

Abrir herramienta

Html

Generador Intl.DurationFormat

Genere codigo Intl.DurationFormat para formato de duracion localizado con estilos long/short/narrow/digital.

Abrir herramienta

Html

Generador de API Custom Highlights

Genere pseudoelementos CSS ::highlight() y objetos Highlight JavaScript para estilizar rangos de texto sin modificar el DOM.

Abrir herramienta

Html

Ayudante WebTransport URL Template

Genere snippets de conexion WebTransport via HTTP/3 (QUIC) con streams bidireccionales y datagramas.

Abrir herramienta

Html

Generador de popover interest invoker

Genere HTML declarativo con interestfor para popovers activados por hover y focus sin JavaScript.

Abrir herramienta

Html

Generador de snippet ARIA Notify

Genere llamadas ariaNotify() para anuncios programaticos de lectores de pantalla con fallback aria-live.

Abrir herramienta

Html

Formateador y validador JSON

Formatee, valide, minifique y visualice datos JSON en arbol. Detecta comas finales y muestra posiciones de error. Todo el procesamiento ocurre localmente en su navegador.

Abrir herramienta

Html

Convertidor JSON a CSV

Convierta arrays JSON a CSV o TSV. Aplane objetos anidados con notacion de puntos, elija delimitadores e incluya filas de encabezado.

Abrir herramienta

Html

Convertidor YAML-JSON

Convierta bidireccionalmente entre YAML y JSON. Maneja estructuras anidadas, arrays y valores escalares. Ideal para archivos de configuracion.

Abrir herramienta

Html

Probador JSONPath

Pruebe expresiones JSONPath contra datos JSON. Soporta notacion de puntos, comodines, filtros e indices de array. Muestra resultados coincidentes.

Abrir herramienta

Html

Generador y validador de esquema JSON

Genere un esquema JSON a partir de datos de muestra o valide JSON contra un esquema. Soporta multiples drafts y deduce tipos automaticamente.

Abrir herramienta

Html

Probador y Depurador de Expresiones Regulares

Pruebe expresiones regulares con resaltado de coincidencias, grupos de captura y vista previa de reemplazo. Todo el procesamiento es local en el navegador.

Abrir herramienta

Html

Decodificador JWT e Inspector de Claims

Decodifique tokens JWT para inspeccionar el encabezado, los claims del payload y las marcas de tiempo. Toda la decodificación ocurre localmente – ningún token se envía a ningún servidor.

Abrir herramienta

Html

Codificador y Decodificador Base64

Codifique texto a Base64 o decodifique Base64 a texto. Soporta la variante Base64 segura para URL. Todo el procesamiento es local.

Abrir herramienta

Html

Codificador y Decodificador de URL

Codifique o decodifique cadenas codificadas en URL. Soporta los modos encodeURIComponent (completo) y encodeURI (seguro para URL).

Abrir herramienta

Html

Analizador y Constructor de Cadenas de Consulta

Analice cadenas de consulta de URL en tablas clave-valor, o construya cadenas de consulta a partir de parámetros. Detecta duplicados y ordena parámetros.

Abrir herramienta

Html

Generador de UUID

Genere identificadores UUID v4 (aleatorio) o v7 (ordenados por tiempo) con opciones configurables

Abrir herramienta

Html

Convertidor de Timestamp Unix

Convierta entre timestamps Unix y fechas legibles con soporte de zona horaria

Abrir herramienta

Html

Constructor de Expresion Cron

Construya y comprenda expresiones de programacion cron con preajustes o campos personalizados

Abrir herramienta

Html

Verificador de Diferencias de Texto

Compare dos textos linea por linea o lado a lado con resaltado visual

Abrir herramienta

Html

Generador de Hash y HMAC

Genere hashes criptograficos y codigo JavaScript HMAC usando la Web Crypto API

Abrir herramienta

Html

Editor de Vista Previa Markdown

Editor Markdown de pantalla dividida con vista previa en vivo de GitHub-Flavored Markdown. Compatible con encabezados, negrita/cursiva, enlaces, bloques de codigo, tablas y listas de tareas.

Abrir herramienta

Html

Generador de Codigos QR

Genere codigos QR como SVG para URL, texto, correo electronico, telefono y WiFi. Colores y tamano personalizables.

Abrir herramienta

Html

Compresor y Conversor de Imagenes

Comprima y convierta imagenes localmente usando Canvas API. JPEG/PNG/WebP. Sin carga al servidor.

Abrir herramienta

En qué ayuda esta colección

Los errores HTML parecen pequeños, pero afectan previews, accesibilidad, rastreo y mantenimiento. Estas herramientas mantienen el marcado claro.

Ideal para

Preparar snippets para páginas estáticas.
Reducir errores de sintaxis repetidos.
Mantener coherente el head en varias páginas.

Casos de uso comunes

Generar marcado head estructurado.
Preparar snippets para posts y herramientas.
Revisar HTML antes de usarlo en una plantilla.

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

Preguntas sobre herramientas html

Puedo pegar el resultado directamente?

Usalo cómo punto de partida y ajustalo a tu plantilla y proyecto.

Por qué usar una ayuda?

Sirve cuando la sintaxis es repetitiva, fácil de escribir mal o debe mantenerse igual.