← Volver al listado de tecnologías ← Índice de Super Club Net: HTML, CSS y JS

Primeros pasos con HTML: la web, el editor y la estructura mínima de un documento

16 de agosto de 2026 Por: Artiko

htmlcssjavascriptdomfrontenddoctypeestructura-htmlnavegadoreditor-de-textometadatos

Primeros pasos con HTML: la web, el editor y la estructura mínima de un documento

Este es el primer capítulo del curso, así que arrancamos desde el punto cero absoluto: no se asume que sepas programar, ni que hayas abierto un editor de texto antes, ni que tengas claro qué diferencia hay entre “Internet” y “la web”. Al terminar este capítulo vas a tener un archivo .html propio, escrito a mano, abierto en tu navegador, y vas a entender exactamente qué hace cada línea de ese archivo y por qué está ahí. Ese archivo va a ser la base sobre la que se apoyan los quince capítulos siguientes: en el capítulo 2 le agregaremos color y tipografía con CSS, y más adelante, comportamiento con JavaScript.

El índice completo del curso vive en /tecnologias/superclubnet/00-indice/, por si quieres ver hacia dónde va todo esto.

Internet no es la web

Se usan como sinónimos en la conversación diaria, pero son dos cosas distintas y la diferencia importa para entender qué estás haciendo cuando escribes HTML.

Internet es la infraestructura: millones de computadores conectados entre sí por cables, fibra óptica, antenas y satélites, todos hablando un conjunto común de protocolos (principalmente TCP/IP). Internet transporta correo electrónico, videollamadas, actualizaciones de tu sistema operativo, partidas de videojuegos en línea y muchísimas otras cosas. Es la carretera.

La web (World Wide Web, o WWW) es una de las cosas que viajan por esa carretera. Es un sistema de documentos enlazados entre sí, identificados por direcciones llamadas URL, que se piden y se entregan usando un protocolo llamado HTTP. Cuando escribes https://ninjas.cl en la barra de direcciones y aparece una página, eso es la web. Cuando tu cliente de correo descarga mensajes usando IMAP, eso es Internet pero no es la web.

La web fue propuesta por Tim Berners-Lee en 1989 mientras trabajaba en el CERN, y descansa sobre tres invenciones que siguen siendo la base de todo lo que vas a aprender aquí:

Invención	Qué es	Ejemplo concreto
URL	Un esquema de direcciones para nombrar cualquier recurso de la web	`https://ninjas.cl/books/superclubnet/`
HTTP	El protocolo de petición y respuesta entre navegador y servidor	El navegador dice “dame `/index.html`”, el servidor responde con el contenido
HTML	El lenguaje en que se escriben los documentos que se enlazan entre sí	El archivo que vas a escribir en diez minutos más

El tercero es el que nos ocupa en este capítulo. Los otros dos aparecerán constantemente como contexto.

Qué significa “hipertexto”

HTML son las siglas de HyperText Markup Language, en español “lenguaje de marcado de hipertexto”. Vale la pena desarmar el nombre porque explica casi todo:

Hipertexto: texto que contiene enlaces a otro texto. Un libro de papel se lee de forma lineal, página 1, página 2, página 3. Un documento de hipertexto te permite saltar desde cualquier palabra hacia otro documento. Esa idea —que hoy nos parece obvia— es la que convirtió una colección de archivos en una “telaraña” (web).
Markup / marcado: no escribes instrucciones, escribes marcas alrededor del texto para decir qué papel cumple cada parte. “Esto es un título”, “esto es un párrafo”, “esto es una lista”. Es lo mismo que hace un corrector de estilo cuando raya un manuscrito con anotaciones.
Language / lenguaje: hay reglas fijas sobre cómo se escriben esas marcas, y el navegador sabe leerlas.

Y hay una consecuencia importantísima de esto: HTML no es un lenguaje de programación. No tiene variables, ni condicionales, ni bucles, ni funciones. No “hace” nada; describe. Un documento HTML es una declaración estática de qué contenido hay y cómo está organizado. La parte que hace cosas es JavaScript, y llega en el capítulo 9. Esta distinción evita mucha frustración temprana: si te preguntas “¿cómo hago que HTML sume dos números?”, la respuesta es que no lo hace, porque no es su trabajo.

Cómo llega una página a tu pantalla

Antes de escribir la primera línea conviene tener el modelo mental de qué ocurre cuando pides una página. El proceso completo, simplificado pero fiel, es este:

sequenceDiagram
    participant U as Persona
    participant N as Navegador
    participant D as Servidor DNS
    participant S as Servidor web
    U->>N: Escribe ninjas.cl en la barra
    N->>D: ¿Qué dirección IP tiene ninjas.cl?
    D-->>N: 203.0.113.45
    N->>S: GET / HTTP/1.1 (petición HTTP)
    S-->>N: 200 OK + texto del documento HTML
    N->>N: Parsea el HTML y construye el DOM
    N->>S: GET /estilos.css, GET /logo.png
    S-->>N: 200 OK + cada recurso
    N->>N: Aplica CSS, ejecuta JavaScript
    N-->>U: Dibuja la página en pantalla

Los puntos que importan para este curso:

Lo que el servidor entrega es texto plano. No es una imagen de la página ni un formato binario secreto. Es exactamente el mismo texto que tú vas a escribir en tu editor. Puedes comprobarlo en cualquier sitio: Ctrl+U (o Cmd+Opt+U en macOS) abre el código fuente de la página que estás viendo.
El navegador es quien interpreta ese texto. Lee las marcas, construye una estructura interna llamada DOM (que veremos en profundidad más adelante) y a partir de ella pinta píxeles.
El HTML llega primero; el resto viene después. Mientras el navegador parsea el documento va descubriendo referencias a hojas de estilo, imágenes y scripts, y las pide en peticiones adicionales. Un mismo “ver una página” son en realidad decenas de peticiones HTTP.
Nada de esto requiere un servidor para aprender. Un archivo .html en tu disco duro se abre igual de bien con doble clic. El navegador usará el esquema file:// en vez de https://, y todo funciona salvo un par de casos puntuales que iremos marcando cuando aparezcan.

