La etiqueta <aside> se utiliza para describir el objeto principal de la página web de forma más breve, como un resaltador. Básicamente, identifica el contenido relacionado con el contenido principal de la página web, pero no constituye la intención principal de la página principal. La etiqueta <aside> contiene principalmente información del autor, enlaces, contenido relacionado, etc.
La etiqueta <aside> facilita el diseño de la página y mejora la claridad del documento HTML. Nos permitió reconocer fácilmente el texto principal y el texto subordinado. Tanto en el tiempo <div> como en <aside> necesitan CSS para un diseño específico. La etiqueta <aside> admite atributos globales y atributos de evento en HTML.
Sintaxis:
<aside>
<h3>Contents...</h3>
<p>Contents...</p>
</aside>
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
color: #090;
font-weight: bold;
}
p {
font-size: 20px;
margin: 20px 0;
}
</style>
</head>
<body>
<aside>
<h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
</aside>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.gfg {
font-size: 40px;
color: #090;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
article {
width: 50%;
float: left;
padding: 10px;
float: left;
}
aside {
float: right;
width: 40%;
float: right;
background-color: green;
color: white;
padding: 5px;
margin: 10px;
height: 100px;
}
</style>
</head>
<body>
<div class="gfg">
GeeksforGeeks
</div>
<article>
<h1>Article Title</h1>
<p>
Aside tag is use to display
important information
about the primary page.
</p>
</article>
<aside>
<h1>Aside Tag Example</h1>
<p>Aside tag content. . .</p>
</aside>
</body>
</html>
Producción:
