Marc Semper Lloret
← HTML: estructura y contenido de la Web

Sesión 2 · Semana 1

Nuestra primera página y la anatomía del HTML

Hoy · Hoja de ruta

  1. 1. Aprende: Qué es un elemento, en qué se diferencia de una etiqueta y de un atributo, y por qué el navegador no sirve para validar HTML.
  2. 2. Haz: Escribe tu primera página completa a mano y repara un documento roto.
  3. 3. Comprueba: El panel de problemas queda en cero errores.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Para qué abrimos la carpeta completa del proyecto en VS Code?
  2. ¿Qué información ofrece el panel Problemas?
  3. Corrige mentalmente <h1>Título<h1> y explica qué faltaba.

Escríbela entera, a mano

Todavía no vamos a usar atajos. Escribe esto letra a letra:

<!doctype html>

<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Mi primera web</title>
</head>

<body>
    <h1>Mi primera página web</h1>

    <p>
        Esta página está construida utilizando HTML.
    </p>
</body>

</html>
Vista previaLo que dibuja el navegador

Mi primera página web

Esta página está construida utilizando HTML.

El title aparecería en la pestaña; dentro de la página vemos lo que contiene body.

Guarda con Ctrl + S y ábrelo en el navegador, o usa la previsualización de VS Code. Durante el desarrollo tendrás normalmente estas dos cosas a la vista:

El ciclo de trabajo
  1. Escribes en VS Code
  2. Guardas
  3. Miras el resultado en el navegador

Elemento, etiqueta y atributo no son lo mismo

Se usan como sinónimos y no lo son.

<p>Hola</p>
<p>       etiqueta de apertura
Hola      contenido
</p>      etiqueta de cierre

Elemento

La unidad completa: apertura, contenido y cierre. La etiqueta es solo la marca que lo delimita. Cuando decimos «un párrafo» hablamos del elemento; cuando decimos «falta el </p>» hablamos de la etiqueta.

Los elementos contienen otros elementos

<p>
    Estoy estudiando <strong>DAW</strong>.
</p>

Aquí strong está dentro de p. Eso crea una estructura jerárquica, un árbol, y ese árbol es lo que después leerán el CSS, el buscador y el lector de pantalla.

Los elementos tienen atributos

<html lang="es">
elemento    html
atributo    lang
valor       es

Los atributos aportan información adicional sobre el elemento. Vas a ver muchos durante la unidad.

Elementos vacíos

Algunos elementos no envuelven nada: aportan algo por sí mismos. Se escriben con una sola etiqueta y no se cierran.

<meta charset="UTF-8">
<img src="teclado.webp" alt="Teclado mecánico compacto">
<br>
<hr>

Escribir </img> no es otro estilo: es un error.

La regla de la anidación

Los elementos se cierran como los paréntesis: el último que se abre es el primero que se cierra.

<!-- Correcto -->
<p>Un <strong>teclado <em>mecánico</em></strong> compacto.</p>

<!-- Incorrecto -->
<p>Un <strong>teclado <em>mecánico</strong></em> compacto.</p>

En el segundo, strong se cierra antes que em, que se abrió después. El navegador lo mostrará parecido, porque adivinará, pero el árbol que construya ya no es el que escribiste.

El navegador no es un corrector

Este documento está roto de cuatro formas: falta el doctype, falta el idioma, falta la codificación y hay tres etiquetas sin cerrar.

<html>
<head>
<title>PixelStore
</head>
<body>
<h1>Bienvenido
<p>Componentes para desarrolladores
</body>

Ábrelo. Se ve perfectamente. Un navegador está diseñado para no fallar nunca delante de un usuario: ante un documento roto no muestra un error, adivina lo que querías decir y lo repara en silencio.

Que una página se vea bien no demuestra que su HTML esté bien. Solo demuestra que el navegador ha sabido disimularlo.

Recuerda esta frase, porque es el hilo de toda la unidad y volveremos a ella en la sesión 16.

Tarea 2 · Repara el HTML roto

Copia ese mismo fragmento en un archivo roto.html.

Paso 1 · Te enseño uno

¿Qué está mal?
La etiqueta <title> se abre y nunca se cierra antes de </head>.
¿Qué hace el navegador con eso?
Cierra el título por su cuenta al encontrar </head>. La pestaña se ve bien, así que el fallo pasa inadvertido.
¿A quién perjudica?
A cualquier programa que lea el documento tal como está escrito en lugar de repararlo: buscadores, lectores de pantalla, validadores.
Corrección
<title>PixelStore</title>

No basta con decir «falta una etiqueta»: interesa qué consecuencia tiene, porque es lo que te permitirá priorizar cuando encuentres veinte fallos a la vez.

Paso 2 · Ahora tú

  1. Abre el panel de problemas con Ctrl + Shift + M y anota qué detecta HTMLHint y qué no.
  2. Repara el documento entero: doctype, lang, codificación, viewport y todas las etiquetas pendientes.
  3. Al final del archivo, escribe un comentario HTML explicando los tres fallos más graves del original y por qué lo eran.
Estoy atascado · no sé cuáles son los «más graves»

Ordena por a quién afecta y cuánto:

  1. ¿Impide que el documento se interprete como HTML estándar? Eso afecta a todo lo demás.
  2. ¿Hace que el texto se lea mal, en el sentido literal de que se vean caracteres incorrectos?
  3. ¿Deja al documento sin información que ningún programa puede adivinar, como el idioma?
  4. ¿Es una etiqueta sin cerrar que el navegador repara sin consecuencias visibles?

Los tres primeros grupos pesan más que el cuarto, aunque el cuarto sea el que más veces aparece.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Qué diferencia hay entre un elemento y una etiqueta?
  2. Escribe de memoria dos elementos que no se cierren.
  3. ¿Por qué <strong>a<em>b</strong></em> está mal si se ve bien?
Ver respuestas

1 · El elemento es la unidad completa: apertura, contenido y cierre. La etiqueta es la marca que lo delimita.

2 · Por ejemplo <meta>, <img>, <br> o <hr>.

3 · Porque rompe el orden de anidación: em se abrió el último y debería cerrarse el primero. El navegador reconstruye un árbol distinto del escrito, y ese árbol es el que verán el CSS, el buscador y el lector de pantalla.