Qué navegador usar

Cualquiera de los actuales sirve para seguir el curso. Todos implementan el mismo estándar y las diferencias que quedan son marginales para lo que vamos a hacer.

Navegador	Motor de renderizado	Notas
Firefox	Gecko	Motor independiente; sus herramientas de desarrollo para CSS Grid y accesibilidad son excelentes
Chrome	Blink	El más usado; sus DevTools son el estándar de facto en el mercado
Edge	Blink	Mismo motor que Chrome, distinta interfaz
Safari	WebKit	Único motor disponible en iOS; conviene probar en él si tu público usa iPhone
Brave, Opera, Vivaldi	Blink	Variantes de Chrome con distinta política de privacidad e interfaz

Una recomendación práctica: ten dos navegadores instalados con motores distintos, por ejemplo Firefox y alguno basado en Blink. Cuando algo se vea raro, abrirlo en el otro te dice en treinta segundos si el problema es tu código o una particularidad del navegador.

El editor de texto

Para escribir HTML necesitas una sola cosa: un programa capaz de guardar texto plano. Texto plano significa caracteres sin formato: sin negritas, sin tamaños de letra, sin márgenes. Solo letras, números y símbolos.

Esto descarta de inmediato los procesadores de texto. Microsoft Word, Google Docs, LibreOffice Writer y Apple Pages guardan documentos con formato: el archivo contiene información de fuentes, colores, interlineado y estructura interna del programa. Si escribes HTML en Word y guardas, el archivo resultante no es HTML válido y el navegador no sabrá qué hacer con él.

Lo que sí sirve:

Herramienta	Tipo	Ventaja	Consideración
Bloc de notas (Windows)	Editor básico	Ya está instalado	Sin coloreado de sintaxis ni ayudas
TextEdit (macOS)	Editor básico	Ya está instalado	Hay que forzar modo texto plano en las preferencias
Visual Studio Code	Editor de código	Coloreado, autocompletado, extensiones, gratuito	Descarga de unos cientos de megabytes
Sublime Text	Editor de código	Muy rápido incluso con archivos enormes	Licencia de pago con periodo de prueba indefinido
Emacs / Neovim	Editor de código	Enorme control y velocidad una vez aprendido	Curva de aprendizaje empinada
JSBin, CodePen, JSFiddle	Editor en el navegador	Cero instalación, resultado en vivo al lado	Requiere conexión; no reemplaza trabajar con archivos reales

Para este curso la recomendación es Visual Studio Code, porque tres de sus funciones ahorran muchísimo tiempo cuando estás empezando:

Coloreado de sintaxis: las etiquetas se ven de un color, el texto de otro, los atributos de otro. Cuando una etiqueta te quedó mal escrita, el color no cambia donde debería y lo ves de inmediato.
Cierre automático de etiquetas: al escribir  te agrega . Esto elimina de raíz uno de los errores más frecuentes del principiante.
Emmet: escribir ! y pulsar Tab genera el esqueleto completo de un documento HTML. Muy cómodo, pero no lo uses todavía. Primero escribe el esqueleto a mano unas veinte veces hasta que salga de memoria; recién ahí el atajo es una ayuda y no una muleta.

Si estás en un computador prestado o no puedes instalar nada, JSBin o CodePen te dejan seguir el curso completo desde el navegador.

Cómo nombrar y guardar tus archivos

El navegador identifica un archivo HTML por su extensión: los últimos caracteres del nombre después del punto. Debe ser .html.

Históricamente también se usó .htm, con tres letras, porque el sistema de archivos FAT de MS-DOS y las primeras versiones de Windows no admitían extensiones más largas. Esa limitación desapareció hace décadas. Hoy usa siempre .html y no lo pienses más.

Reglas para nombrar archivos que te van a ahorrar problemas reales más adelante:

Regla	Mal	Bien	Por qué
Sin espacios	`mi pagina.html`	`mi-pagina.html`	El espacio en una URL se convierte en `%20`, lo que la vuelve ilegible
Sin tildes ni ñ	`informacion.html` con tilde, `año.html`	`informacion.html`, `anio.html`	Distintos servidores y sistemas codifican estos caracteres de forma diferente
Todo en minúsculas	`MiPagina.html`	`mi-pagina.html`	Linux distingue mayúsculas de minúsculas; Windows no. Un enlace que funciona en tu PC puede romperse en el servidor
Guiones, no guiones bajos	`mi_pagina.html`	`mi-pagina.html`	Convención ampliamente adoptada en la web; también es la que prefieren los buscadores
Sin caracteres especiales	`precio$.html`, `¿que?.html`	`precios.html`, `preguntas.html`	`?`, `#`, `&` y `$` tienen significado propio dentro de una URL

Un detalle específico de Windows: el Explorador de archivos oculta las extensiones conocidas por defecto. Si guardas desde el Bloc de notas y no tienes cuidado, terminas con pagina.html.txt y el navegador lo mostrará como texto crudo en vez de renderizarlo. La solución es activar “Extensiones de nombre de archivo” en la pestaña Vista del Explorador, o al guardar, elegir “Todos los archivos” en el desplegable de tipo y escribir el nombre completo con la extensión.

