Los resultados se ofrecen solo con fines informativos y pueden contener errores. Verifica la información importante de forma independiente. El uso de esta herramienta es bajo tu propia responsabilidad.
Qué hace esta herramienta
El Generador de Plantilla HTML escribe el esqueleto inicial de una página HTML5: la declaración <!DOCTYPE html>, un elemento <html> con el atributo lang, un <head> con el charset UTF-8 y el título de la página, y un <body> con un encabezado. Cambia el título o el idioma y el código se actualiza al instante.
Hay tres opciones activadas por defecto que puedes desactivar: la meta etiqueta viewport para diseño responsive (necesaria para que las páginas se vean bien en el móvil), un enlace a style.css y una etiqueta script.js con el atributo defer, que descarga el script en paralelo y lo ejecuta cuando la página ya se ha analizado. El título y el idioma se escapan, así que caracteres como & o < no dan problemas.
Cuándo usarla
- Empezar un prototipo, una demo o la reproducción de un bug que necesita un archivo HTML limpio.
- Enseñar la estructura mínima de una página HTML5 válida.
- Crear una landing page estática antes de añadir un framework.
- Comprobar qué etiquetas debe tener el head de una página antes de añadir las etiquetas SEO con el Generador de Meta Etiquetas.
Ejemplo práctico
Entrada
Título: My Page
Idioma: en
Viewport, style.css y script.js activadosSalida
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Page</h1>
<script src="script.js" defer></script>
</body>
</html>Preguntas sobre esta herramienta
¿Por qué importa el atributo lang?
Los lectores de pantalla lo usan para elegir la pronunciación correcta, los navegadores para ofrecer la traducción y los buscadores como señal de idioma. Asígnale el idioma principal del contenido, como en, fr o he.
¿Qué hace la meta etiqueta viewport?
Sin ella, los navegadores móviles muestran la página como si la pantalla midiera unos 980px de ancho y luego la reducen, así que el texto queda diminuto. width=device-width, initial-scale=1.0 les indica que usen el ancho real de la pantalla.
¿Por qué el script se incluye con defer?
defer permite que el navegador siga analizando el HTML mientras descarga el script, y lo ejecuta cuando el documento está listo. Así la página no se bloquea y tu script puede buscar elementos sin riesgo.
¿Qué debería añadir después?
Una meta descripción y las etiquetas de vista previa para redes sociales. El Generador de Meta Etiquetas y el Generador de Etiquetas Open Graph las generan, y el Generador de Robots.txt te ayuda cuando el sitio se publica.
¿Esta herramienta es gratuita?
Sí, es gratis. Sin registro ni correo electrónico. Obtén el resultado en esta página.
¿Cómo obtengo el resultado?
Usa la herramienta en esta página. El resultado aparece aquí, sin envío por correo electrónico.