Utilizando la etiqueta <section> de HTML

Introducción

En HTML, la etiqueta <section> se utiliza para dividir un documento en varias secciones para mayor claridad y distinción. Es un elemento semántico que se puede utilizar para secciones independientes o secciones anidadas dentro de un documento. Esta práctica te guiará por los pasos simples para utilizar la etiqueta <section> en un archivo HTML.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haz clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puedes actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

Agregar una sección básica

Primero, crea un archivo index.html en tu editor de código preferido. Este archivo contendrá el código HTML con el que trabajaremos.

Comienza agregando una sección básica utilizando la etiqueta <section>. Esto se puede hacer de la siguiente manera:

<section>
  <h1>Título de la sección</h1>
  <p>Aquí va el contenido de la sección.</p>
</section>

En el código anterior, h1 y p son etiquetas HTML para encabezado y párrafo, respectivamente. La etiqueta h1 define un encabezado de nivel superior para la sección y la etiqueta p se utiliza para agregar contenido de texto a la sección.

Agregar una subsección

También puedes crear una subsección dentro de una sección utilizando la anidación de etiquetas <section>. Por ejemplo:

<section>
  <h1>Título de la sección</h1>
  <p>Aquí va el contenido de la sección.</p>

  <section>
    <h2>Título de la subsección</h2>
    <p>Aquí va el contenido de la subsección.</p>
  </section>
</section>

En el código anterior, tenemos una sección que contiene otra sección anidada que funciona como una subsección. La etiqueta h2 dentro de la sección anidada define el encabezado de la subsección, y la etiqueta p agrega contenido de texto a la subsección.

Estilizar con CSS

Por defecto, la etiqueta <section> es un elemento de nivel de bloque en HTML. Puedes utilizar CSS para dar estilo al elemento <section>, al igual que con cualquier otro elemento HTML. Aquí hay un ejemplo:

<style>
  section {
    border: 2px solid black;
    padding: 10px;
    margin-bottom: 20px;
  }
</style>

En el código anterior, se utiliza una etiqueta style para contener el CSS para la etiqueta <section>. El código CSS agrega un borde, relleno y margen al elemento <section>. Puedes ajustar estas propiedades según tus preferencias.

Agregar más secciones

Finalmente, puedes agregar más secciones a tu archivo HTML según sea necesario. Recuerda seguir la estructura de las etiquetas de apertura y cierre de sección.

<section>
  <h1>Sección 1</h1>
  <p>Aquí va el contenido.</p>
</section>

<section>
  <h1>Sección 2</h1>
  <p>Aquí va el contenido.</p>
</section>

<section>
  <h1>Sección 3</h1>
  <p>Aquí va el contenido.</p>
</section>

Resumen

La etiqueta <section> en HTML es un elemento semántico que se utiliza para dividir un documento en varias secciones con el fin de mayor claridad y distinción. Permite la creación de secciones independientes y subsecciones anidadas dentro de un documento. Con los pasos proporcionados en esta práctica, ahora puedes agregar etiquetas <section> a tus archivos HTML, personalizarlas con CSS y mejorar la organización y legibilidad de tus documentos.