En macOS, TextEdit abre por defecto en modo texto enriquecido. Ve a Formato → Convertir en texto sin formato (Cmd+Shift+T) antes de guardar, o mejor, cambia la preferencia global en TextEdit → Ajustes → Formato → Texto sin formato.

Etiquetas: la unidad básica de HTML

Todo HTML se construye con etiquetas (en inglés tags). Una etiqueta es un nombre encerrado entre los signos menor-que y mayor-que: , <html>, <title>.

Las etiquetas normalmente vienen en pares. La primera abre, la segunda cierra, y la de cierre lleva una barra inclinada antes del nombre:

<p>Este texto está dentro de un párrafo.</p>

El conjunto de etiqueta de apertura + contenido + etiqueta de cierre se llama elemento. Es útil tener claro el vocabulario porque la documentación lo usa con precisión:

flowchart LR
    subgraph ELEM["Elemento HTML completo"]
        direction LR
        A["&lt;p&gt;<br/>etiqueta de apertura"] --> B["Hola mundo<br/>contenido"]
        B --> C["&lt;/p&gt;<br/>etiqueta de cierre"]
    end
    A -.-> D["'p' es el<br/>nombre de la etiqueta"]
    C -.-> E["la barra / indica<br/>que se está cerrando"]

Si vienes de algún lenguaje con llaves como C, Java o JavaScript, la analogía es directa:  es como { y  es como }. Delimitan un bloque.

Elementos vacíos

Algunas etiquetas no envuelven contenido porque no tienen nada que envolver. Un salto de línea, una imagen o una línea horizontal no contienen texto: son la cosa. Estas etiquetas no llevan cierre y se llaman elementos vacíos (void elements):

<br>
<hr>
<img src="foto.jpg" alt="Una foto">
<meta charset="utf-8">
<input type="text">

Vas a ver también la forma   con barra al final. Eso viene de XHTML, una variante de HTML de los años 2000 con reglas más estrictas de sintaxis XML. En HTML moderno esa barra es opcional y no cambia absolutamente nada: el navegador la ignora. Usa la forma que prefieras, pero sé consistente dentro de un mismo proyecto.

La lista completa de elementos vacíos en HTML es corta y vale la pena reconocerla:

Elemento	Para qué sirve	Capítulo donde se usa
`<br>`	Salto de línea forzado dentro de un texto	3
`<hr>`	Separador temático horizontal	3
`<img>`	Insertar una imagen	5
`<meta>`	Declarar metadatos del documento	Este capítulo
`<link>`	Enlazar un recurso externo, típicamente CSS	2
`<input>`	Campo de un formulario	8
`<source>`	Fuente alternativa para audio, video o imagen	7
`<area>`	Región clicable de un mapa de imagen	—
`<col>`	Columna de una tabla	4
`<embed>`, `<param>`, `<track>`, `<wbr>`	Casos especializados	—

Todas las demás etiquetas que veas en este curso van en pares.

Atributos

Una etiqueta de apertura puede llevar atributos: pares de nombre y valor que configuran el elemento.

<img src="perro.jpg" alt="Un perro corriendo en la playa" width="600">

Aquí src, alt y width son atributos. Las reglas de escritura:

Van solo en la etiqueta de apertura, nunca en la de cierre.
Se separan entre sí por espacios.
El formato es nombre="valor".
Las comillas pueden ser dobles o simples. Dobles es la convención dominante; usa simples cuando el valor contenga comillas dobles.
El orden entre atributos no importa: <img alt="x" src="y"> es idéntico a <img src="y" alt="x">.
Un mismo atributo no puede repetirse en el mismo elemento.

Existen también los atributos booleanos, que se escriben sin valor y su sola presencia significa “verdadero”:

<input type="checkbox" checked>
<button disabled>No puedes hacer clic</button>

Escribir checked="true" o checked="false" no es lo que crees: cualquier valor, incluso "false", activa el atributo. Para desactivarlo hay que quitarlo del todo.

Anidamiento

Los elementos pueden contener otros elementos. A eso se le llama anidar, y la regla es una sola: el último que se abre es el primero que se cierra.

<!-- Correcto: b se abre dentro de p y se cierra dentro de p -->
<p>Esto es <b>importante</b> de verdad.</p>

<!-- Incorrecto: las etiquetas se cruzan -->
<p>Esto es <b>importante</p></b>

El segundo caso no produce un error visible: el navegador lo “arregla” con reglas de recuperación definidas en el propio estándar. El problema es que cada navegador podría recuperarse de forma ligeramente distinta y tu página deja de ser predecible. Anida bien siempre.

Una forma útil de visualizar el anidamiento es como un árbol. Este HTML:

<html>
    <head>
        <title>Mi página</title>
    </head>
    <body>
        <h1>Bienvenido</h1>
        <p>Hola <b>mundo</b>.</p>
    </body>
</html>

produce esta estructura interna en el navegador:

flowchart TD
    HTML["html"] --> HEAD["head"]
    HTML --> BODY["body"]
    HEAD --> TITLE["title"]
    TITLE --> T1(["texto: 'Mi página'"])
    BODY --> H1["h1"]
    BODY --> P["p"]
    H1 --> T2(["texto: 'Bienvenido'"])
    P --> T3(["texto: 'Hola '"])
    P --> B["b"]
    P --> T4(["texto: '.'"])
    B --> T5(["texto: 'mundo'"])

Ese árbol tiene nombre: se llama DOM (Document Object Model). Es la representación en memoria del documento, y es lo que JavaScript manipula cuando quiere cambiar la página. Por ahora quédate con la idea de que tu HTML se convierte en un árbol; la indentación con la que escribes es exactamente el dibujo de ese árbol, y por eso vale la pena indentar bien.

