Qué es HTML

Todos los sitios web que has visitado alguna vez nacen como un documento de texto plano escrito en HTML. Los encabezados, párrafos, botones, imágenes y enlaces que ves en una página están descritos en este único lenguaje.

Antes de poder darle estilo a una página o hacer que se mueva, tienes que decir qué hay en ella. Esa descripción es HTML.

Una página es texto estructurado

HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto). La palabra que importa es marcado.

Tomas texto plano y marcas qué partes son encabezados, cuáles son párrafos, cuáles son enlaces. No le estás dando instrucciones a la computadora para que las siga. Estás etiquetando el contenido para que el navegador sepa qué es cada parte.

Piénsalo como formatear un documento a mano. Encierras el título en un círculo, subrayas los encabezados de sección, dibujas un recuadro alrededor de una foto. HTML es la forma de hacer ese encerrado y subrayado de una manera que el navegador pueda entender.

<h1>Bienvenida</h1>
<p>Este es un párrafo de texto en mi primera página web.</p>

Dos líneas, dos piezas de estructura: un encabezado y un párrafo. El navegador lee las etiquetas y muestra la primera línea grande y en negrita, y la segunda como texto normal.

JunoUna página es texto estructurado HTML es la forma de etiquetar las partes de una página para que el navegador sepa qué son. No estás escribiendo instrucciones, estás marcando contenido: esta parte es un encabezado, esta parte es un párrafo. Esa es toda la idea, y todo lo demás se construye sobre ella.

Si esto te parece demasiado simple para ser la respuesta real, no lo es. Pasé mi primera semana buscando la parte complicada, y no la había.

JunoUna página es texto estructurado La palabra para esto es declarativo: describes la estructura que quieres, y el navegador se encarga de cómo producirla. Aquí no hay lógica, ni bucles, ni variables.

Por eso HTML no es un lenguaje de programación en el sentido habitual. No calcula nada, estructura contenido. Si tienes claro este rol en tu cabeza, ubicar a CSS y JavaScript se vuelve mucho más fácil, porque cuando te descubras preguntando "¿cómo hago que HTML haga X?", esa suele ser la señal de que te metiste en el territorio de uno de los otros dos.

JunoUna página es texto estructurado El navegador interpreta tu marcado y lo convierte en un árbol de objetos llamado el DOM, el Document Object Model (Modelo de Objetos del Documento): la representación viva, en memoria, de la página. Tu texto fuente es la entrada, y el DOM es lo que en realidad se renderiza y con lo que se comunica cualquier otra tecnología web.

Ese marco explica gran parte del comportamiento de HTML. El análisis (parsing) es deliberadamente tolerante, así que una etiqueta de cierre faltante o un elemento mal anidado casi nunca lanzan un error. El parser sigue un algoritmo de recuperación definido y construye un árbol válido de todos modos, y eso es lo que ha mantenido funcionando dos décadas de páginas imperfectas.

Eso también significa que funciona al renderizarse es una prueba débil de corrección. El navegador va a construir un DOM a partir de casi cualquier cosa, así que la estructura bien formada depende de ti, no del parser. Es la diferencia entre una página que sobrevive a su segundo desarrollador y una que no.

Elementos, etiquetas y atributos

La mayor parte de HTML está hecha de elementos. Un elemento normalmente tiene una etiqueta de apertura, algo de contenido y una etiqueta de cierre:

<p>Hola.</p>

<p> es la etiqueta de apertura, </p> es la etiqueta de cierre (fíjate en la barra), y "Hola." es el contenido entre ambas. Juntas forman un elemento de párrafo. Las etiquetas son las etiquetas propiamente dichas, y el contenido es lo que tu visitante realmente lee.

También puedes darle información extra a una etiqueta con un atributo, escrito como un par nombre="valor" dentro de la etiqueta de apertura. Un enlace necesita saber a dónde va, así que se lo indicas con href:

