El cuerpo "body"

He aquí el contenido que empezará a mostrarse en nuestra web al leerla con los ojos.

Estructura y cabeceras

El cuerpo, como cualquier buen texto, hay que estructurarlo con cabeceras y párrafos:

h1 (la h es de "header" o cabecera 1) solo puede haber uno porque es el título de nuestra página. Y por eso es la cabecera más grande.
h2 es una cabecera más pequeña y sería como un subapartado de h1. Y dentro de h2 podemos poner un h3, que sería un subapartado de h2.

Y así sucesivamente podríamos llegar hasta h6, pero por temas de accesibilidad, al parecer, es mejor evitar anidar el texto más allá del h3.

Ejemplo

He aquí un ejemplo para un cuerpo básico, con un par de cabeceras con sus párrafos.

<body>
  <h1>h1 o cabecera uno</h1>
  <p>Esto es un párrafo.</p>

  <h2>h2 o cabecera dos</h2>
  <p>Esto es otro párrafo.</p>
</body>

Si lo anidamos en el trocito anterior, nos quedaría así: se abre la etiqueta html con el idioma, se abre la etiqueta de la cabeza y se cierra, se abre y se cierra también el cuerpo, y finalmente, se cierra la etiqueta html.

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>MetaWeb</title>
</head>

<body>
  <h1>h1 o cabecera uno</h1>
  <p>Esto es un párrafo.</p>

  <h2>h2 o cabecera dos</h2>
  <p>Esto es otro párrafo.</p>
</body>

</html>

Ver los cambios

Para visualizar los cambios en nuestra página, tenemos que guardarlos primero en el fichero de texto y después refrescar la página en el navegador.

¡Ojito!

Es muy mala práctica usar los números de las cabeceras para poner el texto más grande o más pequeño. Las cabeceras siempre deben responder a la estructura del texto para facilitar el trabajo a tecnologías asistivas como los lectores de pantalla que usan personas con dificultades de visión o directamente ciegas.

Tengamos siempre en cuenta que, por Internet, no solo se lee con los ojos y el texto es lo más accesible. Estructurar es incluir: demos forma a nuestros textos para facilitar que todas las personitas que llegan a nuestra página puedan leerlos, con o sin asistentes.

Continuar

Para seguir con nuestra paginita, vamos a ponerle pies para que no vaya coja.
Footer o pie de página