Neste artigo você vai aprender de uma vez por todas quando usar h1, o heading principal das páginas web!
Fala programador, beleza? Bora aprender coisa nova!
Bom, então vamos lá: o tema deste artigo é muito teórico, pois há um grande propósito por trás dos headings, além de quando usar o h1
O que não faz diferença
Se você utiliza os headings apenas por causa do tamanho da fonte, saiba que isso não importa na verdade
Você pode fazer a alteração da fonte de qualquer elemento pelo CSS com a propriedade font-size
Dica: Toda e qualquer alteração de estilo nas tags do HTML, devem ser guiadas pelo CSS
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
O que faz a diferença
O Google utiliza os headings para ler e entender a página, então temos a entrada de um termo bem falado no mundo da programação web: SEO e de outro que vem de brinde: HTML semântico
SEO: vem de Search Engine Optimization, ou seja, um ‘score’ que melhora a posição da sua página no Google;
HTML semântico: utilizar as tags de acordo com o propósito que elas foram criadas;
Dito isso, utilizamos a tag h1 para definir o conteúdo principal apresentado da página, como um título principal e uma só vez por página (essa é uma recomendação, não uma regra)
Claro que não há um limite, porém deixar a página simples e organizada pode favorecer uma análise mais precisa dela pelo Google
Consequentemente deixará o seu HTML mais semântico, seguindo as boas práticas de desenvolvimento, ou seja, outros desenvolvedores lerão seu código melhor
E por consequência aumenta o seu SEO, os dois conceitos estão de mãos dadas
Outros headings
Outro detalhe importante é que o ranking de h1 para h6, deve ser mantido
Ou seja, em grau de importância utilize h1 para o assunto mais importante e h6 para o menos relevante para a página
Tente também não pular de headings!
Por exemplo: de h1 para h4
E também não se preocupe em utilizar todos os headings, a maioria das páginas chegam no máximo ao h3
Obs: Isso também não é requirido nem pelo Google e nem pelo W3C.
Também é importante citar que os headings, a partir do h2, não possuem um ‘limite’ de uso
Por exemplo: utilize h1 para o assunto principal, uma só vez, e vários h2 para os subtópicos/seções (como é feito neste blog 😀 )
A tag title no head e o h1
Faça uso dessa tag, pois é muito importante para o SEO, porém devemos observar a relação dela com o título principal do body (o h1)
Evite repetir a tag title no head igual ao h1 da sua página
Essa repetição pode ser mal vista aos olhos do SEO, pois seria uma ‘tentativa de burlar’ o mecanismo, forçando uma repetição de conteúdo para tentar deixar a sua página com mais evidência
No h1: seja direto ao ponto da página
No title: trabalhe uma pequena frase com o contexto da página/artigo
Por exemplo:
- <h1>O melhor blog do mundo sobre Star Wars</h1>
- <title>No melhor blog do mundo sobre Star Wars, você encontra toda a explicação da saga</title>
Conclusão
Neste artigo vimos quando usar o h1 e para o que ele realmente serve e também algumas nuances entre os headings e a tag title
As propriedades de estilo referente aos elementos do HTML devem ser todas alteradas via CSS
E a real importância dos headings é guiar o Google no que apresentamos na nossa página
E por hoje é isso, até o próximo post! 🙂
Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo
