¿Como funciona el comando en HTML5: 'aside'?

Descripción Detallada del Elemento <aside> en HTML5

El elemento <aside> es un elemento de bloque introducido en HTML5, utilizado para representar contenido tangencialmente relacionado con el contenido principal de un documento. Aunque es un elemento semántico clave en la estructuración de la página, muchas personas no están completamente familiarizadas con sus capacidades y usos adecuados.

Atributos del Elemento <aside>

El elemento <aside> admite varios atributos globales que heredó del conjunto de elementos de HTML. Los atributos globales pueden ser aplicados a la mayoría de los elementos HTML y ofrecen funcionalidad adicional en términos de identificación, estilo y accesibilidad. Aquí están todos los atributos globales relevantes para <aside>:

1. id: Define un identificador único para el elemento, permitiendo su estilo o manipulación vía JavaScript.

   <aside id="informacion-relacionada">Contenido aquí</aside>

2. class: Asigna una o más clases al elemento, facilitando su estilización con CSS y la selección en JavaScript.

   <aside class="sidebar">Contenido aquí</aside>

3. style: Permite aplicar estilos en línea directamente al elemento.

   <aside style="background-color: lightgray;">Contenido aquí</aside>

4. title: Proporciona información adicional sobre el elemento como un tooltip (información emergente cuando se pasa el ratón sobre el elemento).

   <aside title="Información Adicional">Contenido aquí</aside>

5. lang: Indica el idioma del contenido contenido en el elemento.

   <aside lang="es">Contenido aquí</aside>

6. dir: Define la dirección del texto. Puede ser ltr (left-to-right) o rtl (right-to-left).

   <aside dir="rtl">محتوى هنا</aside>

7. tabindex: Define el orden de tabulación del elemento cuando se navega a través del teclado.

   <aside tabindex="0">Contenido aquí</aside>

8. hidden: Indica que el elemento está inicialmente oculto.

   <aside hidden>Contenido aquí</aside>

9. *aria- attributes**: Serie de atributos que aumentan la accesibilidad, proporcionando información adicional para tecnologías asistivas como lectores de pantalla.

   <aside aria-labelledby="aside-title">Contenido aquí</aside>

Uso del Elemento <aside> en HTML5 con Ejemplos

El elemento <aside> se inserta generalmente para contenido que está relacionado con el contenido primario de la página, pero que no es esencial para su entendimiento. Comúnmente se usa en blogs, artículos y otros sitios web de contenido estructurado para proporcionar información adicional, anuncios, enlaces relacionados y más.

Ejemplo 1: Uso en un Blog

En un blog, <aside> se puede utilizar para mostrar una barra lateral con información adicional sobre el autor, enlaces a otros artículos o anuncios.

<article>
    <h2>Artículo Principal</h2>
    <p>Este es el contenido principal del artículo...</p>
</article>
<aside>
    <h3>Sobre el autor</h3>
    <p>Información sobre el autor del blog...</p>
    <h3>Artículos Relacionados</h3>
    <ul>
        <li><a href="#art1">Artículo Relacionado 1</a></li>
        <li><a href="#art2">Artículo Relacionado 2</a></li>
    </ul>
</aside>

Ejemplo 2: Uso en una Página de Producto

En una página de producto, <aside> se puede emplear para mostrar especificaciones técnicas, opiniones de clientes, o productos relacionados.

<section>
    <h2>Nombre del Producto</h2>
    <p>Descripción detallada del producto...</p>
</section>
<aside>
    <h3>Especificaciones Técnicas</h3>
    <ul>
        <li>Dimensiones: 20x30 cm</li>
        <li>Peso: 1.5 kg</li>
        <li>Material: Aluminio</li>
    </ul>
    <h3>Opiniones de Clientes</h3>
    <p>"Excelente producto, lo recomiendo!" - Juan Pérez</p>
</aside>

En conclusión, el elemento <aside> es altamente versátil y útil en la estructuración de contenido web, facilitando la separación entre el contenido principal y la información complementaria. Utilizarlo adecuadamente mejora significativamente la accesibilidad y la organización semántica de las páginas web.