Mayúsculas y espacios en blanco

Dos particularidades de HTML que sorprenden al principio:

Los nombres de etiqueta no distinguen mayúsculas. Para el navegador, <HTML>, <html> y <HtMl> son la misma etiqueta. En los años 90 la convención era escribir todo en MAYÚSCULAS. Alrededor del año 2000, con XHTML, se estandarizó la minúscula y así quedó hasta hoy. Escribe siempre en minúsculas: es la convención universal y ningún proyecto profesional hace otra cosa.

Los espacios en blanco consecutivos se colapsan. En HTML, cualquier cantidad de espacios, tabulaciones y saltos de línea seguidos se muestran como un solo espacio:

<p>Hola          mundo</p>
<p>Hola
mundo</p>

Ambos párrafos se ven idénticos en pantalla: Hola mundo. Esto es una decisión de diseño, no un error: permite que indentes tu código como quieras sin que la indentación se cuele en el resultado visual.

La consecuencia práctica: no uses espacios en blanco para maquetar. Si necesitas separación entre elementos, eso es trabajo de CSS y lo veremos en el capítulo 2. Si necesitas un salto de línea real dentro de un texto (una dirección postal, un verso), usa  .

Comentarios

Un comentario es texto que escribes para ti (o para quien lea tu código) y que el navegador ignora al renderizar. Se escribe entre :

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Página con comentarios</title>
    </head>
    <body>
        <!-- Cabecera del sitio -->
        <h1>Mi sitio</h1>

        <!-- Contenido principal.
             Un comentario puede ocupar
             varias líneas sin problema. -->
        <p>Bienvenido.</p>
    </body>
</html>

Para qué sirven de verdad:

Marcar secciones en documentos largos, para orientarte al leerlos meses después.
Desactivar temporalmente un bloque mientras pruebas algo, sin borrarlo.
Dejar notas sobre por qué algo está hecho de una manera y no de otra.

Y una advertencia importante que muchos tutoriales omiten: los comentarios no se muestran, pero sí se envían. Están en el archivo que el servidor entrega, viajan por la red, ocupan bytes y cualquier persona los ve con Ctrl+U. Nunca escribas ahí contraseñas, claves de API, direcciones de correo privadas, notas sobre bugs de seguridad ni comentarios sobre un cliente. Todo lo que pongas en un comentario HTML es público.

Dos limitaciones sintácticas: los comentarios no se pueden anidar (un --> cierra el comentario más externo y el resto queda visible), y el texto del comentario no debe contener la secuencia --.

La estructura mínima de un documento

Ya tenemos el vocabulario. Vamos a construir el documento pieza por pieza, entendiendo cada línea antes de agregar la siguiente.

Paso 1: el doctype

La primera línea de todo documento HTML es siempre esta:

<!DOCTYPE html>

No es una etiqueta HTML, aunque lo parezca. Es una declaración de tipo de documento: le dice al navegador en qué modo debe interpretar todo lo que viene después.

La historia detrás es útil para entender por qué existe. En los años 90 cada navegador implementaba HTML a su manera y millones de páginas se escribieron aprovechando esas rarezas. Cuando los navegadores decidieron cumplir el estándar, se encontraron con que hacerlo rompía la web existente. La solución fue tener dos modos de renderizado:

Modo	Cuándo se activa	Comportamiento
Modo estándar (standards mode)	Hay un doctype válido al inicio	Se aplican las reglas del estándar actual
Modo peculiar (quirks mode)	No hay doctype, o hay uno antiguo/inválido	Se emulan los errores de Internet Explorer 5 para no romper páginas viejas

En modo peculiar cambian cosas concretas y molestas: el cálculo de anchos y altos de las cajas usa un modelo distinto, el manejo de márgenes cambia, ciertas unidades se comportan de otra forma. Nada de eso es lo que quieres.

Por eso: <!DOCTYPE html> es obligatorio en la práctica, aunque técnicamente el navegador renderice algo sin él.

Si alguna vez abres código antiguo, verás doctypes largos e incomprensibles como:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Eso es HTML 4 o XHTML, y aquellas cadenas apuntaban a un archivo DTD que definía formalmente la gramática del lenguaje. HTML5 eliminó todo eso. El doctype moderno tiene exactamente una función —activar el modo estándar— y por eso pudo reducirse a quince caracteres. No lleva versión, no lleva URL, no cambia nunca.

Detalle de estilo: DOCTYPE no distingue mayúsculas (<!doctype html> es igual de válido). La convención mayoritaria es escribirlo en mayúsculas para que destaque visualmente como algo distinto a las etiquetas.

Paso 2: el elemento raíz

Después del doctype viene el elemento que contiene absolutamente todo lo demás:

<!DOCTYPE html>
<html lang="es">
    <!-- Aquí va todo el documento -->
</html>

<html> es el elemento raíz. En el árbol DOM que dibujamos antes, es el nodo del que cuelga todo. Solo puede haber uno por documento.

El atributo lang declara el idioma principal del contenido, usando los códigos del estándar BCP 47. Esto no es decorativo, tiene efectos medibles:

Lectores de pantalla: eligen la voz y la pronunciación correctas. Sin lang, un lector de pantalla puede leer texto en español con fonética inglesa, resultando incomprensible.
Corrección ortográfica: el navegador usa el diccionario correcto en los campos de texto.
Traducción automática: los traductores detectan el idioma de origen sin adivinar.
Tipografía: ciertas reglas de partición de palabras y comillas dependen del idioma.

Valores frecuentes:

Valor	Idioma
`es`	Español, sin especificar región
`es-CL`	Español de Chile
`es-MX`	Español de México
`en`	Inglés
`en-US`	Inglés de Estados Unidos
`pt-BR`	Portugués de Brasil

