Teoría
Teoría

La etiqueta main: el contenido principal

Dejemos por un momento la información sobre la página y pasemos a su contenido. Estamos diseñando los grandes bloques: la introducción, el contenido principal, la parte final y otros. Para eso necesitamos las etiquetas adecuadas.

La primera es <main>. Identifica el contenido principal de la página, que no se repite en las demás. Normalmente se utiliza un solo <main> por página.

<main>
  ¡Hola, soy el contenido principal! Solo aparezco en esta página.
</main>

Nuestro sitio tendrá varias páginas. En todas se repetirán el encabezado y el pie de página, y cada una tendrá su propio contenido. Ese contenido es el que irá dentro de <main>.

La página principal que estamos creando tiene un texto de bienvenida. Es su contenido principal y no aparecerá en las otras páginas, así que lo envolveremos en <main>. En las páginas internas, esta etiqueta contendrá otro contenido principal.

La especificación no permite tener más de un <main> por página, a menos que los demás tengan el atributo especial hidden. Este atributo se usa, por ejemplo, en aplicaciones de una sola página (Single Page Application) para mostrar un <main> u otro según el estado de la aplicación. hidden le indica al navegador que no debe mostrar ese contenido mientras se utiliza el de otro <main>.

index.html

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Mi primer sitio web</title> <link rel="stylesheet" href="outlines.css"> </head> <body> ¡Hola a todos! Te doy la bienvenida a mi primer sitio web. Hasta hace poco no sabía qué hacía alguien que se dedica a la maquetación web. Ahora encontré estos ejercicios de HTML y CSS y quiero dedicarme a eso. Incluso tengo un instructor, Cupcake, que no me dejará distraerme y seguirá mis avances. Mi primera tarea es llevar un diario y contar con sinceridad todos mis logros. </body> </html>

ObjetivosRealizado

Envuelve todo el texto que está dentro de <body> en una etiqueta <main>.