Dominando la Etiqueta Aside de HTML5

Introducción

En este laboratorio paso a paso, aprenderá a usar la etiqueta <aside> de HTML. Esta etiqueta se utiliza para mostrar contenido que está relacionado con el contenido principal pero que no es esencial para él.

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

Configurando la página HTML

Abra su editor de código y cree un nuevo archivo llamado index.html, luego agregue la siguiente estructura básica de HTML:

<!doctype html>
<html>
  <head>
    <title>Tutorial de la etiqueta HTML Aside</title>
  </head>
  <body></body>
</html>

Creando el contenido principal

Dentro de la etiqueta <body>, vamos a crear un poco de contenido principal. Agregue el siguiente código:

<h1>Bienvenido a mi blog!</h1>
<p>
  En este artículo, exploraremos las ventajas de usar HTML5. HTML5 es un
  lenguaje de marcado utilizado para estructurar y presentar contenido en la
  World Wide Web.
</p>

Agregando el contenido aside

Ahora agreguemos una etiqueta <aside> que contendrá información adicional sobre el contenido principal. Agregue este código debajo del párrafo del paso 2:

<aside>
  <h2>Sobre este artículo</h2>
  <p>
    Este artículo fue escrito por John Doe, un desarrollador web que lleva más
    de 8 años trabajando en la industria. Está apasionado por el desarrollo web
    y le encanta compartir su conocimiento con los demás.
  </p>
</aside>

Al agregar el código anterior, hemos creado una etiqueta <aside> que contiene información sobre el artículo. Esta información está relacionada con el contenido principal, pero no es esencial para él.

Dar estilo a la etiqueta

Ahora agregue el siguiente CSS para dar un estilo a la etiqueta <aside>:

<style>
  aside {
    width: 300px;
    margin-left: 30px;
    padding: 10px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
  }
</style>

Al agregar este CSS, le hemos dado un estilo a la etiqueta <aside>. El ancho se establece en 300px, el margen en 30px y tiene un fondo gris claro con un borde.

Agregando contenido adicional al artículo

Vamos a agregar más contenido al artículo para poder visualizar mejor cómo se usan las etiquetas <aside>. Agregue el siguiente código debajo de la etiqueta <aside>:

<p>
  HTML5 es una actualización importante del lenguaje HTML. Ofrece nuevas
  características y funcionalidades, lo que hace que sea más fácil para los
  desarrolladores crear páginas web y aplicaciones. Algunas de las nuevas
  características en HTML5 incluyen:
</p>
<ul>
  <li>Nuevas etiquetas semánticas como header, footer, article y section</li>
  <li>Mejora el soporte para multimedia con las etiquetas video y audio</li>
  <li>Mejora la accesibilidad con las etiquetas nav y main</li>
</ul>

Al agregar el código anterior, hemos agregado contenido adicional al artículo principal. Contiene una lista no ordenada con información sobre HTML5.

Resumen

En este laboratorio paso a paso, aprendimos cómo usar la etiqueta HTML <aside> para agregar contenido adicional relacionado con el contenido principal de una página web. También aprendimos cómo agregar un poco de estilo a la etiqueta usando CSS. Usar la etiqueta <aside> ayuda a los motores de búsqueda y los navegadores web a entender qué contenido es esencial y qué no es esencial.

Contenido Adicional en HTML