Para este curso, lang="es" está perfecto. Si tu contenido tiene modismos muy regionales, la variante con país aporta precisión.

Paso 3: cabeza y cuerpo

Dentro de <html> van exactamente dos elementos hijos, siempre en este orden:

<!DOCTYPE html>
<html lang="es">
    <head>
        <!-- Información SOBRE el documento -->
    </head>
    <body>
        <!-- Lo que se VE en la página -->
    </body>
</html>

La distinción es la más importante de todo el capítulo y conviene tenerla clarísima:

flowchart TD
    DOC["Documento HTML"] --> DT["&lt;!DOCTYPE html&gt;<br/>activa modo estándar"]
    DOC --> ROOT["&lt;html lang='es'&gt;<br/>elemento raíz"]
    ROOT --> HEAD["&lt;head&gt;"]
    ROOT --> BODY["&lt;body&gt;"]
    HEAD --> HM["Metadatos<br/>invisibles en la página"]
    BODY --> BM["Contenido<br/>visible en la página"]
    HM --> H1["&lt;title&gt;<br/>nombre de la pestaña"]
    HM --> H2["&lt;meta charset&gt;<br/>codificación"]
    HM --> H3["&lt;meta viewport&gt;<br/>comportamiento móvil"]
    HM --> H4["&lt;link&gt;<br/>hoja de estilos, favicon"]
    BM --> B1["&lt;h1&gt;…&lt;h6&gt;<br/>títulos"]
    BM --> B2["&lt;p&gt;<br/>párrafos"]
    BM --> B3["&lt;img&gt;<br/>imágenes"]
    BM --> B4["&lt;a&gt;<br/>enlaces"]

Regla mnemotécnica: si quieres que la persona lo lea, va en el body. Si es información que el navegador o un robot necesita saber sobre el documento, va en el head.

Una excepción aparente al “el head es invisible”: el <title> sí se ve, pero no dentro de la página, sino en la pestaña del navegador. Y <style>, que también va en el head, afecta la apariencia de todo el body. Ninguno de los dos rompe la regla: el head describe y configura el documento, el body es el documento.

Paso 4: el título

Dentro del head va la primera etiqueta imprescindible:

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>Mi primera página</title>
    </head>
    <body>
    </body>
</html>

<title> define el nombre del documento. Aparece en:

La pestaña del navegador. Con quince pestañas abiertas, el título es lo único que distingue una de otra.
El historial y los marcadores. Cuando guardas una página, el título es el nombre con que se guarda.
Los resultados de búsqueda. Google y otros buscadores usan el <title> como el texto azul y clicable de cada resultado. Es, con diferencia, el metadato más influyente en si alguien hace clic o no.
Los lectores de pantalla. Es lo primero que se anuncia al cargar la página, y le dice a una persona ciega dónde está.
Las vistas previas al compartir. Al pegar un enlace en WhatsApp, Slack o Telegram, el título suele ser el texto grande de la tarjeta.

Reglas prácticas para escribir un buen título:

Recomendación	Ejemplo pobre	Ejemplo mejor
Que describa la página, no el sitio	`Inicio`	`Panadería El Trigal — Pan artesanal en Valparaíso`
Único por página	`Mi sitio` en las 40 páginas	`Contacto — Panadería El Trigal`
Lo específico primero	`Panadería El Trigal — Contacto`	`Contacto — Panadería El Trigal`
Entre 50 y 60 caracteres	Un título de 140 caracteres que se corta a la mitad en Google	Uno que se lea completo
Sin relleno	`Bienvenido a la página web oficial de…`	`Panadería El Trigal`

El <title> solo admite texto. Etiquetas dentro de él no se interpretan; se muestran como texto literal en la pestaña.

Y es obligatorio: el estándar de HTML lo exige en todo documento. Un documento sin <title> es técnicamente inválido, aunque el navegador lo muestre igual (poniendo la URL o el nombre del archivo en la pestaña).

Paso 5: los metadatos mínimos

El documento de arriba funciona, pero le faltan dos declaraciones que en la práctica son igual de obligatorias.

La codificación de caracteres:

<meta charset="utf-8">

Un archivo de texto es, a nivel de disco, una secuencia de bytes. La codificación es la tabla que dice qué carácter representa cada byte. Existieron muchas tablas incompatibles: ASCII, ISO-8859-1 (Latin-1), Windows-1252, ISO-8859-15. Si el archivo se escribe con una tabla y se lee con otra, las tildes, la ñ, los signos de interrogación de apertura y las comillas tipográficas se convierten en basura: configuración aparece como configuraciÃ³n.

UTF-8 es la codificación universal: cubre todos los caracteres de todos los idiomas escritos, incluidos emoji, y hoy es la que usa más del 98% de la web. Declarándola explícitamente evitas que el navegador tenga que adivinar.

Dos detalles técnicos:

La declaración debe estar dentro de los primeros 1024 bytes del documento. Por eso se pone como primera línea del head, antes que nada más.
Tu editor también debe guardar el archivo en UTF-8. VS Code y Sublime lo hacen por defecto; si ves caracteres raros pese a tener el <meta charset>, revisa el ajuste de codificación de tu editor.

El viewport:

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

Esta línea existe por un accidente histórico. Cuando salió el primer iPhone en 2007, ninguna página estaba diseñada para pantallas de esa dimensión. Apple resolvió el problema haciendo que Safari móvil fingiera tener una pantalla de 980 píxeles de ancho y luego redujera todo hasta que cupiera. Así las páginas de escritorio se veían completas, aunque diminutas, y había que hacer zoom para leer.

