Dominando a Tag Aside do HTML5

Introdução

Neste laboratório passo a passo, você aprenderá como usar a tag <aside> do HTML. Esta tag é usada para mostrar conteúdo que está relacionado ao conteúdo principal, mas não é essencial para ele.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Configurando a página HTML

Abra seu editor de código e crie um novo arquivo chamado index.html, em seguida, adicione a seguinte estrutura HTML básica:

<!doctype html>
<html>
  <head>
    <title>Tutorial da Tag HTML Aside</title>
  </head>
  <body></body>
</html>

Criando o conteúdo principal

Dentro da tag <body>, vamos criar algum conteúdo principal. Adicione o seguinte código:

<h1>Bem-vindo ao meu blog!</h1>
<p>
  Neste artigo, exploraremos os benefícios de usar HTML5. HTML5 é uma linguagem
  de marcação (markup language) usada para estruturar e apresentar conteúdo na
  World Wide Web.
</p>

Adicionando o conteúdo aside

Agora, vamos adicionar uma tag <aside> que conterá algumas informações adicionais sobre o conteúdo principal. Adicione este código abaixo do parágrafo no passo 2:

<aside>
  <h2>Sobre este artigo</h2>
  <p>
    Este artigo foi escrito por John Doe, um desenvolvedor web que trabalha na
    indústria há mais de 8 anos. Ele é apaixonado por desenvolvimento web e
    adora compartilhar seu conhecimento com os outros.
  </p>
</aside>

Ao adicionar o código acima, criamos uma tag <aside> que contém algumas informações sobre o artigo. Essa informação está relacionada ao conteúdo principal, mas não é essencial para ele.

Estilizando a tag

Agora, adicione o seguinte CSS para dar algum estilo à tag <aside>:

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

Ao adicionar este CSS, demos algum estilo à tag <aside>. A largura (width) é definida como 300px, a margem (margin) é definida como 30px, e ela tem um fundo cinza claro com uma borda.

Adicionando conteúdo adicional ao artigo

Vamos adicionar mais conteúdo ao artigo para que possamos visualizar melhor como as tags <aside> são usadas. Adicione o seguinte código abaixo da tag <aside>:

<p>
  HTML5 é uma atualização importante para a linguagem HTML. Ele oferece novos
  recursos e funcionalidades, tornando mais fácil para os desenvolvedores
  criarem páginas web e aplicativos. Alguns dos novos recursos no HTML5 incluem:
</p>
<ul>
  <li>Novas tags semânticas como header, footer, article e section</li>
  <li>Suporte aprimorado para multimídia com as tags video e audio</li>
  <li>Melhor acessibilidade com as tags nav e main</li>
</ul>

Ao adicionar o código acima, adicionamos conteúdo adicional ao artigo principal. Ele contém uma lista não ordenada com algumas informações sobre HTML5.

Resumo

Neste laboratório passo a passo, aprendemos como usar a tag HTML <aside> para adicionar conteúdo adicional relacionado ao conteúdo principal de uma página web. Também aprendemos como adicionar algum estilo à tag usando CSS. Usar a tag <aside> ajuda os mecanismos de busca (search engines) e navegadores web a entender qual conteúdo é essencial e qual não é essencial.

Conteúdo HTML Aside