Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] tag NAV

Quais as principais diferenças entre as tags <nav> <div> <a> ?

1 resposta
solução!

Oi, Anthony, tudo bem?

A tag <nav> que representa uma seção de navegação no HTML é responsável por definir um conjunto de links de navegação, ou seja, ela representa uma divisão que aponta para diferentes páginas ou áreas de navegação do próprio site. Como exemplo, usamos uma tag <nav>no projeto deste curso para criar a seção de menu do cabeçalho:

 <header>
        <nav>
            <a href="index.html">Home</a>
            <a href="about.html">Sobre mim</a>
        </nav>
    </header>

A tag de ancoragem<a> é usada para vincular uma página a outra utilizando o atributo href que indica o caminho de destino do link criado. Como exemplo, temos no projeto deste curso dentro da tag <header>, no interior da tag <nav>o uso da tag <a> para definir caminhos de outras páginas que compõem o site como a "Home" e a "Sobre mim" :

<a href="index.html">Home</a>
<a href="about.html">Sobre mim</a>

Outro exemplo do uso desta tag dentro do projeto deste curso, está nos botões que redirecionam o usuário para as páginas das redes sociais:

<a class="apresentacao__links__link" href="https://github.com/rafaballerini">
<img src="./assets/github.png">Github</a>
<a class="apresentacao__links__link" href="https://linkedin.com/in/rafaellaballerini">
<img src="./assets/linkedin.png"> linkedin</a>
<a class="apresentacao__links__link" href="https://twitch.tv/guilimadev">
<img src="./assets/twitch.png">Twitch</a>

Já a tag <div> representa uma divisão ou seção no documento HTML, sem que haja nenhuma especificidade para os elementos colocados dentro dela, ou seja, ela atua como um contêiner genérico para agrupar os elementos do HTML. Um exemplo do uso desta tag está representado abaixo:

<div >
  <h1>Este é um título</h1>
  <p>Este é um parágrafo</p>
</div>

Para conhecer mais sobre as tags mencionadas acima e muitas outras deixo aqui dois artigos da Alura que explicam sobre elementos inline e block-level :

Espero ter ajudado. Caso tenha outras dúvidas, estarei à disposição.

Abraços !

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!