Ese comportamiento sigue activo por defecto en todos los navegadores móviles. La etiqueta viewport lo desactiva:

width=device-width le dice al navegador que use el ancho real del dispositivo en píxeles CSS, no los 980 ficticios.
initial-scale=1 fija el zoom inicial en 100%, sin reducción.

Sin esta línea, cualquier página que hagas se verá minúscula en un teléfono por mucho CSS responsive que escribas. Es la única línea de “diseño móvil” que necesitas para empezar, y por eso va en la plantilla base.

Un aviso: existen valores como user-scalable=no y maximum-scale=1 que impiden hacer zoom. No los uses. Bloquean una función de accesibilidad esencial para personas con baja visión.

El documento completo

Juntando todo, esta es la plantilla que vas a escribir al empezar cada archivo de aquí en adelante:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Mi primera página</title>
    </head>
    <body>
        <h1>Hola, mundo</h1>
        <p>Esta es mi primera página escrita a mano.</p>
    </body>
</html>

Línea por línea:

Línea	Qué hace
`<!DOCTYPE html>`	Activa el modo estándar de renderizado
`<html lang="es">`	Abre el elemento raíz y declara español como idioma
`<head>`	Abre la zona de metadatos
`<meta charset="utf-8">`	Declara la codificación; permite tildes y ñ
`<meta name="viewport" ...>`	Hace que la página se adapte al ancho real en móviles
`<title>`	Nombre del documento en pestaña, historial y buscadores
`</head>`	Cierra la zona de metadatos
`<body>`	Abre la zona de contenido visible
`<h1>`	Título principal del contenido
`<p>`	Un párrafo de texto
`</body>`	Cierra el contenido
`</html>`	Cierra el documento

Memoriza esta plantilla. No la copies del capítulo: escríbela desde cero cada vez hasta que salga sin pensar. Son doce líneas y las vas a usar miles de veces.

Qué pasa si omites etiquetas

Un dato que confunde: HTML permite omitir <html>, <head> y <body>. Este archivo funciona:

<!DOCTYPE html>
<title>Prueba</title>
<p>Hola</p>

El navegador reconstruye la estructura completa automáticamente. Puedes comprobarlo abriendo las herramientas de desarrollo (F12) y mirando la pestaña de elementos: verás <html>, <head> y <body> ahí, aunque no los escribiste.

¿Significa que puedes omitirlos siempre? No. Escríbelos siempre, por tres razones:

Legibilidad. Un documento con estructura explícita se lee y se mantiene mejor.
Los atributos. lang va en <html>. Si no escribes la etiqueta, no puedes ponerle el atributo.
Predictibilidad. Las reglas de reconstrucción son complejas y tienen casos límite. Un comentario en el lugar equivocado puede terminar dentro del body en vez del head y confundirte.

La omisión existe por compatibilidad histórica, no como una práctica recomendada.

Tu primer archivo, paso a paso

Vamos a hacerlo completo, sin saltarse nada.

1. Crea una carpeta. En tu escritorio o donde prefieras, crea una carpeta llamada superclubnet. Todos los archivos del curso van a vivir ahí. Trabajar con carpeta propia desde el principio evita el desorden que se acumula rápido.

2. Abre tu editor y crea un archivo nuevo.

3. Escribe esto a mano (a mano, no copiando):

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Mi primera página</title>
    </head>
    <body>
        <h1>Hola, mundo</h1>
        <p>Esta página la escribí yo, letra por letra.</p>
        <p>Tiene tildes: acción, ñandú, café, ¿verdad?</p>
        <!-- Este comentario no se ve en la página, pero sí en el código fuente -->
    </body>
</html>

4. Guarda el archivo dentro de la carpeta superclubnet con el nombre index.html. Ese nombre no es arbitrario: es el archivo que los servidores web sirven por defecto cuando alguien pide una carpeta sin especificar archivo. Volveremos sobre esto en el capítulo 6, al hablar de enlaces y rutas.

5. Ábrelo en el navegador. Tienes tres opciones:

Doble clic sobre el archivo en tu explorador de archivos.
Arrastrar el archivo a una ventana del navegador abierta.
En el navegador, Ctrl+O (Cmd+O en macOS) y buscarlo.

Deberías ver “Hola, mundo” en letra grande, dos párrafos debajo, y “Mi primera página” en la pestaña. Fíjate en la barra de direcciones: dice algo como file:///home/tu-usuario/superclubnet/index.html. El esquema file:// significa que el navegador está leyendo directamente de tu disco, sin servidor de por medio.

6. Verifica las tildes. Si el segundo párrafo se lee correctamente, tu codificación está bien. Si ves acciÃ³n, revisa que el <meta charset="utf-8"> esté presente y que el editor esté guardando en UTF-8.

7. Modifica y recarga. Cambia el texto de un párrafo, guarda con Ctrl+S, vuelve al navegador y pulsa F5. El cambio aparece. Ese ciclo —editar, guardar, recargar— es todo el flujo de trabajo del desarrollo web. No hay compilación ni proceso intermedio.

8. Mira el código fuente. Pulsa Ctrl+U. Verás exactamente el texto que escribiste, comentario incluido. Confirma con tus propios ojos que el navegador recibe texto plano.

El ciclo de trabajo, en resumen

stateDiagram-v2
    [*] --> Escribir
    Escribir: Escribir HTML en el editor
    Guardar: Guardar con Ctrl+S
    Recargar: Recargar el navegador con F5
    Revisar: Mirar el resultado
    Inspeccionar: Abrir DevTools con F12
    Escribir --> Guardar
    Guardar --> Recargar
    Recargar --> Revisar
    Revisar --> Escribir: Falta algo o hay que ajustar
    Revisar --> Inspeccionar: Se ve raro y no sé por qué
    Inspeccionar --> Escribir: Ya identifiqué el problema
    Revisar --> [*]: Quedó como quería

