Fundamentos de HTML
¿Qué es HTML?
HTML (HyperText Markup Language) es el lenguaje con el que se escriben las páginas web. No es un lenguaje de programación: no calcula ni toma decisiones. Es un lenguaje de marcas, un sistema de etiquetas que describe la estructura y el significado del contenido.
Cuando abres un documento HTML en tu navegador, este interpreta las etiquetas para formar la estructura y el contenido de la página de forma organizada. Aunque las etiquetas no se muestran en la pantalla, funcionan como una guía interna que define la estructura y el propósito de cada elemento.
HTML es universal. Un mismo archivo funciona en Chrome, en Firefox, en Safari, en un ordenador de sobremesa o en un teléfono. Esa portabilidad no es casual: es una decisión de diseño del estándar, y es una de sus grandes virtudes.
Etiquetas, elementos y atributos
El mecanismo básico de HTML es la etiqueta: una instrucción encerrada entre los signos < y >. La mayoría de las etiquetas funcionan en pareja: una de apertura y una de cierre. La de cierre lleva una barra antes del nombre:
<strong>Este texto es importante</strong>El conjunto formado por la etiqueta de apertura, el contenido y la etiqueta de cierre es un elemento. El navegador interpreta el elemento y lo representa de algún modo (en este caso, en negrita) pero no muestra las etiquetas en sí.
Algunas etiquetas no encierran contenido y se escriben solas. Son las llamadas etiquetas vacías:
<br>
<img src="foto.jpg" alt="Una foto">Las etiquetas pueden llevar atributos: información adicional que se escribe dentro de la etiqueta de apertura con la forma nombre="valor". En el ejemplo anterior, src indica la ubicación de la imagen y alt proporciona una descripción alternativa, importante para accesibilidad y para los casos en que la imagen no puede cargarse.
Puedes combinar varios atributos en una misma etiqueta. El orden entre ellos es libre, pero los atributos disponibles para cada etiqueta no: están definidos por el estándar HTML5. No puedes inventarte los tuyos propios, igual que no puedes inventarte etiquetas.
<a href="https://ejemplo.com" title="Ir a ejemplo.com">Visitar</a>Convenciones
HTML5 es tolerante: acepta mayúsculas y minúsculas, y a veces permite omitir las comillas en los valores de los atributos. Aun así, la convención moderna es escribir siempre en minúsculas y el contenido de los atributos, siempre con comillas. No porque el navegador lo exija, sino porque el código resulta más legible y las herramientas profesionales lo esperan así.
Mas adelante veremos el caso de DOCTYPE, que es una declaración especial que, por convención y claridad, se escribe en mayúsculas para diferenciarla de las etiquetas de contenido, aunque el navegador aceptaría ambas formas, mayúsculas o minúsculas.
Anidamiento
Los elementos pueden contener otros elementos. A esto se llama anidamiento, y es la base de cualquier estructura HTML:
<p>Un párrafo con <strong>texto importante</strong> dentro.</p>La regla es sencilla: las etiquetas deben cerrarse en orden inverso al que se abrieron. Piensa en ello como paréntesis. Esto es correcto:
<strong><em>Texto en negrita y cursiva</em></strong>Y esto no lo es, porque la simetría está rota:
<strong><em>Texto</strong></em>Los navegadores son flexibles con estos errores y a menudo los corrigen solos, pero no conviene confiar en esa indulgencia. El código mal anidado es difícil de leer y puede producir resultados inesperados.
Dos lenguajes, un propósito
HTML describe qué es cada cosa: un título, un párrafo, una lista. Pero no dice nada sobre cómo debe verse, sobre su apariencia. ¿De qué color es el texto? ¿Qué tamaño tiene? ¿Cómo se distribuyen los elementos en la pantalla? De eso se encarga CSS, un lenguaje independiente con su propia sintaxis que se aplica sobre el documento HTML para controlar su apariencia.
La idea de que ambos lenguajes existan por separado no es una complicación: es una solución. Y para entender por qué, conviene saber un poco de historia.
En los primeros años de la web, HTML era el único lenguaje disponible y tenía que encargarse de todo: estructura y presentación a la vez. Se usaban atributos como bgcolor o color directamente en las etiquetas, y las tablas se empleaban para controlar el diseño de la página entera. El resultado era código difícil de mantener y que se veía diferente en cada navegador.
CSS llegó en 1996 precisamente para resolver ese problema: sacar la presentación fuera del HTML y ponerla en un lugar propio. Desde entonces, la separación es el principio fundamental del desarrollo web moderno.
La ventaja práctica es inmediata. Imagina un sitio con cien páginas: si los estilos están mezclados con el contenido, cambiar el color de los títulos implica editar cien archivos. Si los estilos están en un archivo CSS separado, basta con cambiar ese archivo una vez. El HTML no se toca.
Las etiquetas HTML que tenían propósito puramente visual (como <font>, <center>, o atributos como bgcolor) son hoy obsoletas. A lo largo de este manual las señalaremos cuando aparezcan, porque tienen valor histórico para entender por qué CSS es como es. Pero no forman parte de la práctica actual.
Nota: La idea que guía este manual: HTML describe qué es el contenido, CSS describe cómo se ve. Mantener esa separación no es solo una buena práctica: es la forma correcta de trabajar, y es el criterio que guía estas lecciones.
CSS (Cascading Style Sheets) es el lenguaje que controla la presentación visual: colores, tipografía, márgenes, disposición de los elementos. Con un solo archivo CSS puedes cambiar el aspecto de un sitio entero sin tocar el HTML. Lo veremos en detalle a partir de la lección 7.
La estructura básica de una página
Todo documento HTML parte de la misma estructura. No es que sin ella el navegador se niegue a renderizar la página: los navegadores modernos son bastante indulgentes y mostrarán algo aunque el documento esté incompleto. Pero omitir estas piezas tiene consecuencias concretas, y en general no vale la pena prescindir de ellas.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
</head>
<body>
<!-- El contenido visible va aquí -->
</body>
</html>La división es clara: <head> contiene información sobre la página (título, codificación de caracteres, enlaces a archivos CSS) que el navegador necesita pero que no se muestra directamente en pantalla. <body> contiene todo el contenido visible: párrafos, imágenes, enlaces, tablas.
Nota: El <head> admite muchos más elementos de los que aparecen aquí: metadatos para buscadores, instrucciones para redes sociales, configuración de la ventana en móviles. Tienen su propia lección al final del manual.
Recapitulación
- HTML es un lenguaje de marcas que describe la estructura y el significado del contenido.
- Las etiquetas definen elementos. Las etiquetas pueden llevar atributos definidos por el estándar: los atributos disponibles para cada etiqueta son fijos, no puedes inventarte los tuyos.
- Los elementos se pueden anidar, pero deben cerrarse en orden inverso al que se abrieron.
- CSS controla la presentación visual: colores, tipografía, layout. Separar HTML y CSS no es una complicación: es la base del desarrollo web moderno.
- Todo documento HTML parte de una estructura básica:
DOCTYPE,<html>,<head>(metadatos, invisible) y<body>(contenido visible).
En la próxima lección: crearemos nuestro primer archivo HTML, veremos cómo se vincula una hoja de estilo, y escribiremos las primeras reglas CSS reales.