Plantilla HTML básica: un inicio moderno, explicado línea a línea

Generador de plantilla HTML básica

Plantilla HTML básica: plantilla comentada y generador | We.Inc

Una plantilla HTML5 moderna explicada línea a línea, además de un generador de título, descripción, idioma, Open Graph, favicons, color de tema y enlaces CSS o JS. Copia o descarga index.html.

Una plantilla HTML5 mínima necesita un doctype, un elemento html con atributo lang, un head con el charset UTF-8, la etiqueta meta viewport, un título y una descripción, y después un body. Enlaza el CSS con una etiqueta link en el head y el JavaScript con una etiqueta script con defer. Genera la tuya abajo y descarga index.html.

Las líneas que necesita toda página

Línea
Por qué

<!doctype html>
Activa el modo estándar

<html lang="en">
Idioma para lectores de pantalla y traducción

<meta charset="utf-8">
Caracteres y símbolos correctos

<meta name="viewport" ...>
Escalado correcto en móviles

<title>
Texto de la pestaña y titular del resultado de búsqueda

El generador escribe un index.html completo y válido a partir de unos pocos interruptores: título y descripción de la página, idioma, etiquetas Open Graph para las vistas previas de enlaces, un conjunto de favicons, color de tema, sugerencias de preconnect y los enlaces a tu hoja de estilos y tu script con el atributo de carga que elijas. Cada línea que puede generar se explica en la plantilla comentada más abajo.

Rellena el título, la descripción y el idioma, y activa los extras que quieras.
Elige cómo se carga tu script: defer, module o async. La vista previa del archivo se actualiza sobre la marcha.
Copia el marcado o descárgalo como index.html, listo para abrir en un navegador o editor.
Lee la versión comentada de abajo para entender cada línea antes de publicarla.

Mantén la meta charset dentro de los primeros 1024 bytes del archivo. Ponerla la primera en el head es la forma más sencilla de asegurarlo.
Escribe un título y una descripción únicos para cada página. Los buscadores suelen mostrarlos como titular y fragmento del resultado.
Evita maximum-scale=1 o user-scalable=no en la etiqueta viewport. Bloquear el zoom perjudica a quienes necesitan un texto más grande.
Carga los scripts con defer en el head en lugar de al final del body. El archivo se descarga pronto y aun así se ejecuta después del análisis.
Usa URL absolutas para og:image. Las redes sociales la obtienen desde sus propios servidores y no pueden resolver una ruta relativa.

Preguntas frecuentes

¿Cómo enlazo un archivo CSS a HTML?

Añade <link rel="stylesheet" href="styles.css"> dentro del head. El href es relativo al archivo HTML, así que css/styles.css apunta a una carpeta css junto a él. Las hojas de estilo en el head bloquean el renderizado brevemente, y es intencionado: evita un destello de contenido sin estilos.

¿Dónde debe ir la etiqueta script?

En el head con defer, por ejemplo <script src="app.js" defer></script>. El navegador la descarga en paralelo mientras analiza el documento y la ejecuta en orden cuando termina el análisis. Los scripts type="module" se difieren automáticamente. Usa async solo para scripts independientes, como los de analítica.

¿Necesito la etiqueta meta X-UA-Compatible?

No. Solo afectaba a versiones antiguas de Internet Explorer, que Microsoft ya no mantiene. Las plantillas actuales la omiten.

¿Qué archivos de favicon necesito de verdad?

Un favicon.ico en la raíz del sitio para herramientas y rastreadores antiguos, un icono SVG para navegadores modernos y un PNG apple-touch-icon de 180 por 180 píxeles para las pantallas de inicio de iOS cubren casi todos los casos. Un manifiesto de web app añade iconos más grandes si quieres que se pueda instalar.

¿Qué diferencia hay entre defer y async?

Ambos descargan sin bloquear el análisis. defer espera a que termine el análisis y mantiene los scripts en el orden del documento. async ejecuta cada script en cuanto llega, en cualquier orden, lo que puede romper scripts que dependen entre sí o del DOM.

Qué va en el head

