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
Para escribir una pagina web con HTML debemos tener en cuenta una estructura bien definida. Son las etiquetas que se encargan de hablar con el navegador y le dicen que elementos se mostrarán en el sitio web. 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>
HTMLA primera vista parece sintaxis compleja, pero cada línea asume una responsabilidad crítica para que el navegador no colapse. Tampoco hace falta que la memorices al pie de la letra, verás que los editores de texto nos proporcionan atajos y snnipets para poder usar esta plantilla facilmente. Aunque si es importante que reconozcas las etiquetas principales y fundamentales.
El DOCTYPE. 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 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.
<!DOCTYPE html>
<!-- las etiquetas html envuelven a todo. También se conocen como el root-->
<!-- lang es el primer atribito que conocerás, indica el idioma del sitio -->
<html lang="es">
<head>
<!-- Aquí van metaetiquetas y etiquetas para el navegador -->
</head>
</html>
HTMLEl 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.
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Aquí van metaetiquetas y etiquetas para el navegador -->
</head>
<body>
<!-- Aquí va el contenido que será visible en el sitio -->
</body>
</html>
HTMLEtiquetas 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>
HTMLSin 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">
HTMLElementos 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.