Qué es HTML

docs.scrimba.com

Cada sitio web que hayas visitado comienza como un documento de texto plano escrito en HTML. Los encabezados, párrafos, botones, imágenes y enlaces que ves en una página se describen todos en este único lenguaje. Antes de poder estilizar una página o hacerla interactiva, debes describir qué hay en ella, y esa descripción es HTML.

Una página es simplemente texto estructurado

HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto). La palabra importante es markup (marcado): HTML es una forma de tomar texto plano y marcar cuáles partes son encabezados, cuáles son párrafos, cuáles son enlaces, y así sucesivamente. No le estás dando instrucciones al computador para que siga. Estás etiquetando contenido para que el navegador sepa qué es cada pieza y cómo mostrarla.

Piénsalo como si estuvieras formateando un documento a mano. Rodeas el título, subrayas los encabezados de sección, y dibuja un cuadro alrededor de una foto. HTML es cómo haces ese rodeo y subrayado de una manera que el navegador entiende.

HTML es un lenguaje declarativo: describes la estructura que quieres, no los pasos para producirla. No hay lógica, no hay bucles, no hay variables. Dices "esto es un encabezado, esto es un párrafo, esto es una lista de tres elementos", y el navegador es responsable de convertir esa descripción en algo en pantalla.

Por eso HTML no es un lenguaje de programación en el sentido usual. No calcula nada. Estructura contenido. Esa distinción importa una vez que añades CSS y JavaScript, porque cada uno de los tres tiene un trabajo en el que es bueno, y el trabajo de HTML es la estructura.

HTML es un lenguaje de marcado declarativo que el navegador analiza en un árbol de objetos llamado el DOM (el Modelo de Objeto del Documento: la representación viva, en memoria, de la página que CSS estiliza y JavaScript manipula). Tu texto fuente es la entrada; el DOM es lo que el navegador realmente renderiza y con lo que toda otra tecnología web se comunica.

Ese enfoque explica mucho del comportamiento de HTML. El análisis de HTML es deliberadamente tolerante: una etiqueta de cierre faltante o un elemento mal anidado rara vez lanza un error, porque el analizador sigue un algoritmo de recuperación definido y construye un árbol válido de todas formas. Esto es una característica, no descuido. Mantuvo funcionando dos décadas de páginas imperfectas. También significa que "se renderiza" es una prueba débil de corrección: el navegador construirá un DOM de casi cualquier cosa, así que estructurar bien tu marcado depende de ti, no del analizador.

<h1>Bienvenido</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, la segunda como texto ordinario del cuerpo.

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

JunoUna página es simplemente texto estructurado HTML es declarativo: describes estructura, el navegador se encarga del resto. No hay lógica aquí, que es exactamente por qué funciona bien con CSS y JavaScript. Mantén clara la función de HTML en tu cabeza y los otros dos se harán más fáciles de ubicar.

JunoUna página es simplemente texto estructurado El navegador analiza tu marcado en el DOM, y ese árbol es en lo que todo lo demás actúa. El análisis es tolerante por diseño, así que se renderiza prácticamente no prueba nada. La estructura bien formada es tu responsabilidad, y vale la pena el momento en que CSS y JavaScript empiezan a leer el árbol que construiste.

Elementos, etiquetas y atributos

La mayoría de HTML está compuesto por elementos. Un elemento generalmente tiene una etiqueta de apertura, algo de contenido, y una etiqueta de cierre:

<p>Hola allá.</p>

<p> es la etiqueta de apertura, </p> es la etiqueta de cierre (nota la barra diagonal), y "Hola allá." es el contenido entre ellas. Juntas hacen un elemento de párrafo. Las etiquetas son las etiquetas; el contenido es lo que el visitante lee.

También puedes darle a una etiqueta información extra con un atributo. Un enlace necesita saber a dónde va, así que se lo dices con un atributo href:

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

Un elemento es una etiqueta de apertura, su contenido, y una etiqueta de cierre. Los atributos van dentro de la etiqueta de apertura como pares name="value" y configuran el elemento: href en un enlace establece su destino, src en una imagen establece su archivo, alt establece el texto alternativo.

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

