Generador de plantilla HTML
Rellena los datos de tu página, marca las funciones que quieres y obtén un archivo base HTML5 moderno y válido con vista previa en vivo. Descárgalo como index.html o como ZIP con archivos CSS y JavaScript separados.
Última actualización:
Cómo usar Generador de plantilla HTML
- Introduce lo básico: título de la página, descripción, idioma y, si los tienes, la URL del sitio y el autor.
- Marca las funciones que necesitas: etiquetas SEO y sociales, favicons, reset CSS, diseño, modo oscuro, analítica.
- Elige CSS y JavaScript en línea o externos.
- Revisa la vista previa en vivo y el código generado.
- Copia el HTML o descarga index.html (o el ZIP con styles.css y script.js).
Qué va en un head HTML5 moderno
| Etiqueta | Por qué importa |
|---|---|
<!DOCTYPE html> | Pone el navegador en modo estándar en lugar del modo quirks. |
<html lang="en"> | Indica el idioma de la página a lectores de pantalla, traductores y buscadores. |
<meta charset="utf-8"> | Debe estar en los primeros 1024 bytes para que todos los caracteres se muestren correctamente. |
<meta name="viewport"> | Hace que el diseño use el ancho del dispositivo en los teléfonos. |
<title> | Se muestra en las pestañas, los marcadores y como titular en los resultados de búsqueda; apunta a 50-60 caracteres. |
<meta name="description"> | A menudo se usa como fragmento en los resultados de búsqueda; apunta a unos 140-160 caracteres. |
<link rel="canonical"> | Indica la URL preferida cuando la misma página es accesible desde varias direcciones. |
og:* y twitter:* | Controlan el título, el texto y la imagen de las vistas previas de enlaces en redes sociales y apps de mensajería. |
theme-color | Colorea la barra del navegador en móviles y en apps web instaladas. |
¿Necesitas más metaetiquetas? Usa el Generador de metaetiquetas. Para los archivos de favicon, prueba el Generador de favicon, y para una app instalable crea un manifiesto con el Generador de manifiesto de app web.
Acerca de la opción de modo oscuro
La plantilla define sus colores como propiedades personalizadas de CSS y las cambia dentro de @media (prefers-color-scheme: dark), así que la página sigue la configuración del sistema del visitante. color-scheme: light dark hace que los controles de formulario y las barras de desplazamiento coincidan. Con el botón de cambio de tema, la elección del visitante se guarda en localStorage y la aplica un pequeño script en línea en el head antes de que se pinte la página, lo que evita un destello del tema equivocado.
Preguntas frecuentes
¿Qué es una plantilla HTML (boilerplate)?
Un boilerplate es el código inicial mínimo que necesita toda página web: el doctype, el elemento html con un idioma, un head con charset, viewport y título, y un body. Empezar con un buen boilerplate evita que falten etiquetas que afectan al renderizado, al diseño móvil y al SEO.
¿Por qué la metaetiqueta charset debe ir primero?
El navegador necesita conocer la codificación de caracteres antes de leer cualquier texto. El estándar HTML exige que <meta charset="utf-8"> aparezca dentro de los primeros 1024 bytes del documento, así que se coloca al principio del head.
¿Qué hace la metaetiqueta viewport?
width=device-width, initial-scale=1 indica a los navegadores móviles que usen el ancho real de la pantalla en lugar de un diseño de escritorio de 980px alejado. Sin ella, el CSS responsive y las media queries no funcionan como se espera en los teléfonos.
¿Necesito etiquetas Open Graph?
Son opcionales, pero recomendables para cualquier página que pueda compartirse. og:title, og:description, og:image y og:url controlan el título, el texto y la imagen de vista previa que se muestran en Facebook, LinkedIn, Slack, WhatsApp y muchas otras apps.
¿Qué archivos de favicon necesito hoy en día?
Un favicon.ico en la raíz del sitio para navegadores y herramientas antiguos, un icono SVG para navegadores modernos, un apple-touch-icon.png de 180×180 para las pantallas de inicio de iOS y un manifiesto de app web con iconos de 192 y 512px para Android y apps web instalables.
¿Los scripts van en el head o al final del body?
Ponlos en el head con el atributo defer. Los scripts diferidos se descargan en paralelo sin bloquear el renderizado y se ejecutan en orden después de analizar el documento, lo que es tan rápido como colocarlos al final del body.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.