HTML footer

HTML footer – Como e quando usar footer no html5

O elemento footer marca a área inferior, normalmente conhecida como rodapé do conteúdo geral do documento.

No footer pode conter um cabeçalho próprio com bloco de navegação que apontam para informações como:

Nome do autor, Links de Redes Sociais, Links de Paginas, e Copyright.

Veja na prática:

<footer>
  
  <div class="col-2">
     
     <h3>Menu</h3>
     
     <ul>
       <li><a href="#">Sobre</a></li>
       <li><a href="#">Artigos</a></li>
       <li><a href="#">Categorias</a></li>
       <li><a href="#">Contato</a></li>
     </ul>
  
  </div> 
  
  <div class="col-2">

     <h3>Redes Sociais</h3> 
      <ul>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Instagram</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Youtube</a></li>
      </ul>

  </div>

  <p>Loop Nerd - Todos os Direitos Reservados.</p> 

</footer>

Definição e Uso do Footer !

A tag <footer> define um rodapé para um documento ou seção.

Um elemento <footer> normalmente contém:

• Informações sobre direitos autorais
• Informações de Contato
• Mapa do site
• voltar aos links principais
• Documentos relacionados
• Link de Redes Sociais

Veja o Exemplo na pratica!

Footer Completo com varias informações.

<footer class="main_footer container">
    
    <div class="content">

        <div class="colfooter">
            
            <h3 class="titleFooter"> Menu</h3>
            
            <ul>
            
              <li><a href="#" title="Página Inícial">Página Inícial</a></li>
              <li><a href="#" title="Sobre a Empresa">Sobre a Empresa</a></li>
              <li><a href="#" title="Galeria de Fotos">Galeria de Fotos</a></li>
              <li><a href="#" title="Fale Conosco">Fale Conosco</a></li>
            
            </ul>

        </div><!--Col Footer 1-->        

        <div class="colfooter">
           
           <h3 class="titleFooter"> Contato</h3>
           <p><i class="icon icon-mail"></i> contato@seusite.com.br</p>
           <p><i class="icon icon-phone"></i> 21 90000-0000</p>
           <p><i class="icon icon-whatsapp"></i> 21 90000-0000</p>

        </div><!--Col Footer 2-->

        <div class="colfooter">
           
           <h3 class="titleFooter"> Redes Sociais</h3>
            
           <a href="#" class="botao"><span> <i class="icon icon-facebook"></i> </span></a>            
           <a href="#" class="botao"><span> <i class="icon icon-instagram"></i> </span></a>            
           <a href="#" class="botao"><span> <i class="icon icon-twitter"></i> </span></a>            
           <a href="#" class="botao"><span> <i class="icon icon-pinterest"></i> </span></a>            

        </div><!--Col Footer 3-->


        <div class="clear"></div>
    
    </div><!--Contant-->

    <div class="main_footer_copy">
        
        <p class="m-b-footer"> Seusite - 2022, todos os direitos reservados.</p> 
        <p class="by"><i class="icon icon-heart-3"></i> Desenvolvido por: <a href="#" title="Seu nome">Seu nome aqui</a></p>
    
    </div>

</footer>

Veja mais Sobre Footer estilizado com Css aqui neste dois artigos

Footer Html css – Clean

Footer Responsivo – html e css