Ir ao conteúdo
  • Cadastre-se

HTML alguém me dá uma explicação dessas tags?


Ir à solução Resolvido por Marcelo Calazans,

Posts recomendados

<div>,< aside>,< footer>, <section> e <header>.

Estou estudando HTML básico e já passei da explicação dessa parte, mas não entendi, está difícil entender quando usar cada um desse de forma "totalmente correta". alguém pode dar um resumo bem pequeno para cada uma?

Link para o comentário
Compartilhar em outros sites

<div> é a tag de divisão, ela serve pra organizar seus elementos de modo separado, mas não tem um significado geral. Geralmente você vai ver divs acompanhados de style ou class para formatar partes separadas da página.

<aside> é usada quando o elemento não é diretamente relacionado ao conteúdo atual da página, pode ser uma informação extra ou curiosidade, por exemplo.

<section> significa que os elementos são relacionados entre si e estão agrupados.

<footer> é a ultima parte do documento, onde ficam as informações que devem aparecer na maioria das páginas, como direitos autorais, contato, etc (você pode ver aqui mesmo no CDH, onde tem a seção "Sobre o Clube do Hardware" no final da página.

<header> é o cabeçalho, onde ficam informações como o navbar (barra de navegação), título do site, etc.

Espero que tenha sido claro, se tiver mais duvidas só perguntar.

Link para o comentário
Compartilhar em outros sites

Em 26/07/2021 às 21:30, Kamuri disse:

<div> é a tag de divisão, ela serve pra organizar seus elementos de modo separado, mas não tem um significado geral. Geralmente você vai ver divs acompanhados de style ou class para formatar partes separadas da página.

<aside> é usada quando o elemento não é diretamente relacionado ao conteúdo atual da página, pode ser uma informação extra ou curiosidade, por exemplo.

<section> significa que os elementos são relacionados entre si e estão agrupados.

<footer> é a ultima parte do documento, onde ficam as informações que devem aparecer na maioria das páginas, como direitos autorais, contato, etc (você pode ver aqui mesmo no CDH, onde tem a seção "Sobre o Clube do Hardware" no final da página.

<header> é o cabeçalho, onde ficam informações como o navbar (barra de navegação), título do site, etc.

Espero que tenha sido claro, se tiver mais duvidas só perguntar.

ótima explicação, mesmo assim ainda tenho duvidas, o que não entendi é qual o diferencial de cada tag? Pelo que tentei até agora nenhum deles tem impacto visual sem usar css ou js, e a mesma configuração pega para todos. Por exemplo, eu tentei trocar tudo por <div> em todas as partes, e funcionou igual antes, então se tudo funciona, como sei que estou usando cada um em seu "lugar certo"? esses nomes diferentes são apenas para identificação mesmo?

Link para o comentário
Compartilhar em outros sites

  • Solução

@Swalls

Desculpe me intrometer no assunto, mas queria dar uma opinião.

 

<article> <aside> <details> <figcaption> <figure> <footer> <header>


Esses acima, são Elementos Semânticos em HTML.


O programador ou desenvolvedor é uma pessoa “as vezes desleixada”, e digo isso porque eu fui assim por muito tempo.


É comum vermos códigos totalmente desorganizados e sem padrão.


Os Elementos Semânticos em HTML foram criados para “disciplinar” um pouco o desenvolvedor, e convence-lo a criar códigos mais organizados.


Um elemento semântico, pode descrever claramente seu significado para o navegador, para outros desenvolvedores e para os motores de busca.


Algumas pessoas citam que quando os Elementos Semânticos em HTML são usados de maneira correta, isso ajuda o SEO do site e colabora com a classificação dele na busca do Google, pois facilita o entendimento da página. ( https://searchengineland.com/seo-advantages-of-machine-readable-html5-semantic-markup-314455 )

 

Referência geral abaixo:
https://www.w3schools.com/html/html5_semantic_elements.asp

 

<div class="header">
     <!-- Conteúdo -->
</div>

<header>
     <!-- Conteúdo -->
</header>

 

No exemplo acima, ambos os casos vão funcionar, mas devemos procurar usar sempre os Elementos Semânticos em HTML.

 

Abraços e espero ter colaborado.

  • Amei 1
Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Redes-Wi-Fi-capa-3d-newsletter.png

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!