<a href="https://scrimba.com">Visita Scrimba</a>

Algunos elementos no tienen contenido alguno, así que tampoco tienen etiqueta de cierre. Estos son los elementos vacíos, y te los vas a encontrar todo el tiempo: <img>, <br>, <input>, <hr>. Todo lo que necesitan vive en sus atributos, así que no hay nada que envolver ni que cerrar.

<img src="labrador.jpg" alt="Un labrador sentado en pasto alto">

JunoElementos, etiquetas y atributos Un elemento es una etiqueta de apertura, algo de contenido y una etiqueta de cierre, como <p>...</p>. Los atributos van en la etiqueta de apertura y agregan detalles, como a dónde apunta un enlace.

Por favor, no intentes memorizar cada etiqueta. Hay más de cien y nadie las tiene todas en la cabeza. Vas a ir aprendiendo el puñado que necesitas, y vas a estar buscando el resto para siempre, igual que todos los demás.

JunoElementos, etiquetas y atributos Vale la pena fijar el vocabulario desde ahora, porque la gente lo usa de forma imprecisa. Una etiqueta es el texto que escribes, <p> o </p>. Un elemento es todo lo que produce el parser: las etiquetas, su contenido y cualquier descendiente. Un atributo lo configura.

En el momento en que estás revisando el marcado de otra persona, "la etiqueta" y "el elemento" dejan de ser intercambiables. Los elementos vacíos son los que suelen atrapar a la gente: sin contenido, sin etiqueta de cierre, todo en los atributos.

JunoElementos, etiquetas y atributos Etiqueta, elemento y atributo significan tres cosas distintas, y tenerlas claras te va a servir la primera vez que leas un stack trace a toda velocidad.

En esta capa, los valores de los atributos son cadenas de texto, todos y cada uno, incluyendo los números y los booleanos. disabled es un atributo booleano cuya sola presencia significa verdadero, y <input value="5"> guarda la cadena "5" hasta que algo la lee como un número. Así que la primera vez que tu operación aritmética se convierta en concatenación en JavaScript, ya vas a saber por qué.

La barra final que a veces ves en <br /> es opcional y no hace absolutamente nada, un resto de XHTML. Ignórala, y no dejes que nadie te diga lo contrario.

Cómo se dividen el trabajo HTML, CSS y JavaScript

Una página web terminada por lo general se construye a partir de tres lenguajes, y cada uno tiene una sola función:

• HTML es la estructura: los encabezados, el texto, las imágenes y los botones.
• CSS es el estilo: los colores, las fuentes, el espaciado y el diseño visual.
• JavaScript es el comportamiento: qué pasa cuando haces clic, escribes o te desplazas.

Esta es la imagen a la que siempre vuelvo. HTML son las paredes y las habitaciones de una casa, CSS es la pintura y los muebles, y JavaScript es la electricidad que hace que las cosas se encienda.

Estás aprendiendo las paredes primero, porque no hay nada que pintar ni que cablear hasta que exista la estructura.

Mantener los tres separados es un hábito que vale la pena adquirir desde el principio. Cuando tu contenido vive en HTML, tu presentación en CSS y tu comportamiento en JavaScript, puedes cambiar cualquiera de los tres sin afectar a los otros dos.

JunoCómo se dividen el trabajo HTML, CSS y JavaScript Tres lenguajes, tres funciones: HTML es la estructura, CSS es el estilo, JavaScript es el comportamiento. Estás empezando con HTML porque es la parte sobre la que se apoya todo lo demás.

Una vez que estas paredes están en pie, la pintura y el cableado tienen dónde ir. Y puedes construir una página real y útil con nada más que esta capa, lo cual es bueno saber cuando los otros dos lenguajes se sienten lejanos.

JunoCómo se dividen el trabajo HTML, CSS y JavaScript La estratificación es deliberada. HTML aporta estructura y significado, CSS lee esa estructura y describe cómo debería verse, JavaScript la lee y la modifica en respuesta a eventos.

