Texto, listas, enlaces y navegación

Partes de la portada de la sesión anterior y la conviertes en un sitio de cuatro páginas enlazadas. El recorrido orientativo reserva 5 minutos al punto de partida, 25 a la explicación, 140 al trabajo y 10 a comprobar lo aprendido.

Se explica

25 minutos · conceptos y demostración

Hoy aparecen tres familias de elementos —texto, listas y enlaces— y en las tres la decisión es la misma: qué relación hay entre estas piezas de información. Los catálogos de sintaxis quedan como material de consulta dentro de cada paso; aquí van las decisiones.

HTML no sirve para decir «quiero esto grande»

Sirve para decir:

«Esto es el título principal del documento.»

Es la diferencia entre describir la apariencia y describir el significado, y explica casi todos los errores de esta unidad.

Los encabezados son el índice del documento

Hay seis niveles, de h1 a h6, y los niveles indican jerarquía, no tamaño:

<h1>PixelStore</h1>

<h2>Productos</h2>

<h3>Ordenadores portátiles</h3>

Juntos construyen un índice:

h1 PixelStore

    h2 Productos

        h3 Portátiles

        h3 Monitores

    h2 Servicios

        h3 Reparaciones

    h2 Contacto

Ese índice es exactamente lo que usa un lector de pantalla para saltar de sección en sección, y lo que usa un buscador para entender de qué habla la página.

Párrafos, no saltos de línea

<!-- Incorrecto -->
Texto uno
<br>
<br>
Texto dos

<!-- Correcto -->
<p>Texto uno.</p>
<p>Texto dos.</p>

Las dos versiones se ven casi igual. La primera dice «un texto suelto con saltos de línea»; la segunda dice «dos párrafos». <br> existe para saltos que forman parte del contenido: los versos de un poema, las líneas de una dirección postal. HTML describe la estructura; CSS controlará el espacio.

Énfasis y significado

<strong>Importante</strong>
<em>énfasis</em>

strong indica importancia; em indica énfasis. No pienses:

strong = negrita
em = cursiva

Eso describe su apariencia habitual, no su significado. Con CSS podrías hacer que strong se viera de cualquier otra forma, y seguiría significando lo mismo.

Tres listas para tres relaciones

Una lista no es «texto con viñetas». Cada tipo declara una relación distinta entre sus elementos.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<ol>
    <li>Crear el proyecto</li>
    <li>Escribir HTML</li>
    <li>Validar</li>
</ol>

En la segunda, el orden tiene significado: no puedes validar antes de escribir.

<dl>
    <dt>HTML</dt>
    <dd>Lenguaje utilizado para estructurar contenido web.</dd>

    <dt>CSS</dt>
    <dd>Lenguaje utilizado para definir su presentación.</dd>
</dl>

dt es el término y dd su descripción. Un mismo dt puede tener varios dd, y varios dt pueden compartir un dd.

Cuando una lista va dentro de otra, el segundo <ul> va dentro del <li> del que depende, no detrás de él. Es el error más común de la sesión: sacarlo fuera declara que «Portátiles» es hermano de «Hardware» en lugar de una parte suya.

<ul>
    <li>
        Hardware

        <ul>
            <li>Portátiles</li>
            <li>Monitores</li>
        </ul>
    </li>

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

El enlace y la ruta relativa

<a href="https://developer.mozilla.org/">MDN Web Docs</a>

href indica el destino y el contenido del elemento es el texto visible. Ese texto importa: «pincha aquí» no dice nada fuera de contexto, y mucha gente navega saltando de enlace en enlace sin leer lo que hay alrededor.

Para otra página del mismo sitio basta su nombre de archivo:

<a href="productos.html">Productos</a>

Lo que desatasca todo lo demás es de dónde parte una ruta. Cuando escribes href="productos.html", el navegador no busca desde la raíz del proyecto: busca desde la carpeta del archivo que contiene el enlace.

La navegación es una lista de enlaces

<nav aria-label="Navegación principal">
    <ul>
        <li><a href="index.html">Inicio</a></li>
        <li><a href="productos.html">Productos</a></li>
        <li><a href="acerca.html">Acerca de</a></li>
        <li><a href="contacto.html" aria-current="page">Contacto (página actual)</a></li>
    </ul>
</nav>

• <nav> declara que ese bloque es navegación. Un lector de pantalla ofrece saltar a él, o saltárselo entero para ir al contenido, que es lo que hace casi todo el mundo que navega así.
• La lista dice que son cuatro enlaces hermanos, y permite anunciar «lista de 4 elementos». Cuatro enlaces sueltos separados por espacios no dicen ni cuántos son ni dónde acaban.
• aria-label="Navegación principal" da un nombre a este bloque para las tecnologías de asistencia.
• aria-current="page" identifica el enlace de la página actual para esas tecnologías. Por sí solo no cambia su aspecto: el texto «(página actual)» ofrece también una indicación visible.

