Teoría
Teoría

La etiqueta section: secciones temáticas

Estaría bien agregar algo más que una bienvenida a la página principal, ¿verdad? Incluyamos una sección sobre tus habilidades, por ahora con un texto provisional. El contenido principal, dentro de <main>, tendrá dos secciones temáticas: «Bienvenida» y «Habilidades». Necesitamos separarlas.

Para eso sirve <section>, que identifica una sección temática o lógica. ¿Cómo reconocerla? Si puedes darle un nombre que describa su contenido o su propósito, vas por buen camino. Por ejemplo:

<section>
  Sección «Acerca de la empresa» Aquí seguramente se presenta la empresa
</section>
<section>
  Sección «Editar perfil» Aquí administro mis datos personales
</section>

Un buen ejemplo es dividir un libro en capítulos: el nombre de cada capítulo describe su contenido. Además, un capítulo aislado de los demás pierde parte de su contexto. Algo parecido ocurre con las secciones de la página principal: juntas forman su contenido, pero por separado pierden su sentido dentro de la página.

Una pista para distinguir las secciones temáticas de los bloques de distribución: una sección temática admite un nombre que describe su contenido, como «programa de estudios», «catálogo» o «nuestras ventajas». Si el nombre solo describe una posición, como «columna izquierda», o el bloque agrupa contenidos sin un tema común, probablemente se trata de un bloque de distribución. En ese caso, <section> no es la etiqueta adecuada.

index.html

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Mi primer sitio web</title> <link rel="stylesheet" href="outlines.css"> </head> <body> <header> Encabezado del sitio </header> <main> ¡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. </main> <footer> Pie de página del sitio </footer> </body> </html>

ObjetivosRealizado

Envuelve todo el texto que está dentro de <main> en una etiqueta <section>.
Después de esa sección, agrega otra con el texto Sección de habilidades.