Estructura del documento

Todo documento HTML profesional comparte el mismo esqueleto. En esta lección aprenderás para qué sirve cada línea de esa plantilla básica, qué pasa si falta alguna y qué etiquetas van en el <head>.

Concepto

Piensa en un documento HTML como una carta formal:

• El sobre (<!DOCTYPE html>) indica qué tipo de documento es.
• La carta completa es el elemento <html>.
• El encabezado administrativo (<head>) lleva datos que el lector no ve directamente: título, idioma, codificación, estilos.
• El cuerpo (<body>) es el contenido que se lee.

Ejemplo: la plantilla base

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Café Aroma | Cafetería en Coyoacán</title>
  <meta name="description" content="Café de especialidad y pan artesanal en Coyoacán.">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
  <h1>Café Aroma</h1>
  <p>Bienvenido a nuestra cafetería.</p>

  <script src="js/app.js" defer></script>
</body>
</html>

Atajo en VS Code

En un archivo .html vacío escribe ! y presiona Tab. Emmet genera la plantilla al instante. Solo recuerda cambiar lang="en" por lang="es".

Paso a paso

1. El doctype

<!DOCTYPE html>

No es una etiqueta HTML: es una instrucción para el navegador que dice "esto es HTML5 moderno". Si la omites, el navegador entra en quirks mode (modo de compatibilidad con páginas de los años 90) y tu CSS puede comportarse de forma extraña. Siempre va en la primera línea.

2. El elemento raíz y el idioma

<html lang="es">

<html> envuelve todo el documento. El atributo lang es más importante de lo que parece:

• Los lectores de pantalla eligen la voz y pronunciación correctas.
• Google entiende en qué idioma está tu contenido.
• El navegador ofrece (o no) traducir la página.
• La separación de palabras con guiones en CSS (hyphens: auto) funciona correctamente.

Puedes ser más específico con la región: es-MX, es-ES, es-AR. Si una parte del texto está en otro idioma, márcala:

<p>Nuestro lema es <span lang="en">"Coffee first"</span>.</p>

3. El head

Todo lo que va en <head> es metainformación: datos sobre la página. Lo más común:

Elemento	Función
<meta charset>	Codificación de caracteres.
<meta name="viewport">	Comportamiento en móviles.
<title>	Título de la pestaña y de Google.
<meta name="description">	Descripción para buscadores.
<link rel="stylesheet">	Enlaza una hoja de estilos CSS.
<link rel="icon">	El favicon (icono de la pestaña).
<script>	Código JavaScript (mejor con defer).
<style>	CSS escrito directamente en la página.

4. meta charset

<meta charset="UTF-8">

Indica la codificación de caracteres. UTF-8 incluye prácticamente todos los caracteres del mundo: acentos, ñ, emojis, chino, árabe… Sin esta línea, podrías ver cosas como "Café" en lugar de "Café". Debe ir lo más arriba posible dentro del head (dentro de los primeros 1024 bytes).

Error común

Declarar UTF-8 pero guardar el archivo en otra codificación (por ejemplo, ANSI o Windows-1252 en editores antiguos). En VS Code, revisa en la barra inferior que diga UTF-8.

5. meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sin esta línea, los celulares muestran la página como si fuera una pantalla de computadora de 980px de ancho y la reducen: todo se ve diminuto. Con ella le dices al navegador:

• width=device-width: usa el ancho real del dispositivo.
• initial-scale=1.0: no apliques zoom inicial.

Es obligatoria para cualquier sitio responsive. Nunca agregues user-scalable=no ni maximum-scale=1: impiden que las personas con baja visión hagan zoom.

6. title

<title>Café Aroma | Cafetería en Coyoacán</title>

Aparece en la pestaña, en los marcadores, en el historial y como título azul en los resultados de Google. Cada página del sitio debe tener un título único y descriptivo (lo verás a fondo en SEO y meta etiquetas).

7. Enlazar CSS y JavaScript

<!-- CSS: siempre en el head, para que la página no "parpadee" sin estilos -->
<link rel="stylesheet" href="css/estilos.css">

<!-- JS: con defer se descarga en paralelo y se ejecuta al terminar de leer el HTML -->
<script src="js/app.js" defer></script>

Con defer puedes poner el script en el head o al final del body; ambos funcionan. Sin defer, el script bloquea la lectura del HTML hasta que se descarga y ejecuta, por eso tradicionalmente se ponía al final del <body>.

8. El body

Todo lo visible va dentro de <body>: textos, imágenes, formularios, menús. Solo puede haber un <body> y un <head> por documento.

Organización de archivos de un proyecto

Un proyecto pequeño típico se organiza así:

cafe-aroma/
├── index.html
├── menu.html
├── contacto.html
├── css/
│   └── estilos.css
├── js/
│   └── app.js
└── img/
    ├── logo.svg
    └── hero.webp

• Nombres en minúsculas, sin espacios ni acentos (sobre-nosotros.html, no Sobre Nosotros.html).
• Los servidores en Linux distinguen mayúsculas: Logo.PNG y logo.png son archivos distintos.

Casos de uso reales

• Página que se ve diminuta en celular: casi siempre falta el meta viewport.
• Acentos rotos al subir al servidor: falta el meta charset o el archivo no está en UTF-8.
• Google muestra un título raro: el <title> es genérico ("Documento", "Inicio") o está repetido en todas las páginas.

Ejercicios

1. Escribe de memoria la plantilla base para una página "Contacto" de un despacho de abogados en México (es-MX).
2. Agrega a la plantilla un CSS en css/estilos.css y un JS en js/main.js que no bloquee la carga.
3. ¿Qué pasa si quitas el meta viewport? Pruébalo con las herramientas de desarrollador en modo móvil (Ctrl+Shift+M en Chrome).

Ver solución

<!DOCTYPE html>
<html lang="es-MX">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contacto | Despacho Martínez Abogados</title>
  <meta name="description" content="Agenda una asesoría legal con Despacho Martínez en Monterrey.">
  <link rel="stylesheet" href="css/estilos.css">
  <script src="js/main.js" defer></script>
</head>
<body>
  <h1>Contacto</h1>
  <p>Escríbenos y te respondemos en menos de 24 horas.</p>
</body>
</html>

Ejercicio 3: sin el viewport, el celular simula un ancho de unos 980px y reduce todo; el texto se ve diminuto y el usuario tiene que hacer zoom.

Resumen

• <!DOCTYPE html> va siempre en la primera línea y activa el modo estándar.
• <html lang="es"> define el idioma: ayuda a accesibilidad, SEO y traducción.
• <head> contiene metainformación; <body>, todo lo visible.
• meta charset="UTF-8" evita caracteres rotos; el meta viewport hace posible el diseño responsive.
• Cada página necesita un <title> único y descriptivo.
• CSS en el head con <link>; JavaScript con defer.