El ejemplo corresponde a contacto.html. En cada una de las demás páginas, cambia de enlace tanto el atributo como la indicación visible; solo uno debe marcarse como actual.

No elegimos las etiquetas pensando en cómo queremos que se vea. Elegimos las que representan mejor la información.

Se trabaja

140 minutos · práctica sobre tu propio proyecto

Hoy el proyecto pasa de una página suelta a un sitio de cuatro páginas enlazadas. Los pasos 1 a 4 trabajan el contenido; los pasos 5 a 7, la navegación y las rutas.

Paso 1 · Revisa la jerarquía de tu portada · 10 min

Antes de añadir páginas nuevas, arregla la que ya tienes. Los ejemplos siguientes presentan las marcas que podrás utilizar en este paso; no necesitas emplearlas todas.

Consulta antes de empezar · texto y entidades

<mark>texto destacado</mark>
<small>información secundaria</small>
<del>49,99 €</del> <ins>39,99 €</ins>
<abbr title="HyperText Markup Language">HTML</abbr>
<code>index.html</code>

Para escribir un < sin que abra una etiqueta se usan entidades:

Es imprescindible cuando quieres mostrar código HTML dentro de una página, que es lo que hacen estos apuntes.

1. Dibuja en papel el índice de tu index.html: qué es h1, qué es h2, qué es h3.
2. Comprueba que no hay ningún salto de nivel y que solo hay un h1.
3. Sustituye cualquier <br><br> que hayas usado para separar por párrafos reales.
4. Añade al menos un abbr, un code o un par del/ins donde tenga sentido de verdad. Si no lo tiene en tu tema, no lo fuerces: dilo en un comentario.

Antes de eso, resuelve este caso y explica qué principio incumple:

<p>
    <h2>Nuestros productos</h2>
</p>

Paso 2 · De texto plano a estructura · 25 min

Recibes esta información sin ningún marcado:

Componentes de un ordenador
Procesador
Memoria RAM
Almacenamiento SSD

Pasos para instalar un sistema operativo
Descargar la imagen oficial
Crear el medio de instalación USB
Arrancar el equipo desde el USB
Completar el asistente de instalación
Reiniciar y actualizar controladores

Esto no es «escribir etiquetas»: es interpretar la información. Tu trabajo:

1. Decide qué es título de bloque y con qué nivel de encabezado, teniendo en cuenta dónde va a vivir dentro de tu página.
2. Decide qué bloque es ul y cuál es ol, y escribe en un comentario por qué, aplicando la prueba de reordenar.
3. Añade debajo una <dl> que defina tres conceptos: CPU, RAM y SSD.

Paso 3 · Los módulos de DAW · 10 min

Representa esta estructura con el mínimo HTML razonable y semánticamente correcto:

DAW
 ├ Lenguajes de Marcas
 ├ Programación
 └ Bases de Datos

<ul>
  <li>DAW
    <ul>
      <li>Lenguajes de Marcas</li>
      <li>Programación</li>
      <li>Bases de Datos</li>
    </ul>
  </li>
</ul>

Paso 4 · Crea productos.html · 25 min

Crea la segunda página de tu proyecto. Debe contener:

• Un encabezado principal y al menos dos niveles de encabezado.
• Varios párrafos.
• Una lista no ordenada.
• Una lista ordenada, donde el orden importe de verdad.
• Una lista de descripciones (dl), con sus términos (dt) y descripciones (dd).
• Una lista anidada dentro de un li.
• Al menos dos elementos de significado textual de la sesión anterior.

Todavía no la enlazaremos con la portada: eso es el paso 5.

Antes de continuar: ul, ol y dl están presentes y cada una declara la relación que le corresponde, no la que da el aspecto deseado.

Paso 5 · El sitio multipágina · 35 min

Amplía tu proyecto hasta tener cuatro páginas en la raíz:

mi-web/
├── index.html
├── productos.html
├── acerca.html
└── contacto.html

Requisitos:

1. Las cuatro tienen el esqueleto completo y su propio <title> distinto y descriptivo.
2. Las cuatro incluyen el mismo bloque de navegación, con los mismos enlaces en el mismo orden.
3. Cada página marca su propio enlace con aria-current="page" y el texto visible «(página actual)», como en el ejemplo. Quita ambas marcas de los otros enlaces.
4. Cada página tiene un único h1 que coincide con su tema.

Recorre después el ciclo completo: Inicio → Productos → Acerca de → Contacto → Inicio. Si algún enlace falla, no lo arregles todavía: anótalo, porque es exactamente el problema que ataca el paso siguiente.

<a href="#contacto">Ir a contacto</a>

<section id="contacto">
    <h2>Contacto</h2>
</section>

<a href="mailto:contacto@example.com">Enviar correo</a>
<a href="tel:+34960000000">960 000 000</a>

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
    Abrir recurso
</a>

Paso 6 · El laberinto de rutas · 25 min

Este ejercicio se hace en una carpeta independiente llamada practica-rutas, junto a mi-web, no dentro de ella. No muevas las cuatro páginas del proyecto. Así puedes practicar con otra estructura sin romper la navegación que acabas de terminar.

