Método 1: Faz sentido?
<span class="heading">Título do artigo</span>
Embora <span> possa ser uma tag conveniente em algumas situações, ela não transmite todo o significado do título. Uma vantagem de usar este método é que podemos anexar uma regra CSS a ele e atribuir-lhe uma classe de título para fazer seu texto parecer um título.
.cabeçalho {
tamanho da fonte: 24px;
peso da fonte: negrito;
cor: azul;
}
OK, agora todos os títulos estão marcados com a classe de título em fonte grande, em negrito e em azul. maravilhoso! Mas será esta a coisa certa a fazer? O que acontece se alguém visualizar com um navegador que não suporta CSS?
Por exemplo, o que acontece se as regras da folha de estilo externa que definimos não forem suportadas por versões mais antigas de navegadores? Ou e se alguém com deficiência visual usar um leitor de tela para ler esta página? O que um visitante vê (ou ouve) por meio desses meios não deve ser diferente do texto normal da página.
Embora class="heading" adicione um pouco de significado à tag, <span> ainda é apenas uma tag comum que pode ser modificada pelo estilo padrão da maioria dos navegadores.
Os motores de busca irão ignorar a tag <span> ao rastrear esta página, como se ela não existisse, e não darão nenhuma atenção extra às palavras-chave que ela possa conter. Falaremos mais sobre a relação entre motores de busca e títulos posteriormente.
Finalmente, como a tag <span> é um elemento embutido, podemos precisar aninhá-la dentro de um elemento adicional no nível do bloco, como uma tag <p> ou uma tag <div>, para formar uma linha separada , o que sobrecarregará ainda mais suas tags com códigos desnecessários. Essas tags adicionais são necessárias para que navegadores que não suportam CSS possam exibir o mesmo texto.
Método 2: combinação de <p> e <b>
<p><b>Título do artigo</b></p>
Usar uma tag de parágrafo nos dará uma exibição em nível de bloco e <b> deixará o texto em negrito. Mas ao usar este método para marcar um título importante, nos deparamos com os mesmos resultados sem sentido.
Ao contrário do método A, a tag <b> pode deixar o texto em negrito em navegadores visuais, mesmo em navegadores que não suportam CSS. Mas, assim como a tag <span>, os mecanismos de pesquisa não darão maior prioridade só porque algo está em negrito em um parágrafo.
Difícil de estilizar
Usar a combinação comum de <p> e <b> também traz outra deficiência - é impossível projetar este título para ser diferente de outros parágrafos. Podemos querer usar um estilo especial para destacar o título e tornar o conteúdo da página mais claro e estruturado, mas esse método só pode fazer com que pareça em negrito.
Método 3: estilo mais substância
<h1>Título do artigo</h1>
Bem, que ótima definição de título. A maioria dos web designers está familiarizada com isso. Na verdade, quando usado apropriadamente, <Hn> pode fornecer uma estrutura flexível, indexável e estilizável para o conteúdo da página.
Essa também é uma maneira inteligente de defini-lo e você descobrirá que é bastante simples. Nenhuma tag extra é mais necessária, e você poderia argumentar que isso salva apenas um pouquinho mais de bytes do que os outros dois métodos, o que é insignificante, mas uma economia conta.
<h1> a <h6> representam seis níveis de títulos, do mais importante (<h1>) ao menos importante (<h6>). Eles próprios estão em nível de bloco e não requerem a adição de outros elementos para alinhá-los individualmente. Simples, eficaz – simplesmente uma ótima ferramenta.
Personalize estilos facilmente
Como usamos a tag <h1> exclusivamente, e a tag <b> ou <p> é mais adequada para uso em toda a página, podemos usar uma variedade de métodos CSS para estilizá-la.
Além do mais, uma tag de título pode indicar claramente um título, mesmo sem a necessidade de estilo! Os navegadores visuais exibem <h1> em uma fonte maior em negrito. Uma página sem estilo exibirá a estrutura do documento conforme esperado, com tags de título apropriadas para transmitir o significado.
Leitores de tela, PDAs, telefones celulares e navegadores visuais e não visuais saberão o que fazer quando encontrarem uma tag de título, lidarão com ela corretamente e a tratarão com mais seriedade do que o texto normal da página. Com a tag <span>, os navegadores que não suportam CSS não a tratarão de maneira especial.
Estilos padrão irritantes
No passado, os designers poderiam ter evitado totalmente o uso de tags de título porque os padrões do navegador eram muito feios. Ou evite usar <h1> ou <h2> devido aos seus enormes tamanhos padrão e, em vez disso, use tags de cabeçalho com números mais altos para obter tamanhos menores.
Porém, é importante enfatizar que podemos facilmente alterar essas tags de título usando CSS - por exemplo, uma < ;h1> não precisa ser uma tag gigante que ocupe metade da tela. Mais tarde, demonstrarei como é simples estilizar tags de título com CSS, aliviando alguns de seus medos avassaladores.
amigável para mecanismos de pesquisa
Este é um enorme benefício. Os mecanismos de pesquisa adoram tags de título. Por outro lado, uma tag <span> ou uma tag normal de parágrafo em negrito significa algo menos. Marcar seus títulos adequadamente com <h1> a <h6> requer apenas um pouco de esforço de sua parte, mas torna suas páginas mais fáceis de serem rastreadas pelos mecanismos de pesquisa, para que as pessoas possam encontrá-las.
Os bots dos mecanismos de pesquisa darão atenção especial às tags de título – é aqui que você pode colocar algumas palavras-chave. Assim como <title> e <meta> são recuperados, eles pesquisarão a página ao longo da tag de título. Se você não usar essas tags, as palavras-chave contidas nelas não serão consideradas valiosas e serão ignoradas.
Portanto, com apenas um pouco de esforço, você pode aumentar a probabilidade de as pessoas encontrarem seu site com base no conteúdo de sua página. Parece bom, não é?
Sobre a ordem dos títulos
No exemplo, este título específico é o mais importante da página porque é o título do documento. Portanto, usamos a tag de título mais importante, <h1>. Seguindo a especificação W3C, algumas pessoas pensam que pular vários níveis de títulos é uma má prática. Por exemplo, imagine que estamos na seguinte página:
<h1>Título do artigo</h1>
Nosso próximo título (se não for repetido com outro <h1>) seria <h2>, então <h3>, etc. Você provavelmente não deveria pular um nível depois de <h1> e ir direto para <h3>. Tendo a concordar com o ponto de vista acima e manter a continuidade dos níveis ao longo do texto para construir uma estrutura de layout. Dessa forma, será mais fácil adicionar títulos e estilos a uma página já existente e você reduzirá os erros causados pelo uso de números extras.
Conforme mencionado anteriormente, os designers podem usar <h4> para marcar o título mais importante de uma página simplesmente porque o tamanho da fonte padrão não é tão grande quanto <h1>. Mas lembre-se: estruture primeiro, projete depois. Sempre podemos usar CSS para estilizar títulos em qualquer tamanho de texto que desejarmos.