El head contiene información sobre la página en lugar de contenido: juego de caracteres, viewport, título, descripción, enlaces a hojas de estilo, iconos y etiquetas para vistas previas en redes sociales. Nada de lo que hay en él se muestra en el cuerpo de la página.
El orden importa un poco. Primero el charset, luego el viewport y después el título y la descripción. Coloca las sugerencias de preconnect antes de las hojas de estilo que las necesitan para que la conexión empiece lo antes posible.

Open Graph y vistas previas de enlaces

Cuando alguien comparte tu URL en una app de mensajería o una red social, la tarjeta de vista previa sale de og:title, og:description, og:image y og:url. Sin ellas, las plataformas adivinan, a menudo mal.
Una imagen de 1200 por 630 píxeles funciona en las principales redes. twitter:card con el valor summary_large_image pide a X la versión grande de la tarjeta.

La plantilla, línea a línea

Un index.html moderno y completo

Todo lo que suele necesitar una página en producción, nada que no necesite. La tabla de abajo explica cada línea.

Qué hace cada línea

Línea
Qué hace
¿Obligatoria?

<!doctype html>
Indica al navegador que use el modo estándar en lugar del modo quirks
Sí

<html lang="en">
Declara el idioma de la página para tecnologías de asistencia, separación silábica y traducción
Sí

<meta charset="utf-8">
Codificación de caracteres para que acentos, símbolos y emojis se vean bien
Sí

<meta name="viewport" content="width=device-width, initial-scale=1">
Evita que los móviles muestren una página de escritorio alejada
Sí

<title>
Pestaña del navegador, marcadores y normalmente el titular del resultado de búsqueda
Sí

<meta name="description">
Suele usarse como fragmento en los resultados de búsqueda
Muy recomendable

<link rel="canonical">
La URL preferida cuando la página es accesible desde varias
Recomendable

<meta name="theme-color">
Tiñe la barra del navegador en algunos navegadores móviles
Opcional

<link rel="icon"> y apple-touch-icon
Icono de la pestaña e icono de la pantalla de inicio
Recomendable

Etiquetas meta og: y twitter:
Título, texto e imagen para las vistas previas de enlaces compartidos
Recomendable

<link rel="preconnect">
Abre una conexión con otro origen antes de que haga falta
Opcional

<link rel="stylesheet">
Carga tu CSS
Si tienes CSS

<script defer>
Carga JavaScript sin bloquear el análisis y lo ejecuta después
Si tienes JS

<main>
Marca el contenido principal para las tecnologías de asistencia
Recomendable

Enlazar CSS a HTML

Tres formas de añadir CSS

Un archivo externo es lo habitual porque el navegador lo guarda en caché entre páginas. Un bloque style sirve para reglas propias de una página; el atributo style, para valores puntuales.

Las rutas relativas explicadas

La mayoría de las hojas de estilo que no cargan tienen una ruta incorrecta. Busca un 404 en el panel de red de las herramientas para desarrolladores.

Enlazar JavaScript correctamente

Opciones de carga de scripts

Marcado
¿Bloquea el análisis?
Se ejecuta
¿Mantiene el orden?

<script src="a.js">
Sí
En cuanto se llega a él
Sí

<script src="a.js" defer>
No
Tras el análisis, antes de DOMContentLoaded
Sí

<script src="a.js" async>
No (se detiene un momento para ejecutarse)
En cuanto se descarga
No

<script type="module" src="a.js">
No
Como defer
Sí

Etiquetas script recomendadas

Los módulos tienen modo estricto, su propio ámbito y soporte de import. nomodule te permite servir una alternativa a navegadores muy antiguos si todavía lo necesitas.

Generador de plantilla HTML

Título de la página

Código de idioma

en, fr, es-MX

Descripción

URL de la página (canonical y og:url)

Ruta de la hoja de estilos (vacío si no hay)

Ruta del script (vacío si no hay)

Carga del script

Etiquetas Open Graph y Twitter

Conjunto de favicons

Preconnect a Google Fonts

og:image (URL absoluta)

Color de tema

Copiar HTML

Descargar index.html

Empieza gratis · Sin tarjeta de crédito