Etiqueta aside en HTML
¿Qué es la etiqueta <aside> en HTML?
La etiqueta <aside> en HTML5 es un contenedor para contenido secundario o lateral relacionado con el contenido principal de una página web. Es comúnmente utilizada para incluir contenido adicional, como barras laterales, widgets, menús de navegación, biografías de autor, etc.
El contenido dentro de la etiqueta <aside> se considera no esencial para la comprensión del contenido principal, pero puede ser útil o interesante para los usuarios.
Ejemplo de uso
Aquí hay un ejemplo de código HTML que muestra cómo utilizar la etiqueta <aside>:
<body>
<main>
<p>Este es el contenido principal de la página.</p>
</main>
<aside>
<p>Este es el contenido secundario de la página.</p>
</aside>
</body>
Lenguaje del código: HTML, XML (xml)En este ejemplo, el contenido dentro de la etiqueta <main> representa el contenido principal de la página, mientras que el contenido dentro de la etiqueta <aside> representa el contenido secundario relacionado con el contenido principal.
Además de su uso para contenido secundario, la etiqueta <aside> también puede ser utilizada para proporcionar información adicional relacionada con un bloque de contenido específico.
Por ejemplo, si se está hablando de una persona en un artículo, se puede utilizar la etiqueta <aside> para incluir información adicional sobre esa persona.
Atributos
La etiqueta <aside> en HTML5 no tiene atributos específicos. Sin embargo, puede aceptar cualquier atributo estándar de HTML como:
- class: Este atributo permite especificar una o varias clases CSS para el elemento, lo que facilita la aplicación de estilos en el documento HTML.
- id: Este atributo permite especificar un identificador único para el elemento, lo que permite acceder a él a través de un selector CSS o JavaScript.
- style: Este atributo permite especificar estilos CSS inline para el elemento, lo que permite aplicar estilos específicos directamente en el elemento, sin tener que crear una regla CSS separada.
- title: Este atributo permite especificar información adicional sobre el elemento, que puede ser útil para describir su función o propósito.
Además de estos atributos, la etiqueta <aside> es compatible con los atributos globales de HTML, como lang, dir, accesskey, entre otros.
Ejemplo
Aquí hay un ejemplo completo que se utiliza los atributos en la etiqueta <aside> de HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo de etiqueta <aside></title>
<style>
.sidebar {
background-color: lightgray;
padding: 20px;
width: 200px;
float: right;
}
</style>
</head>
<body>
<header>
<h1>Mi sitio web</h1>
</header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<main>
<h2>Bienvenido a mi sitio web</h2>
<p>Este es el contenido principal de mi sitio web.</p>
</main>
<aside class="sidebar" id="sidebar-1" style="background-color: lightgray; padding: 20px;" title="Información adicional">
<h3>Artículos relacionados</h3>
<ul>
<li><a href="#">Artículo 1</a></li>
<li><a href="#">Artículo 2</a></li>
<li><a href="#">Artículo 3</a></li>
</ul>
</aside>
<footer>
<p>© 2023 Mi sitio web</p>
</footer>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se muestra una estructura básica de una página web que incluye un encabezado, una navegación, un contenido principal y un elemento <aside> en la parte derecha de la página.
El atributo class se utiliza para especificar la clase CSS “sidebar” para el elemento <aside>, mientras que el atributo id se utiliza para especificar un identificador único para el elemento.
El atributo style se utiliza para especificar estilos CSS inline para el elemento, y el atributo title se utiliza para proporcionar información adicional sobre el elemento.
Además de estos atributos, la etiqueta <aside> es compatible con los atributos globales de HTML, como lang, dir, accesskey, entre otros.
Ejemplo:
Aquí tienes otro ejemplo de código HTML que incluye los atributos lang, dir y accesskey en la etiqueta <aside>:
<aside lang="es" dir="ltr" accesskey="s" class="sidebar" id="sidebar-1" style="background-color: #f2f2f2; padding: 20px;">
<h3>Información adicional</h3>
<p>Esta es una sección lateral con información adicional sobre el tema principal de la página.</p>
</aside>
Lenguaje del código: HTML, XML (xml)- lang: Este atributo permite especificar el idioma del contenido dentro de la etiqueta <aside>. En este caso, se estableció el idioma como español.
- dir: Este atributo permite especificar la dirección del texto dentro de la etiqueta <aside>. En este caso, se estableció la dirección del texto como “ltr” (izquierda a derecha).
- accesskey: Este atributo permite establecer una tecla de acceso rápido para el elemento. En este caso, se estableció la tecla de acceso rápido como “s”. Esto permite a un usuario acceder a la sección lateral presionando la tecla “Alt + s” en un teclado.
Más ejemplos
Aquí hay algunos ejemplos de cómo se puede utilizar la etiqueta <aside> en HTML5:
- Barra lateral con información adicional:
<aside>
<h3>Información adicional</h3>
<p>Aquí puedes encontrar más información sobre el tema del artículo.</p>
<ul>
<li><a href="#">Enlaces relacionados</a></li>
<li><a href="#">Recursos adicionales</a></li>
</ul>
</aside>
Lenguaje del código: HTML, XML (xml)- Bloque con citas o testimonios:
<aside>
<h3>Testimonios</h3>
<blockquote>
<p>"Este producto ha cambiado mi vida."</p>
<footer>John Doe</footer>
</blockquote>
<blockquote>
<p>"No podría estar más contento con mi compra."</p>
<footer>Jane Doe</footer>
</blockquote>
</aside>
Lenguaje del código: HTML, XML (xml)- Widget de redes sociales:
<aside>
<h3>Síguenos en nuestras redes sociales</h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</aside>
Lenguaje del código: HTML, XML (xml)En cada uno de estos ejemplos, la etiqueta <aside> se utiliza para marcar contenido secundario que está relacionado con el contenido principal del documento, pero que puede ser considerado independiente.