HTML
A principios de los noventa, Tim Berners-Lee trabajaba en el CERN lidiando con un problema sumamente mundano. Necesitaba que científicos de diferentes partes del mundo leyeran los mismos documentos sin volverse locos en el proceso.
Su solución consistió en crear un sistema de hipertexto para vincular textos electrónicos en red. Así nació HTML, equipado apenas con unas cuantas etiquetas para definir títulos y enlaces básicos.
Nadie pensaba en transmitir videos en 4K ni en crear complejas aplicaciones interactivas. Era texto plano y funcionalidad pura.
HTML no es programación
Vamos a dejar esto claro desde el primer minuto para evitar discusiones acaloradas en foros técnicos. HyperText Markup Language es un lenguaje de marcado, no un lenguaje de programación.
No puedes crear bucles ni evaluar funciones matemáticas. Definitivamente, no puedes hackear bases de datos gubernamentales usándolo.
Su único propósito es otorgar significado al contenido e indicarle al navegador qué bloque de texto funciona como un párrafo, cuál es una tabla y cuál es una fotografía.
El boilerplate fundamental
Escribir código web sin una estructura base es como servir sopa directamente sobre la mesa de un restaurante. Funciona para ensuciar todo, pero no resulta nada útil para el usuario.
HTML exige un orden arquitectónico estricto antes de renderizar la primera palabra. A este esqueleto mínimo lo llamamos boilerplate.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Estructura Base</title>
</head>
<body>
<!-- Tu contenido visual va aquí -->
</body>
</html>A primera vista parece sintaxis alienígena, pero cada línea asume una responsabilidad crítica para que el navegador no colapse.
La declaración
Técnicamente ni siquiera califica como una etiqueta HTML. Es una instrucción directa al navegador sobre la versión del lenguaje.
Usar <!DOCTYPE html> obliga a los navegadores a interpretar tu código bajo estándares modernos, evitando el temido renderizado en modo peculiar o «quirks mode».
El centro de mando: head
Aquí reside el cerebro de tu documento. Todo lo que escribas dentro de estas etiquetas será completamente invisible para el visitante, pero vital para la supervivencia del sitio.
En esta sección defines el título de la pestaña, la codificación de caracteres y los enlaces a tus hojas de estilo. También es el territorio donde los motores de búsqueda leen los metadatos.
El escenario principal: body
Si el head procesa la lógica invisible, el body es la manifestación física. Toda la interfaz gráfica que el usuario puede ver, leer o hacer clic debe vivir estrictamente aquí.
Aquí colocarás titulares, párrafos, imágenes y botones. Cualquier elemento visual declarado fuera de esta área romperá las reglas de renderizado.
Etiquetas tradicionales vs. Self-closing
Al escribir código dentro del body, notarás rápidamente un detalle en la sintaxis. La inmensa mayoría de las etiquetas requiere apertura y cierre, actuando como cajas físicas.
Si quieres crear un párrafo, usas <p> para iniciarlo y </p> para indicar exactamente dónde termina. El texto queda protegido en el medio.
<p>Este es un texto protegido por un contenedor cerrado.</p>Sin embargo, existen las etiquetas self-closing. Estas son funcionalmente independientes y no necesitan envolver texto, por lo que asumen su propia clausura en la misma declaración.
<img src="gato.jpg" alt="Foto de un felino">Elementos como <img> insertan un objeto directamente en el documento. Al no contener otros elementos anidados, no requieren una etiqueta de cierre tradicional.
Ya conoces la historia, el esqueleto estructural y las reglas básicas del marcado. En las siguientes clases estaremos viendo algunos temas importantes y puntuales, sobre semántica, SEO y accesibilidad.