Las herramientas de desarrollo

Todos los navegadores traen un conjunto de herramientas integradas para inspeccionar páginas. Se abren con F12, o con Ctrl+Shift+I (Cmd+Opt+I en macOS), o con clic derecho sobre cualquier elemento → “Inspeccionar”.

Vas a usarlas constantemente durante todo el curso. Por ahora basta con conocer dos paneles:

Panel	Nombre en Firefox	Nombre en Chrome	Para qué sirve ahora
Inspector	Inspector	Elements	Ver el árbol DOM real, con la estructura que el navegador construyó
Consola	Consola	Console	Ver errores y advertencias del documento

Prueba esto con tu index.html abierto: pulsa F12, ve al inspector, y despliega el árbol. Vas a reconocer la misma estructura que escribiste: html conteniendo head y body, body conteniendo h1 y p. Ese es el DOM del que hablamos antes, hecho visible.

Un detalle que confunde al principio: el inspector muestra el DOM, no tu archivo. Si el navegador reconstruyó etiquetas que tú omitiste, ahí aparecen. Si más adelante JavaScript modifica la página, el inspector muestra el estado actual, no el original. Para ver tu archivo tal cual lo escribiste, usa Ctrl+U (ver código fuente), que es otra cosa.

Validar tu documento

El W3C mantiene un validador gratuito en validator.w3.org que revisa si tu HTML cumple el estándar. Le puedes dar una URL, subir un archivo o pegar el código directamente.

Es una herramienta muy recomendable mientras aprendes, porque detecta errores que el navegador te oculta al corregirlos silenciosamente: etiquetas sin cerrar, anidamiento cruzado, atributos que no existen, alt faltante en imágenes.

La forma sana de usarlo: valida cada archivo que escribas durante los primeros capítulos. Lee cada mensaje de error entero y busca la línea que indica. Después de un mes ya no lo vas a necesitar para los errores básicos, porque los habrás internalizado.

Errores comunes

Esta tabla recoge los tropiezos que aparecen casi siempre en la primera semana. Vale la pena volver a ella cuando algo no funcione.

Error	Síntoma	Causa	Solución
El archivo se abre como texto	El navegador muestra el código HTML en vez de la página	La extensión no es `.html` (típicamente quedó `.html.txt` en Windows)	Activar la vista de extensiones en el Explorador y renombrar a `.html`
Tildes rotas	Aparece `configuraciÃ³n` en vez de `configuración`	Falta `<meta charset="utf-8">`, o el editor guardó en otra codificación	Agregar el meta como primera línea del `head` y verificar la codificación en el editor
Página diminuta en el teléfono	Todo se ve muy pequeño y hay que hacer zoom	Falta la etiqueta `<meta name="viewport">`	Agregarla en el `head` con `width=device-width, initial-scale=1`
Etiqueta sin cerrar	El resto de la página hereda un formato inesperado	Se abrió `<b>` u otra etiqueta y nunca se cerró	Cerrar la etiqueta; usar un editor con coloreado o pasar el validador
Anidamiento cruzado	Resultado inconsistente entre navegadores	Se escribió `<p><b>texto</p></b>`	Cerrar en orden inverso al de apertura
Cambios que no aparecen	Se edita y recarga, pero la página sigue igual	No se guardó el archivo, o se está viendo un archivo distinto	Guardar con `Ctrl+S`; verificar la ruta en la barra de direcciones
Cambios que no aparecen (parte 2)	Se guardó y la página sigue igual	Caché del navegador	Recarga forzada con `Ctrl+Shift+R` (`Cmd+Shift+R` en macOS)
Espacios que no se ven	Se escriben varios espacios y solo aparece uno	HTML colapsa espacios en blanco consecutivos	Usar CSS para separación, o `<br>` para saltos de línea reales
Título con etiquetas	La pestaña muestra `<b>Inicio</b>` literalmente	Se pusieron etiquetas dentro de `<title>`	El `<title>` solo admite texto plano
El navegador ignora `</br>`	Nada ocurre donde se esperaba un salto	`<br>` es un elemento vacío y no tiene etiqueta de cierre	Escribir `<br>` (o `<br />`), nunca `</br>`
Comentario que se ve a medias	Parte del texto del comentario aparece en la página	Se anidó un comentario dentro de otro, o el texto contiene `--`	No anidar comentarios; eliminar los dobles guiones internos
Página vacía sin errores	El navegador muestra una página en blanco	Todo el contenido quedó dentro del `<head>` en vez del `<body>`	Revisar dónde se cierra `</head>` y mover el contenido al `body`
Estilos que se comportan raro	Los tamaños de las cajas no cuadran	Falta el doctype y el navegador entró en modo peculiar	Poner `<!DOCTYPE html>` como primerísima línea del archivo
Enlace roto al subir al servidor	Funciona en local, falla publicado	El archivo se llama `Pagina.html` y el enlace dice `pagina.html`	Usar siempre minúsculas en nombres de archivo

Repaso de referencia

Todo lo que apareció en este capítulo, en una sola tabla:

