Web semántica - Etiqueta SECTION y ARTICLE

5.6 Web semántica - Etiqueta SECTION y ARTICLE

Introducción al Apartado

En el contexto del desarrollo web, la semántica de los documentos HTML ha adquirido una importancia creciente, especialmente con la introducción de las etiquetas <section> y <article> en HTML5. Estas etiquetas forman parte del conjunto de elementos semánticos que permiten estructurar el contenido de manera lógica, comprensible tanto para los navegadores como para los motores de búsqueda, asistentes de accesibilidad y otros agentes automatizados.

Dentro del tema 5, dedicado a las estructuras básicas, la incorporación de elementos semánticos representa un avance significativo respecto a las etiquetas genéricas anteriormente utilizadas (<div>, <span>) que carecían de significado intrínseco. La correcta utilización de <section> y <article> permite mejorar la accesibilidad, facilitar el mantenimiento del código y potenciar la optimización para motores de búsqueda (SEO).

Este apartado tiene como objetivo profundizar en el concepto, uso y buenas prácticas relacionadas con estas etiquetas, analizando su fundamentación teórica, su relación con otros elementos semánticos y su impacto en el diseño y desarrollo web. Se abordarán también ejemplos prácticos que ilustran su aplicación en diferentes escenarios, desde páginas sencillas hasta estructuras complejas.

El aprendizaje en este apartado permitirá comprender cómo estructurar contenidos de forma lógica y significativa, contribuyendo a la creación de páginas web más accesibles, mantenibles y optimizadas.

Marco Teórico y Fundamentos

Definiciones y Conceptos Clave

Las etiquetas <section> y <article> son elementos semánticos introducidos en HTML5 para mejorar la estructura lógica del contenido en un documento web. A diferencia de las etiquetas genéricas como <div>, que no aportan significado por sí mismas, estos elementos describen la función o naturaleza del contenido que contienen.

• <section>: Se utiliza para definir una sección temática dentro de un documento. Es decir, agrupa contenidos relacionados bajo un encabezado (generalmente <h1>-<h6>) que representa un capítulo o apartado del contenido general.
• <article>: Representa un contenido independiente, autónomo y autocontenible, como una entrada de blog, una noticia o una publicación que puede distribuirse o reutilizarse independientemente del resto del documento.

Ambas etiquetas contribuyen a mejorar la accesibilidad y el SEO al proporcionar una estructura clara y comprensible para los agentes automatizados que interpretan el contenido.

Teorías y Principios

La utilización adecuada de los elementos semánticos en HTML se fundamenta en principios de accesibilidad, usabilidad y optimización para motores de búsqueda. La Web Semántica, concepto promovido por la comunidad técnica, busca que los contenidos digitales tengan significado explícito mediante el uso correcto de etiquetas que describen su función o naturaleza.

Desde una perspectiva técnica, estos elementos facilitan:

• Mejorar la accesibilidad: Los lectores de pantalla y otras tecnologías asistivas interpretan mejor el contenido cuando está estructurado con elementos semánticos adecuados.
• Optimización SEO: Los motores de búsqueda valoran positivamente una estructura clara y significativa para determinar la relevancia del contenido.
• Mantenimiento y escalabilidad: La organización lógica simplifica futuras modificaciones o ampliaciones del sitio web.

Desarrollo Teórico

El uso correcto de <section> implica agrupar contenidos relacionados bajo un encabezado representativo. Por ejemplo, en una página web sobre un periódico digital, cada sección temática (deportes, política, cultura) puede estar delimitada por una etiqueta <section>. Dentro de cada sección, se pueden incluir múltiples artículos o subsecciones.

Por otro lado, <article> se reserva para contenidos independientes. Por ejemplo, un artículo periodístico completo puede estar envuelto en esta etiqueta. Es importante destacar que un <article> puede incluir múltiples secciones (<section>) si el contenido lo requiere.

Estas etiquetas también soportan atributos globales como id, class, title, entre otros, facilitando estilos CSS y scripts JavaScript específicos para cada estructura.

Relaciones y Contexto

Las etiquetas <section> y <article> complementan otros elementos semánticos como <header>, <footer>, <nav>, etc., formando una estructura coherente y jerárquica del documento. La correcta combinación permite definir claramente las diferentes partes del contenido:

<!-- Estructura sencilla con section y article -->
<section id="noticias">
  <h2>Últimas Noticias</h2>
  <article id="noticia1">
    <header>
      <h3>Título de la noticia 1</h3>
      <p class="fecha">Publicado el 10/10/2023</p>
    </header>
    <p>Resumen o contenido principal de la noticia 1...</p>
  </article>
  <article id="noticia2">
    <header>
      <h3>Título de la noticia 2</h3>
      <p class="fecha">Publicado el 11/10/2023</p>
    &/header&
    &p&Contenido completo...&/p&
  &/article&
</section>

<!-- Página corporativa con varias secciones -->
<body>
  <header>
    <h1>Empresa XYZ</h1>
  </header>

  <nav role="navigation">
    <a href="#quienes-somos">Quiénes somos</a>
    <a href="#servicios">Servicios</a>
    <a href="#contacto">Contacto</a>
  </nav>

  <section id="quienes-somos">
    <h2>Quienes Somos</h2>
    <p>Información sobre la empresa...</p>
  >/section>

  <section id="servicios">
    <h2>Nuestros Servicios</h2>
    <element article id="servicio1">
      <header>>>>>>>>>>>>>>>>>>>>>>>>>>"""''''''''''''''''''''amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;\n        &lth3&título del servicio 1&/título&\n        &p&;Descripción breve...&/p&\n      &/header&\n    &/article&\n    
  & lt ;/ section& gt ;

  
  & lt ;section id="opiniones"& gt ;
    ...