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

Sesión 3 · Semana 1

La estructura de un documento HTML

Hoy · Hoja de ruta

  1. 1. Aprende: Qué declara cada pieza del esqueleto y qué se rompe exactamente cuando falta.
  2. 2. Haz: Rompe deliberadamente tu página, observa qué pasa, y empieza la portada de tu proyecto.
  3. 3. Comprueba: Los acentos se ven bien y la página es legible en la vista de móvil.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿En qué se diferencian un elemento, una etiqueta y un atributo?
  2. ¿Por qué ver una página «bien» no demuestra que su HTML sea correcto?
  3. Repara <p class="aviso">Importante</strong>.

Pieza por pieza

<!doctype html>

<!doctype html>

Le dice al navegador que el documento es HTML moderno. Sin él, el navegador entra en modo compatibilidad y aplica reglas de hace veinte años.

<html lang="es">

Es el elemento raíz: todo lo demás va dentro. El atributo lang declara el idioma principal, y lo usan los lectores de pantalla para elegir la voz y la pronunciación, los navegadores para ofrecer traducción, y los buscadores para clasificar la página.

Sin lang="es", un lector de pantalla lee el español con fonética inglesa y se vuelve incomprensible.

Contiene información sobre el documento. Nada de lo que hay aquí se ve en la ventana.

<meta charset="UTF-8">

Define la codificación: cómo se traducen los bytes del archivo a caracteres. Gracias a UTF-8 podemos escribir correctamente:

á é í ó ú
ñ
€
¿ ?

Si falta, «Programación» se muestra como «Programación».

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Indica al navegador que use el ancho real del dispositivo. Sin él, un móvil muestra la página de escritorio encogida e ilegible. Lo entenderemos del todo al estudiar CSS responsive; por ahora forma parte de la estructura fija.

<title>PixelStore | Componentes para desarrolladores</title>

No aparece dentro de la página: aparece en la pestaña, en los favoritos y como titular en un buscador. Compara:

<title>Inicio</title>
<title>PixelStore | Componentes para desarrolladores</title>

¿Cuál te dice de qué web es, si lo ves en una lista de veinte pestañas?

<body>

Contiene el contenido que verá el usuario.

La prueba para no confundir head y body

Si es algo que una persona debería leer, va en el body. Si es algo que el navegador necesita saber antes de dibujar nada, va en el head.

Pieza Qué declara Qué pasa si falta
<!doctype html> Que el documento es HTML estándar Modo compatibilidad, con reglas antiguas
lang="es" El idioma del contenido El lector de pantalla lo pronuncia en inglés
charset="UTF-8" Cómo se traducen los bytes a caracteres «Programación» se ve como «Programación»
viewport Que se adapte al ancho del dispositivo En móvil se ve la página de escritorio encogida
<title> El nombre del documento Pestaña, favorito y buscador sin identificar

Práctica guiada · Destruye la página

Vamos a aprender provocando errores. Sobre una copia de tu página, haz estas seis cosas, de una en una, y anota qué ocurre:

  1. Elimina </h1>.
  2. Elimina </body>.
  3. Escribe una etiqueta que no existe, como <titulo>.
  4. Duplica un elemento.
  5. Cambia UTF-8 por ISO-8859-1.
  6. Elimina lang.

Para cada una, tres columnas:

Qué he roto Qué hace el navegador Qué dice HTMLHint

Al terminar, deja el documento correcto otra vez. Lo que quiero que veas es cuántas de las seis el navegador no delata en absoluto. Esa es la razón por la que existen los linters y los validadores.

Emmet · atajos, cuando ya sabes escribirlo

Ahora que has escrito el esqueleto a mano, puedes abreviarlo. VS Code incluye Emmet:

!

y Tab genera la estructura completa de un documento. O:

ul>li*3

que se expande a:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

La regla de Emmet

No uses una abreviatura cuyo resultado no seas capaz de escribir y explicar a mano. Emmet es una herramienta de productividad: te ahorra tecleo, no conocimiento.

Ahora tú · La portada de tu proyecto

Crea index.html en la raíz de tu carpeta y constrúyela con:

  • El esqueleto completo y los cuatro metadatos correctos.
  • Un <title> descriptivo, con el tema de tu proyecto.
  • Un único <h1> con el nombre del proyecto.
  • Al menos tres <h2> que dividan la portada en áreas temáticas.
  • Párrafos descriptivos reales, con una descripción del proyecto.

Este archivo constituye la primera página del sitio que se entregará dentro de seis semanas, y no un ejercicio desechable.

Comprobación · dos pruebas de un minuto

Escribe en algún párrafo la palabra «Programación». Si se ve correctamente, tu charset está bien. Después abre DevTools con F12, activa la vista de dispositivo móvil y comprueba que el texto se lee sin hacer zoom: si hay que ampliar, falta el viewport.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Qué síntoma concreto delata que falta el charset?
  2. ¿A quién perjudica que falte lang="es"?
  3. De las seis cosas que rompiste, ¿cuántas delató el navegador?
Ver respuestas

1 · Los caracteres no ingleses se muestran mal: acentos, eñes y signos de apertura aparecen como símbolos extraños.

2 · Sobre todo a quien usa un lector de pantalla, que elige voz y fonética según el idioma declarado. También a los buscadores.

3 · Prácticamente ninguna, salvo el cambio de codificación. Ese es justo el punto de la práctica.

Microprueba semanal 1 · 5–10 minutos

Individual, sin IA y sin apuntes. No se califica: sirve para decidir qué necesitas recuperar.

  1. Escribe de memoria el esqueleto mínimo de un documento HTML.
  2. Explica la diferencia entre elemento, etiqueta y atributo con un ejemplo.
  3. Repara: <p lang="es">Hola <strong>mundo</p></strong>.