Algunos elementos no tienen contenido y no tienen etiqueta de cierre. Estos son elementos vacíos: <img>, <br>, <input>, <hr>. Llevan todo lo que necesitan en sus atributos, así que no hay nada que envolver y nada que cerrar.

El vocabulario vale la pena obtenerlo exacto, porque las personas lo usan flojamente y causa confusión después. Una etiqueta es el texto que escribes, <p> o </p>. Un elemento es la cosa completa que el analizador produce: las etiquetas más su contenido más cualquier descendiente. Un atributo es un par name="value" en la etiqueta de apertura que establece una propiedad del elemento.

Los elementos vacíos (<img>, <input>, <br>, <hr>, <meta>, <link>) no tienen modelo de contenido y por lo tanto ninguna etiqueta de cierre; la barra diagonal final que a veces ves (<br />) es opcional en HTML y no tiene efecto, una reliquia de XHTML. Los valores de atributo son cadenas, incluso cuando representan números o booleanos: disabled es un atributo booleano cuya mera presencia es verdadera, y <input value="5"> contiene la cadena "5" hasta que algo la lee como número. Saber que el DOM es de tipo string en esta capa te ahorra una clase de errores cuando JavaScript comienza a leer los valores de los atributos de nuevo.

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 añaden detalles, como a dónde apunta un enlace. No te preocupes por memorizar cada etiqueta. Aprenderás algunos a la vez según los necesites.

JunoElementos, etiquetas y atributos Las etiquetas son el texto, el elemento es la cosa completa, los atributos lo configuran. Cuidado con los elementos vacíos como <img> e <input>: sin contenido, sin etiqueta de cierre, todo está en los atributos. Obtener el vocabulario correcto ahora hace que el resto de la documentación se lea más limpiamente.

JunoElementos, etiquetas y atributos Etiqueta, elemento, y atributo significan tres cosas diferentes, y mantenerlas separadas vale la pena cuando depuras. Los valores de atributo son cadenas en esta capa, incluso los números y los booleanos, así que la primera vez que value vuelve como una cadena en JavaScript, ya sabrás por qué. La barra diagonal opcional en los elementos vacíos no hace nada; ignórala.

Cómo HTML, CSS y JavaScript dividen el trabajo

Una página web terminada generalmente se construye a partir de tres lenguajes, y cada uno tiene un trabajo:

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

Una forma común de imaginarlo: HTML son las paredes y cuartos de una casa, CSS es la pintura y los muebles, y JavaScript es la electricidad que hace que las cosas se enciendan. Estás aprendiendo las paredes primero, porque no hay nada que pintar o cablear hasta que la estructura exista.

Los tres lenguajes forman una pila en capas, y la estratificación es intencional. HTML proporciona estructura y significado. CSS lee esa estructura y describe cómo debe verse. JavaScript lee y cambia la estructura en respuesta a eventos.

Mantenerlos separados es una disciplina que vale la pena construir temprano. Cuando tu contenido vive en HTML, tu presentación en CSS, y tu comportamiento en JavaScript, puedes cambiar cada uno sin perturbar a los otros. Mezclarlos, por ejemplo forzar el diseño con etiquetas <br> o estilos en línea en todas partes, funciona al principio y se vuelve doloroso rápidamente.

La separación de responsabilidades entre los tres no es solo limpieza, es lo que hace que las páginas sean resilientes. Una página cuyo significado se lleva completamente en su HTML se degrada correctamente: si CSS no se carga, el contenido sigue siendo legible y ordenado; si JavaScript está deshabilitado o tiene errores, el contenido principal sigue está allí. Este es el argumento práctico para la mejora progresiva: construye un documento funcional en HTML primero, luego capa estilo y comportamiento encima.

