En este artículo, discutiremos sobre la etiqueta <aside> en HTML .
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.
Etiqueta HTML <aside> vs Etiqueta HTML <div>: Ambas etiquetas tienen el mismo comportamiento con un significado diferente.
- <div> : Define o crea división o sección en la página web.
- <aside> : Hace el mismo trabajo al crear una sección o división pero contiene solo el contenido relacionado con la página web principal.
La etiqueta <aside> facilita el diseño de la página y mejora la claridad de los documentos HTML. Nos permitió reconocer fácilmente el texto principal y el texto subordinado. La etiqueta <aside> admite atributos globales y atributos de eventos en HTML.
Nota : la etiqueta <aside> es nueva en HTML5. Esta etiqueta no representa nada especial en un navegador. El desarrollador necesita usar CSS para eso.
Sintaxis:
<aside> <h1>Contents...</h1> <p>Contents...</p> </aside>
Ejemplo 1: El siguiente ejemplo muestra la etiqueta HTML <aside>.
HTML
<!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h2>HTML aside Tag</h2> <h1>This is normal heading Tag</h1> <p>This is normal paragraph text</p> <aside> <h1>This is heading text in aside Tag</h1> <p>This is paragraph text in aside Tag</p> </aside> </body> </html>
Producción:
Ejemplo 2: Lo siguiente usa el estilo en la etiqueta HTML <aside>.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
article {
width: 50%;
padding: 10px;
float: left;
}
aside {
width: 40%;
float: right;
background-color: green;
color: white;
padding: 5px;
margin: 10px;
height: 100px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<article>
<h1>Heading . . .</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:
Publicación traducida automáticamente
Artículo escrito por sravankumar8128 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA