4
respostas

Sêmantica para logo

Nessa aula o instrutor usou h1 para logo. Isso é uma boa ou má prática em questão de semântica para o site?

4 respostas

Olá Diego, tudo bem?

Os elementos de cabeçalho são implementados em seis níveis, <h1> é o mais importante e <h6> é o de menor importância.

Sendo assim, podemos considerar o uso de um logo em um <h1> uma boa prática, pois semanticamente, ele é um conteúdo de extrema importância, ou seja, um conteúdo principal dentro do header.

Além disso, é muito importante acrescentarmos o atributo alt na <img>, descrevendo de maneira clara o conteúdo da imagem, pois em casos do navegador não exibir a imagem referenciada pelo elemento, ele irá exibir o texto alternativo que irá continuar passando a mensagem semântica que esse elemento representa.

Espero ter ajudado, qualquer dúvida só falar. Bons estudos!

Os elementos de cabeçalho são implementados em seis níveis, <h1> é o mais importante e <h6> é o de menor importância

Sim, eu sei disso. Eu achava que o h1 fosse mais útil para descrever o título do site para que os robôs possam interpretar melhor sobre do que o site se trata. Obrigado :)

Esse é assunto polêmico, dá um google em "h1 debate". Aparentemente, faz sentido sim, e colocar os dois (imagem e título) numa tag âncora (<'a'>), dentro do h1, é ainda melhor. Ou o título numa tag âncora e uma tag de imagem dentro do h1. Eu vi várias opções na verdade... Dá uma olhadinha aqui: https://stackoverflow.com/questions/665037/replacing-h1-text-with-a-logo-image-best-method-for-seo-and-accessibility E aqui: https://stackoverflow.com/questions/25405769/using-a-h1-logo-in-html5

Oi, Diego, tudo bem? Já utilizei muito essa prática de colocar o logo dentro do H1, porém hoje creio não ser a melhor opção. Normalmente o logo fica no header sendo um elemento que se repete em outras páginas. O h1 é o título principal da página e deve ser único, esse elemento é fundamental para estratégia de SEO. Segue link sobre o H1 é ótimo para conhecer mais sobre SEO também. https://neilpatel.com/br/blog/tag-h1/

Espero ter ajudado :)