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

Sesión 4 · Semana 2

Texto y jerarquía de contenido

Hoy · Hoja de ruta

  1. 1. Aprende: Que los encabezados son el índice del documento, qué elementos marcan significado en el texto y cómo se escriben los caracteres especiales.
  2. 2. Haz: Resuelve el reto de anidación y aplica la jerarquía correcta a tu portada.
  3. 3. Comprueba: Ningún encabezado se salta un nivel.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Qué contenido pertenece a head y cuál a body?
  2. ¿Para qué sirven lang y meta charset?
  3. Predice qué problema puede causar una página sin meta name="viewport" en un móvil.

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.

Encabezados

Hay seis niveles, de h1 a h6:

<h1>PixelStore</h1>

<h2>Productos</h2>

<h3>Ordenadores portátiles</h3>

Los niveles indican jerarquía, no tamaño. Construyen el índice del documento:

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.

Cómo elegir el nivel sin equivocarse

No preguntes «¿qué tamaño quiero?». Pregunta «¿de qué es esto una parte?». Si es parte de la sección anterior, baja un nivel. Si es una sección nueva del mismo rango, usa el mismo nivel.

Y no saltes niveles hacia abajo: después de un h1 viene un h2, no un h3. Saltar es como escribir un índice con el capítulo 1, el apartado 1.1.1 y nada en medio.

Si el tamaño resultante no te gusta, es un problema de CSS. Con CSS podrás dar a cualquier encabezado el tamaño que necesites.

Párrafos

<p>
    PixelStore es una tienda especializada en tecnología.
</p>

No uses varios <br> para crear párrafos:

<!-- 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.

Otros elementos de texto útiles

<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>
Elemento Significa
mark Resaltado por relevancia en el contexto actual, como un subrayador
small Letra pequeña en el sentido legal: avisos, notas al pie
del / ins Contenido eliminado y contenido añadido. El par es perfecto para un precio rebajado
abbr Una abreviatura, con su significado en title
code Un fragmento de código o un nombre de archivo

Entidades HTML

¿Cómo escribimos un < si < es lo que abre una etiqueta? Con entidades:

Escribes Se ve
&lt; <
&gt; >
&amp; &
&quot; "
&nbsp; Un espacio que no se parte al final de línea
&copy; ©

Esto es imprescindible cuando quieres mostrar código HTML dentro de una página, que es precisamente lo que hacen estos apuntes. Si <p> se escribiera sin escapar, el navegador lo interpretaría como un párrafo en lugar de mostrarlo.

Reto 1 · ¿Qué está mal aquí? (10 min)

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

¿Qué principio de HTML se está incumpliendo y qué hará el navegador con esto?

Ver respuesta del Reto 1

Un <p> solo puede contener contenido en línea: texto, strong, em, a, img… Un encabezado es un elemento de bloque y no cabe dentro de un párrafo.

El navegador no muestra un error: cierra el párrafo por su cuenta justo antes del <h2> y deja suelto el </p> final. Acabas con un párrafo vacío, un encabezado que no está donde creías y una etiqueta huérfana. Otra vez el mismo patrón: se ve bien, y la estructura real no es la que escribiste.

Ahora tú · Revisa la jerarquía de tu portada

  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 cerrar · 2 minutos, sin mirar

  1. ¿Por qué está mal pasar de h2 a h4?
  2. ¿Cuál es la diferencia de significado entre strong y em?
  3. ¿Cómo se escribe «<p>» para que aparezca literalmente en la página?
Ver respuestas

1 · Porque los encabezados forman el índice del documento y saltar deja un hueco: quien navegue por encabezados no sabrá de qué es parte ese h4.

2 · strong marca importancia; em marca énfasis, el matiz que cambiaría el tono al leer la frase en voz alta. Ninguno de los dos significa «negrita» o «cursiva».

3 · &lt;p&gt;.