Como usar o aside do HTML?
Aprenda como usar corretamente a tag HTML aside através de um exemplo simples e prático de layout com sidebar.
PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO
A tag <aside> do HTML deve ser usada para criar uma seção em uma página web
com conteúdo não necessariamente relacionado com o principal, algo totalmente separado do contexto.
▶ Se preferir, acesse "Como usar o aside do HTML" no YouTube.
Um ótimo exemplo da utilização de <aside> é para criar uma barra lateral com propagandas,
conhecida como sidebar.
Além disso, pode ser usada para biografia do autor, grupos de elementos de navegação externa, pull quotes e outros conteúdos considerados
separados do principal da página.
Importante destacar que o elemento <aside> não é renderizado de forma diferente no navegador.
O comportamento padrão é display:block como um header, section, e outros elementos do HTML semântico. A formatação
visual deve ser feita com CSS.
O HTML semântico tem como objetivo deixar o código HTML de uma página com mais significado.
Por exemplo, quando um robô (ex: Google Bot) faz a leitura do código, ele procura "entender" o conteúdo.
Ao encontrar um <aside>, ele vai saber que é algo separado ou vagamente relacionado com o conteúdo principal,
e isso não aconteceria com um div comum.
Seguem alguns pontos importantes sobre o elemento <aside>:
- Não use para texto entre parênteses
- Não use como descendente de um elemento
address - Você pode usar mais de um
<aside>em uma página - Não tem renderização especial no navegador
Confira a seguir o código HTML e CSS completo do exemplo anterior:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tag HTML aside</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<style>
* {box-sizing: border-box;}
body {font-family: Arial, Helvetica, sans-serif;}
.header {background-color: #f1f1f1;padding: 30px;text-align: center;font-size: 35px;}
.row {display: -webkit-flex;display: flex;}
.column {padding: 10px;}
.column.side {-webkit-flex: 1;-ms-flex: 1;flex: 1;}
.column.middle {-webkit-flex: 2;-ms-flex: 2;flex: 2;}
.footer {background-color: #f1f1f1;padding: 10px;text-align: center;}
p{margin:0}
.banner{padding:15px;background-color:red;margin-bottom:5px;}
aside div{position:sticky;top:10px;}
@media (max-width: 600px) {.row {-webkit-flex-direction: column;flex-direction: column;}}
</style>
</head>
<body>
<header class="header">
<h1>Header</h1>
</header>
<main class="row">
<div class="column side" style="background-color:#aaa;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur augue a quam mollis, id tempus est consequat. Curabitur id imperdiet neque. Vivamus volutpat odio eget quam tincidunt commodo. Mauris lobortis, quam et mollis cursus, dui urna consectetur lacus, vel vulputate diam mauris vitae dui. Sed ultricies nisl dui, vel vulputate magna mollis eu. Maecenas sit amet purus in lorem consequat cursus quis ac leo. Vivamus hendrerit ipsum nibh, vitae eleifend ipsum aliquam quis. Cras vel commodo lorem. Nam luctus odio convallis dui feugiat, ut posuere justo volutpat. Curabitur at vehicula dolor, quis convallis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur augue a quam mollis, id tempus est consequat. Curabitur id imperdiet neque. Vivamus volutpat odio eget quam tincidunt commodo. Mauris lobortis, quam et mollis cursus, dui urna consectetur lacus, vel vulputate diam mauris vitae dui. Sed ultricies nisl dui, vel vulputate magna mollis eu. Maecenas sit amet purus in lorem consequat cursus quis ac leo. Vivamus hendrerit ipsum nibh, vitae eleifend ipsum aliquam quis. Cras vel commodo lorem. Nam luctus odio convallis dui feugiat, ut posuere justo volutpat. Curabitur at vehicula dolor, quis convallis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur augue a quam mollis, id tempus est consequat. Curabitur id imperdiet neque. Vivamus volutpat odio eget quam tincidunt commodo. Mauris lobortis, quam et mollis cursus, dui urna consectetur lacus, vel vulputate diam mauris vitae dui. Sed ultricies nisl dui, vel vulputate magna mollis eu. Maecenas sit amet purus in lorem consequat cursus quis ac leo. Vivamus hendrerit ipsum nibh, vitae eleifend ipsum aliquam quis. Cras vel commodo lorem. Nam luctus odio convallis dui feugiat, ut posuere justo volutpat. Curabitur at vehicula dolor, quis convallis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur augue a quam mollis, id tempus est consequat. Curabitur id imperdiet neque. Vivamus volutpat odio eget quam tincidunt commodo. Mauris lobortis, quam et mollis cursus, dui urna consectetur lacus, vel vulputate diam mauris vitae dui. Sed ultricies nisl dui, vel vulputate magna mollis eu. Maecenas sit amet purus in lorem consequat cursus quis ac leo. Vivamus hendrerit ipsum nibh, vitae eleifend ipsum aliquam quis. Cras vel commodo lorem. Nam luctus odio convallis dui feugiat, ut posuere justo volutpat. Curabitur at vehicula dolor, quis convallis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur augue a quam mollis, id tempus est consequat. Curabitur id imperdiet neque. Vivamus volutpat odio eget quam tincidunt commodo. Mauris lobortis, quam et mollis cursus, dui urna consectetur lacus, vel vulputate diam mauris vitae dui. Sed ultricies nisl dui, vel vulputate magna mollis eu. Maecenas sit amet purus in lorem consequat cursus quis ac leo. Vivamus hendrerit ipsum nibh, vitae eleifend ipsum aliquam quis. Cras vel commodo lorem. Nam luctus odio convallis dui feugiat, ut posuere justo volutpat. Curabitur at vehicula dolor, quis convallis enim.</p>
</div>
<div class="column middle" style="background-color:#bbb;"><p>Column</p></div>
<aside class="column side" style="background-color:#aaa;">
<div>
<div class="banner">Banner 1</div>
<div class="banner">Banner 2</div>
<div class="banner">Banner 3</div>
</div>
</aside>
</main>
<footer class="footer">
<p>Footer</p>
</footer>
</body>
</html>O código HTML cria um layout básico para página web com uma sidebar usando <aside>. A formatação CSS
usou Flex para criar o layout e a sidebar fica fixa com o rolar da tela. Além disso, tem um pequeno código
de media query para deixar o layout responsivo.
Então é isso, eu espero que você tenha gostado desta publicação. Fique à vontade para compartilhar nas suas redes sociais para ajudar na divulgação e crescimento do site.
Aproveite para se inscrever no meu canal do YouTube e também na News do site pra ficar por dentro das novidades em artigos, tutoriais e cursos online.
Abraço e até a próxima!
