HTML5 Semântica


(Olivério Neto) #1

Pessoal, ando assistindo cursos de escolas online diferentes e me restou uma dúvida quanto a semântica do HTML5. Vou ser bem direto:

Eu posso usar mais de uma vez a tag h1, portanto que seja em tags semântica diferente? header, nav, aside, section, article, footer? Ou o correto é APENAS uma tag h1 por página mesmo?

Ah, e o mesmo serve pra h2?


(Luan Maik) #2

Você pode utilizar apenas um H1 por seção (se vc pegar um livro verá que não existe mais de um título nele) e até quatro H2 (talvez mais, acredito não haver um número correto) dentro de cada seção:

<section>
    <h1>Título da minha sessão</h1>
       <h2>Subtítulo da minha sessão</h2>
           <h3>Subtítulo  da minha sessão</h3>
       <h2>Subtítulo da minha sessão</h2>
</section>

O detalhe é vc criar uma estrutura lógica.
No caso das tags H (h1, h2, etc) é necessário criar uma estrutura como se fosse um menu, aonde o H1 é o título do menu, o H2 são os itens no primeiro nível do menu e o H3 em terceiro nível, e por assim vai.
Sobre o resto, deve-se conhecer as tags necessárias para o motor de busca conseguir identificar quem é o título, o texto, quais são os pontos importantes do texto, a imagem, a descrição, etc, da página.

Importante
Não querendo mitificar o assunto, mas grandes sites de notícias não são semânticos e mesmo assim ocupam a primeira página do google, isso mostra que a semântica não é a única chave que define a importância do seu site entre os demais.


(Olivério Neto) #3

Valeu pela resposta, Luan. Deixa eu tentar esclarecer as dúvidas. Vamo lá!

Apenas um H1 por seção ou por semântica, no caso?


(Luã Ciceri Schwertner) #4

O guideline do google e do pessoal de SEO é apenas um H1 por página... Se for uma lista, o seu H1 deve remeter a isso, e aí, depois do H1, você usa os H2 e assim sucessivamente. É também bem importante usar as tags corretamente, seguindo a hierarquia, nunca usando na sua página um h1 e posterior um h3 sem existir h2.

O Google fala que em raros casos deve-se usar vários H1s. Quando há, por exemplo, varias secoes, colocando ele dentro da tag corretamente. Só que usar dessa forma pode ser um problema para a acessibilidade, um exemplo são os softwares para deficientes visuais que hoje não conseguem fazer essa análise da situação.

Tem um vídeo bem legal que o pessoal do Google fala sobre esse assunto.

Sobre a parte da acessibilidade tem essa podcast do pessoal do Alura que dá várias dicas e aborda essa situação.


(Olivério Neto) #5

Era exatamente essa a minha dúvida, porque já vi alguns instrutores de curso colocando um h1 por cada tag semântica. Outros, preferem usar um h1 por pagina. Cada um que diga uma coisa.

Vou assisti esse vídeo da Google e o podcast da Alura pra ver se tira minha dúvida de vez.

Valeu, Iciceris!


(Olivério Neto) #6

lciceris,

Tou terminando de ouvi o podcast do pessoal da Alura, muito bom, tirou minhas dúvidas!

Ele falou exatamente sobre isso: usar apenas um h1 por página e nunca pular a hierarquia dos h's. Mas, surgiu outra dúvida:

Pode usar mais de um h2 por página, em diferentes semântica HTML5?


(Luã Ciceri Schwertner) #7

Pode sim e é até bem bacana colocar mais de um h2 se for possível no seu texto. Só tome cuidado para não jogar muitos, jogue nos h2 as palavras-chave dos elementos da ideia principal do seu texto.
É necessário que a página só tenha um H1, no entanto os outros podem ser repetidos, mas desde que não pule de H2 para H6 e volta H4, criando algo confuso e quebrando com a hierarquia correta.
Segue um exemplo:

<h1> Moto G4 Plus</h1>
<h2>Vantagens do Moto G4 PLUS sobre outros celulares</h2>
     informação relevante
     informação relevante
 <h3>Aplicativos para Moto G4 Plus</h3>
     informação relevante
 <h3>Câmera de 18MP</h3>
     informação relevante
 <h2>As novidades do sistema operacional Android</h2>
     informação relevante
     informação relevante

(Olivério Neto) #8

Sim, entendi. Mas em semânticas diferente pode, né?

Tipo, em uma outra semântica eu posso voltar a usar o h2, h3, etc?


(Luã Ciceri Schwertner) #9

Trabalhe com as tags de cabeçalho por página, não por semântica.Desde que não seja o H1, você pode repetir sim, independente de estar dentro de alguma tag ou não. Só tome os cuidados que falei acima.


(Olivério Neto) #10

Entendi!

Eu uso o plugin outline do Chrome pra poder ver como está a organização das tags. Conhece esse plugin?


(Luã Ciceri Schwertner) #11

Não conhecia não, bem bacana a ideia.