Resiste la tentación de simular el diseño visual en HTML: etiquetas <br> apiladas para dar espacio, un <div> vacío para empujar algo hacia abajo. Funciona al principio y se vuelve doloroso rápido. Es barato adquirir el hábito correcto ahora, y caro desaprender el otro en un proyecto que ya está en producción.

JunoCómo se dividen el trabajo HTML, CSS y JavaScript La separación es más que prolijidad, es lo que hace que las páginas sean resilientes. Una página cuyo significado está completamente sostenido por su HTML se degrada con elegancia: si CSS no llega a cargar, el contenido sigue siendo legible y ordenado, y si JavaScript está deshabilitado o falla, el contenido principal sigue ahí. Ese es todo el argumento a favor de la mejora progresiva, y se ha mantenido vigente por veinte años mientras muchas ideas más ruidosas no lo han logrado.

También es un argumento de accesibilidad y de rendimiento. La tecnología de asistencia lee el DOM, así que el significado que vive en HTML está disponible para ella, mientras que el significado simulado con CSS o inyectado tarde por JavaScript muchas veces no lo está. HTML también es lo que el navegador puede analizar y pintar primero, y el contenido que espera un viaje de ida y vuelta a JavaScript es contenido que tu usuario tiene que esperar.

Cuando no estés seguro de dónde va algo, empieza desde la base de la pila y sube solo cuando la estructura por sí sola no pueda sostenerlo. Los equipos que he visto lamentar esta decisión, todos la lamentaron en la misma dirección.

Tu primer vistazo a una página completa

Aquí tienes una página web completa, pequeña pero real. Vas a conocer cada parte de ella en detalle en los próximos capítulos, así que no te preocupes por los detalles todavía. Por ahora, fíjate en que todo está construido a partir de las etiquetas y atributos que ya has visto:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Mi primera página</title>
  </head>
  <body>
    <h1>Bienvenida</h1>
    <p>Este es un párrafo de texto en mi primera página web.</p>
  </body>
</html>

Léela de arriba hacia abajo. La primera línea le dice al navegador que esta es una página HTML moderna. <html> envuelve todo. <head> contiene información que ocurre detrás de escena, como el título de la página, y <body> contiene lo que en realidad ves.

El encabezado y el párrafo de antes viven dentro del body, porque son contenido para tu visitante. Esa división, información sobre la página frente a contenido de la página, es la primera decisión estructural que toma cualquier documento.

El siguiente capítulo, sobre tu primera página HTML, desarma este esqueleto línea por línea.

JunoTu primer vistazo a una página completa Cada página se construye a partir del mismo esqueleto pequeño: un doctype, y después <html> envolviendo un <head> y un <body>. El head es información detrás de escena, el body es lo que la gente ve.

Vas a desarmar esto con detalle en el próximo capítulo, así que por ahora basta con un vistazo rápido. La primera vez parece mucho, y para la quinta vez ya no parece nada del otro mundo.

JunoTu primer vistazo a una página completa La división central es metadatos en el head, contenido visible en el body. Casi todos los documentos que escribas van a partir exactamente de esta forma, así que vale la pena reconocerla a simple vista.

Tu editor te la va a generar automáticamente, y de todos modos vale la pena poder identificar qué falta cuando esa plantilla está mal.

JunoTu primer vistazo a una página completa El esqueleto tiene un orden por una razón. <meta charset> va primero en el head para que el parser sepa cómo decodificar los bytes del resto del documento antes de leerlos, y lang en <html> le indica a los lectores de pantalla y a las herramientas de traducción con qué idioma están trabajando.

Nada de esto es relleno. El head configura cómo se analiza y se interpreta el documento, y el body es el contenido al que se le aplica esa configuración. Entiéndelo una vez y vas a empezar a editarlo con confianza, lo cual importa, porque el head es donde vive, sorprendentemente, una buena parte de los bugs de producción.