Crea estas carpetas y archivos desde el explorador de VS Code:

practica-rutas/
├── index.html
├── recursos/
│   └── ayuda.html
└── paginas/
    ├── productos.html
    └── contacto.html

En cada HTML, reutiliza el esqueleto que ya conoces y escribe un title y un h1 que identifiquen el archivo, por ejemplo «Ayuda» en ayuda.html. Guarda los cuatro antes de probar los enlaces. Todos los destinos de este ejercicio son páginas HTML; las imágenes llegarán en la sesión siguiente.

6.1 · Ejemplo resuelto

Desde paginas/productos.html, enlazar recursos/ayuda.html.

¿Dónde estoy?

En practica-rutas/paginas/, porque ahí vive el archivo que escribe el enlace.

¿Dónde está el destino?

En practica-rutas/recursos/.

¿Cuál es el camino?

Subir de paginas/ a practica-rutas/, y desde ahí bajar a recursos/.

Ruta

../recursos/ayuda.html

En paginas/productos.html, escribe <a href="../recursos/ayuda.html">Ayuda</a> dentro del body, guarda y abre la página en el navegador. Pulsa el enlace y comprueba que aparece el encabezado «Ayuda».

El procedimiento tiene tres pasos: dónde estoy, dónde voy y cuántos niveles subo antes de empezar a bajar.

6.2 · Ahora tú

1. Desde productos.html, volver a index.html.
2. Desde index.html, enlazar recursos/ayuda.html.
3. Desde contacto.html, enlazar productos.html.
4. Desde index.html, enlazar contacto.html.
5. Desde index.html, saltar a un encabezado con id="envios" en esa misma página. Crea primero el destino: <h2 id="envios">Envíos</h2>.

Escribe cada enlace en el archivo de origen, dentro del body, con un texto que describa el destino. Guarda y prueba uno a uno; comprueba el nombre del archivo en la barra de direcciones. Si el salto a «Envíos» apenas mueve la pantalla, comprueba que la dirección termina en #envios: el destino puede estar ya a la vista.

Paso 7 · La prueba de portabilidad · 10 min

En la copia, recorre las cuatro páginas en los dos sentidos y anota qué enlaces has comprobado y cualquier fallo encontrado. Verifica en la barra de direcciones que sigues dentro de la copia y no has vuelto a los archivos originales. Un proyecto que solo funciona en la carpeta donde se escribió no está terminado.

Ampliación si has completado el trabajo

Primero termina y comprueba los siete pasos. Estos dos retos no añaden etiquetas nuevas: exigen resolver rutas sobre estructuras que no has diseñado tú y juzgar decisiones ajenas.

Reto 1 · Un árbol de carpetas que no es el tuyo

tienda/
├── index.html
├── assets/
│   ├── marca/
│   │   └── historia.html
│   └── docs/
│       └── garantia.html
├── catalogo/
│   ├── index.html
│   ├── portatiles.html
│   └── fichas/
│       └── portatil-14.html
└── legal/
    └── privacidad.html

Escribe la ruta relativa para cada caso, aplicando los tres pasos del procedimiento. No compruebes en el navegador hasta haberlas escrito todas:

1. Desde catalogo/portatiles.html, enlazar fichas/portatil-14.html.
2. Desde catalogo/fichas/portatil-14.html, enlazar assets/marca/historia.html.
3. Desde catalogo/fichas/portatil-14.html, volver a la portada del sitio.
4. Desde legal/privacidad.html, enlazar assets/docs/garantia.html.
5. Desde index.html, enlazar catalogo/index.html, incluyendo el nombre del archivo para poder probarlo al abrir el sitio localmente.
6. Desde catalogo/index.html, enlazar privacidad.html.
7. Desde catalogo/fichas/portatil-14.html, enlazar portatiles.html.

Al terminar, crea una carpeta independiente tienda con esa estructura. En cada archivo escribe el esqueleto HTML y un encabezado que identifique la página. Añade los enlaces en sus archivos de origen y comprueba cuántas rutas acertaste a la primera. Las que falles, resuélvelas otra vez escribiendo los tres pasos por separado.

Reto 2 · La navegación de una web real

Abre tres sitios que uses y examina su menú principal con Ctrl + U o con el inspector. Responde por cada uno:

1. ¿El bloque de navegación es un nav, o son enlaces sueltos dentro de un div?
2. ¿Los enlaces están dentro de una lista, de modo que se pueda anunciar cuántos son?
3. ¿Se indica de alguna forma, además del color, cuál es la página actual?
4. ¿Hay algún enlace cuyo texto no signifique nada fuera de contexto, del tipo «aquí», «leer más» o «ver»? Cópialo y propón una redacción que sí funcione leída en voz alta y aislada.

Los tres menús funcionan con el ratón. La pregunta de esta unidad es siempre la misma: qué le queda a quien no usa el ratón ni ve el color.

Cierre

10 minutos · comprobación y recuerdo