Elemento o declaración	Va en	Obligatorio	Qué hace
`<!DOCTYPE html>`	Primera línea	En la práctica sí	Activa el modo estándar de renderizado
`<html>`	Raíz	Sí	Contiene todo el documento
`lang` (atributo)	En `<html>`	Muy recomendado	Declara el idioma del contenido
`<head>`	Dentro de `<html>`	Sí	Zona de metadatos, no se ve en la página
`<meta charset>`	Primero en `<head>`	En la práctica sí	Declara la codificación de caracteres
`<meta name="viewport">`	En `<head>`	En la práctica sí	Adapta la página al ancho real en móviles
`<title>`	En `<head>`	Sí	Nombre del documento en pestaña y buscadores
`<body>`	Dentro de `<html>`	Sí	Todo el contenido visible
`<h1>`	En `<body>`	No	Título principal del contenido
`<p>`	En `<body>`	No	Párrafo de texto
`<!-- -->`	Donde sea	No	Comentario, invisible al renderizar pero presente en el fuente

Ejercicios propuestos

Haz todos. Son cortos y cada uno fija un concepto distinto.

1. La plantilla de memoria. Cierra este capítulo. Abre tu editor y escribe la estructura mínima completa desde cero, sin mirar: doctype, html con lang, head con charset, viewport y title, y body. Compara con la plantilla del capítulo y anota qué olvidaste. Repite mañana. Repite pasado mañana. El objetivo es que salga sin esfuerzo.

2. Ficha personal. Crea sobre-mi.html con la estructura completa. Dentro del body pon un <h1> con tu nombre y tres  con datos tuyos: de dónde eres, qué te interesa, y por qué estás aprendiendo esto. Asegúrate de que al menos uno de los párrafos tenga tildes o ñ, y verifica que se vean bien.

3. Cinco títulos. Escribe cinco archivos con el mismo contenido en el body pero distinto <title> cada uno. Ábrelos los cinco en pestañas separadas del mismo navegador. Observa cómo el título es lo único que te permite identificarlos. Luego reduce el ancho de la ventana y fíjate en qué parte del título sobrevive cuando las pestañas se encogen: esa es la razón de poner lo específico primero.

4. Experimento con el doctype. Toma tu index.html y crea una copia sin la primera línea. Abre ambos, pulsa F12 en cada uno y ve a la consola. Algunos navegadores advierten explícitamente sobre el modo peculiar. Documenta en un comentario dentro del archivo qué diferencia notaste.

5. Experimento con la codificación. Crea un archivo con tildes, ñ, signos de apertura (¿, ¡) y algún emoji. Ábrelo y verifica que todo se ve. Ahora borra el <meta charset="utf-8"> y recarga con Ctrl+Shift+R. Anota qué caracteres se rompen y cuáles sobreviven. Devuelve el meta a su lugar.

6. Experimento con el viewport. Con F12 abierto, activa el modo de emulación de dispositivo móvil (el ícono de teléfono y tablet en la barra de DevTools). Mira tu página con y sin la etiqueta viewport. La diferencia es dramática.

7. Espacios en blanco. Escribe un párrafo con diez espacios entre dos palabras y tres saltos de línea en medio de una frase. Guarda, recarga y observa el resultado. Luego reescribe el mismo texto usando   donde de verdad quieras un salto. Compara.

8. Anidamiento correcto e incorrecto. Escribe dos párrafos: uno con Texto en negrita normal. y otro con Texto en negrita. Ábrelos, pulsa F12 y compara el árbol DOM que el navegador construyó en cada caso con lo que tú escribiste. Vas a ver la recuperación de errores en acción.

9. Lectura de código ajeno. Elige tres sitios que uses a diario. En cada uno, pulsa Ctrl+U y busca el <head>. Anota qué etiquetas reconoces (doctype, charset, viewport, title) y cuántas más hay que todavía no conoces. No intentes entenderlas: solo confirma que la base que aprendiste está ahí, en sitios reales de millones de visitas.

10. Validación. Pasa tus archivos index.html y sobre-mi.html por validator.w3.org. Corrige todo hasta llegar a cero errores. Si un mensaje no lo entiendes, cópialo y búscalo: aprender a leer mensajes de error es una habilidad tan importante como escribir código.

11. Comentarios como interruptor. En sobre-mi.html, comenta uno de los párrafos completo. Guarda, recarga y confirma que desapareció de la página. Luego pulsa Ctrl+U y confirma que el texto sigue estando en el fuente. Esta doble comprobación es la que explica por qué no se ponen datos sensibles en comentarios.

12. Página de índice. Crea un archivo plantilla.html que contenga solo la estructura mínima, con el título vacío y sin contenido en el body. Guárdalo en tu carpeta del curso. De aquí en adelante, cada vez que necesites un archivo nuevo, cópialo en vez de escribir todo desde cero. Ojo: haz primero el ejercicio 1 varias veces; la plantilla es para después de haber memorizado, no en lugar de memorizar.

Lo que viene

Tienes un documento HTML válido, entiendes qué hace cada línea y sabes por qué está ahí. También tienes el ciclo de trabajo completo: editar, guardar, recargar, inspeccionar. Eso es más de lo que parece, porque a partir de aquí todo lo que agreguemos se apoya en esta base.

Pero tu página se ve como un documento de 1993: texto negro sobre fondo blanco, tipografía de sistema, sin márgenes ni color. Eso es porque el navegador está aplicando su hoja de estilos por defecto y nada más. HTML describe qué es cada cosa; decidir cómo se ve es trabajo de otro lenguaje.

Ese lenguaje es CSS, y es el tema del capítulo 2. Ahí vamos a ver las tres formas de aplicar estilos a un documento, cómo se escriben los colores (nombres, hexadecimal, rgb() y hsl()), qué unidades de medida existen y cuándo usar cada una, y sobre todo los selectores: el mecanismo que permite apuntar a un elemento concreto de tu documento para decirle cómo debe verse. Con eso, la misma página que acabas de escribir va a cambiar por completo sin que toques una sola etiqueta del HTML.

Antes de seguir, haz los ejercicios. Especialmente el primero.