Qué es una página web

Toda página que abres empieza como un archivo de texto plano. Haz clic derecho en casi cualquier página, elige Ver código fuente de la página y podrás leer el HTML que envió el servidor.

Una página es un archivo de texto

Cuando escribes una dirección en un navegador, el navegador le pide un archivo a un servidor y recibe texto plano. Ese texto está escrito en HTML, el lenguaje de marcado de hipertexto (HyperText Markup Language). El navegador lo lee de arriba abajo, determina qué partes son títulos, párrafos, enlaces e imágenes, y luego dibuja la página que ves. Puedes comprobarlo en casi cualquier sitio: haz clic derecho en la página y elige Ver código fuente de la página. Detrás de los colores y el diseño hay un archivo de texto largo y legible.

HTML es un lenguaje de marcado, no un lenguaje de programación. No tiene bucles ni hace cálculos. Su trabajo es etiquetar el contenido: esta línea es el título principal, estas tres líneas son una lista, esta frase enlaza con otra página. Por lo general lo acompañan otros dos lenguajes. CSS decide cómo se ven las cosas (colores, fuentes, espacios, diseño), y JavaScript hace que la página reaccione a los clics y a lo que se escribe. Este curso cubre la primera capa. El curso de CSS cubre la segunda.

El esqueleto que comparten todas las páginas

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Corner Bakery</title>
  </head>
  <body>
    <h1>Corner Bakery</h1>
    <p>Fresh bread every morning from 7 am.</p>
  </body>
</html>

La primera línea, <!DOCTYPE html>, es un resto de los primeros tiempos de la web. Hoy su único trabajo es decirle al navegador que use el modo estándar en lugar de un viejo modo de compatibilidad que imita los errores de los navegadores de la década de 1990, así que siempre debes conservarla. Después viene el elemento <html>, que envuelve todo el documento. Su atributo lang indica el idioma de la página. Los lectores de pantalla lo usan para elegir la pronunciación correcta, y las herramientas de traducción lo usan para saber qué están traduciendo.

Dentro de <html> hay dos partes. El <head> contiene información sobre la página que no se dibuja en la página misma. <meta charset="utf-8"> indica qué codificación de caracteres usa el archivo; UTF-8 puede guardar las letras de todos los sistemas de escritura, incluido el coreano, así que el texto no se convertirá en símbolos raros. El <title> es el nombre que aparece en la pestaña del navegador, en los marcadores y en los resultados de búsqueda, y es lo primero que anuncia un lector de pantalla cuando se abre la página. El <body> contiene todo lo que aparece en pantalla.

Del texto a un árbol

El navegador no guarda tu HTML como una sola cadena larga. Lo analiza y lo convierte en un árbol de objetos llamado DOM, el Modelo de Objetos del Documento (Document Object Model). Cada elemento se convierte en un nodo, y los elementos escritos dentro de otro elemento se convierten en sus hijos. En la figura de abajo, title es hijo de head, y h1 y p son hijos de body. Los selectores de CSS y JavaScript trabajan sobre este árbol, y esa es una de las razones por las que importa anidar con cuidado.

Los navegadores son tolerantes. Si olvidas una etiqueta de cierre, el analizador sigue reglas de reparación escritas en el estándar HTML y construye un árbol de todos modos, pero el árbol reparado puede no ser el que querías. Acostumbrarte a escribir bien la estructura te ahorra mucha depuración desconcertante más adelante.

Quién escribe las reglas

Tim Berners-Lee escribió la primera propuesta de la World Wide Web en marzo de 1989, mientras trabajaba en el CERN, y a fines de 1990 ya funcionaban allí el primer servidor web y el primer navegador. Desde entonces HTML ha crecido mucho. Hoy lo define el HTML Living Standard, mantenido por el WHATWG, un grupo creado por los fabricantes de navegadores. En 2019 el W3C y el WHATWG acordaron trabajar en esta única versión. Living (vivo) significa que el documento no tiene números de versión y se actualiza de forma continua, así que el nombre HTML5 que todavía verás en los libros es solo una etiqueta aproximada.

El editor de abajo funciona como un navegador diminuto. Escribe a la izquierda y el resultado aparece a la derecha un momento después. Ejecutar vuelve a dibujar el resultado de inmediato. Cuando creas que terminaste, presiona Comprobar: la página hace algunas pruebas a tu HTML y te dice cuáles todavía fallan. Empezar de nuevo devuelve el código inicial.