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

[Swalls]

<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?

[Kamuri]

<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.

[Swalls]

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?

[Marcelo Calazans]

@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.