También es un argumento de accesibilidad y 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 fingido con CSS o inyectado tarde por JavaScript a menudo no. Y HTML es lo que el navegador puede analizar y pintar primero; el contenido que depende de un viaje de JavaScript para aparecer es contenido por el que el usuario espera. Cuando estés decidiendo dónde debe vivir una pieza de la página, la respuesta predeterminada es HTML, y solo te mueves hacia arriba en la pila cuando la estructura sola no puede hacer el trabajo.

JunoCómo HTML, CSS y JavaScript dividen el trabajo Tres lenguajes, tres trabajos: HTML es estructura, CSS es estilo, JavaScript es comportamiento. Estás comenzando con HTML porque es la parte en la que todo lo demás se sienta. Una vez que estas paredes están arriba, la pintura y el cableado tienen un lugar a dónde ir.

JunoCómo HTML, CSS y JavaScript dividen el trabajo Estructura en HTML, presentación en CSS, comportamiento en JavaScript, mantenidos separados a propósito. Cambia uno sin romper los otros, y resiste la tentación de fingir diseño en HTML. Ese hábito es barato de construir ahora y caro de desaprender después.

JunoCómo HTML, CSS y JavaScript dividen el trabajo Pon significado en el HTML y la página se degrada correctamente cuando CSS o JavaScript se caen, lo que también es lo que la hace accesible y rápida. Ese es todo el caso para la mejora progresiva. Cuando estés inseguro de dónde algo pertenece, comienza en la parte inferior de la pila y solo sube cuando la estructura sola no puede llevarlo.

Tu primer vistazo a una página completa

Aquí hay una página web completa, aunque pequeña. Encontrarás cada parte de ella correctamente en los próximos capítulos, así que no te preocupes por los detalles todavía. Por ahora, observa que todo está hecho de las etiquetas y atributos que ya has visto:

A continuación hay un documento HTML mínimo pero completo. Cada página real comienza con una forma aproximadamente como esta: un doctype, una raíz <html>, un <head> para información sobre la página, y un <body> para el contenido que el visitante ve.

Un documento completo tiene un esqueleto requerido, y vale la pena leerlo de cerca aunque parezca código repetitivo. Cada línea tiene un propósito, y los próximos capítulos explican por qué cada una se lo merece en lugar de tratarla como una incantación mágica para copiar.

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

Lee desde la parte superior: la primera línea le dice al navegador que esta es una página HTML moderna, <html> envuelve todo, <head> contiene información detrás de escenas como el título de la página, y <body> contiene lo que realmente ves. El encabezado y el párrafo de antes viven dentro del cuerpo, porque son contenido para el visitante.

El <head> contiene metadatos: cosas sobre la página que no se muestran en el cuerpo de la página, como su título (que aparece en la pestaña del navegador) y su codificación de caracteres. El <body> contiene el contenido visible. Esta división, información sobre la página versus contenido de la página, es la primera decisión estructural que cada documento toma.

Nota el orden y por qué importa: <meta charset> viene primero en el head para que el analizador sepa cómo decodificar los bytes del resto del documento antes de que los lea. El atributo lang en <html> informa a los lectores de pantalla y herramientas de traducción. Nada de esto es decoración. El head configura cómo se analiza el documento y se entiende, y el body es el contenido al que se aplica esa configuración. El próximo capítulo, sobre tu primera página HTML, desglosa este esqueleto línea por línea.

JunoTu primer vistazo a una página completa Cada página se construye a partir de un esqueleto pequeño y repetitivo: un doctype, luego <html> envolviendo un <head> y un <body>. El head es información detrás de escenas, el body es lo que la gente ve. Desglosaras esto correctamente después, así que un vistazo rápido es todo lo que necesitas ahora.

JunoTu primer vistazo a una página completa La división central es metadatos en el head, contenido visible en el body. Casi cada documento que escribas comienza desde esta forma exacta, así que vale la pena reconocerla a primera vista. El próximo capítulo recorre cada línea.

JunoTu primer vistazo a una página completa El esqueleto está ordenado por una razón: charset antes del contenido para que el analizador pueda decodificar el resto, lang para tecnología de asistencia y traducción. No trates nada como relleno. Estructura y entiéndelo ahora y el head deja de parecer un bloque mágico que pegas.