Ocultar elemento HTML: entendendo o atributo hidden

Acompanhe as novidades e ultimas postagens.

Existem várias maneiras de ocultar um elemento no CSS. Os efeitos de cada método na acessibilidade, layout e desempenho do site podem variar muito. Trabalhar com atributos HTML é uma maneira de ocultar elementos e, como este é um atributo global, pode ser usado em qualquer elemento HTML no CSS.

Neste artigo, veremos como ocultar um elemento HTML e quando fazer isso. Acompanhe!

O que é um elemento HTML oculto?

Um atributo HTML oculto indica que o elemento ainda n√£o √© ou deixou de ser relevante. Se algo estiver marcado como ‘hidden’ no CSS, isso torna o elemento oculto para os mecanismos de pesquisa, tornando-o invis√≠vel at√© mesmo para os leitores de tela.

exemplo código html com elemento oculto por atributo hidden
Fonte: W3Schools

Em outras palavras, o uso de um atributo HTML oculto garante que os mecanismos de pesquisa, como o Google, n√£o renderizem determinados elementos.

Dica do especialista: booleano é uma variável binária, isto é, pode ter apenas dois valores possíveis, 0 (falso) ou 1 (verdadeiro). O atributo hidden é booleano. Isso significa que, se estiver presente, o valor será sempre verdadeiro e, se estiver ausente, o valor será falso.

Por que ocultar um elemento HTML?

Existem muitos motivos para ocultar um elemento HTML. Geralmente o atributo hidden é usado para impedir que o usuário veja um elemento até que algum requisito específico seja atendido.

Por exemplo: você pode ocultar certos elementos de uma página até que o usuário conclua o processo de login.

exemplo de elementos ocultos até que o usuário execute uma ação
Fonte: Dribble

Muitas vezes, os webmasters decidem usar JavaScript para desbloquear os elementos ocultos, usando comandos parecidos com estes:

usando javascriot para mostrar elementos ocultos
Fonte: Stack Overflow

Por fim, um bom motivo para usar atributos HTML ocultos √© a transi√ß√£o do Google para o Mobile First Index. O benef√≠cio mais claro para SEO √© a possibilidade de colocar muito conte√ļdo em uma p√°gina para dispositivos m√≥veis (que √© pequena) e, simultaneamente, oferecer uma boa experi√™ncia ao usu√°rio.

√Č o equil√≠brio perfeito entre SEO e UX.

Como usar o atributo hidden

Ao usar o atributo hidden no HTML, é importante que você não vincule o elemento oculto a partir de outros não ocultos.

Por exemplo: um atributo href que tem um link apontando para uma se√ß√£o oculta. O conte√ļdo marcado com hidden n√£o deve ser relevante para o usu√°rio ‚ÄĒ caso contr√°rio, n√£o estaria oculto. Portanto, n√£o deveria haver nenhum motivo para criar um link para ele.

No entanto, em alguns casos, os elementos ainda podem estar linkados a elementos HTML ocultos no CSS.

Por exemplo: algumas descri√ß√Ķes podem ser relevantes somente se forem referenciadas a partir do elemento que descrevem. Esse √© o caso de um atributo aria-descriptoby. Essa descri√ß√£o permanece oculta at√© que o usu√°rio a acione ativamente com uma a√ß√£o espec√≠fica, como clicar ou passar o mouse sobre ela.

Dica do especialista: um atributo aria-descriptoby fornece um rótulo descritivo para um elemento no mesmo documento DOM.

√Č importante lembrar que alterar a exibi√ß√£o do estilo DOM de um elemento HTML oculto substituir√° o primeiro comando. Em outras palavras, um elemento estilizado como display: flex ser√° lido e exibido pelos navegadores mesmo na presen√ßa de um atributo oculto.

O que evitar ao ocultar um elemento HTML

Ocultar elementos √© sempre um movimento muito arriscado e pode prejudicar seriamente suas classifica√ß√Ķes. Isso porque ele tem sido amplamente usado como t√©cnica de spam, j√° que os mecanismos de pesquisa contam com algoritmos muito simples que podem ser enganados pela repeti√ß√£o de palavras-chave.

Sites de spam frequentemente usam t√©cnicas black hat de SEO. Por exemplo: criar duas vers√Ķes da mesma p√°gina, uma para o algoritmo e outra para visitantes.

Nesse caso, o webmaster escreveria par√°grafos sem sentido, cheios de palavras-chave para enganar os mecanismos de pesquisa, enquanto os usu√°rios veriam uma p√°gina otimizada para convers√£o, na qual o conte√ļdo original est√° oculto e inacess√≠vel.

Essa pr√°tica criava situa√ß√Ķes em que os usu√°rios clicavam em um link pensando que levaria a um site leg√≠timo, mas eram levados para outro lugar.

Isso era conhecido como ‚Äėcloaking‚Äô e permitia que os spammers aumentassem suas vendas de links de afiliados ou convers√Ķes de an√ļncios. Felizmente, tornou-se uma das principais causas de penalidades do Google.

Observação: a prática de cloaking não tem nada a ver com o atributo HTML hidden que discutimos neste post.

Como ocultar um elemento HTML sem violar as diretrizes do Google

Hoje em dia, a maioria dos sites apresenta elementos ocultos, geralmente na forma de uma aba na qual o usu√°rio precisa clicar para acessar mais conte√ļdo.¬†

Por√©m, o conte√ļdo oculto torna-se problem√°tico apenas quando √© completamente inacess√≠vel ao usu√°rio. Ent√£o, h√° uma grande diferen√ßa entre camuflagem e elementos HTML ocultos acess√≠veis por meio de uma a√ß√£o espec√≠fica (como clicar em um bot√£o ‚ÄėLeia mais‚Äô).

Em caso de d√ļvida, lembre-se desta regra: coloque algum elemento claramente vis√≠vel que mostre aos usu√°rios que h√° mais conte√ļdo na p√°gina e explique como eles podem acess√°-lo.

Se um usuário puder ver os elementos ocultos na sua página, o Google também conseguirá e, com isso, não penalizará seu site.

O algoritmo do Google se aperfeiçoou muito desde seu lançamento e é capaz de renderizar uma página usando arquivos JavaScript e CSS. Os bots visualizam sites praticamente da mesma forma que um usuário. Por isso, foque em oferecer uma boa experiência de navegação.

A ferramenta Auditoria do site é fundamental para evitar as penalidades do Google. Se você quer encontrar problemas técnicos de SEO, acesse a aba Problemas na ferramenta para ver os erros, advertências e avisos encontrados no seu site.

Veja a lista completa de problemas que a Auditoria do site pode identificar.

Fonte

Compartilhar:

Deixe um coment√°rio

Categorias
Assinar por e-mail

Digite seu endere√ßo de e-mail para assinar e receber notifica√ß√Ķes de novas publica√ß√Ķes por e-mail.

Estatísticas do blog
  • 53.025 Views

20% DE

 DESCONTO

BLACK

NOVEMBER

Cupom válido até 01/12/2023 ou até durarem os estoques.
V√°lido somente para novos assinantes.

CUPOM:  

BLACK2023

Desconto v√°lido nos planos MENSAIS para Hospedagem Cloud, Revenda Plesk e Email Profissional. Desconto ser√° aplicado durante 12 meses no plano de assinatura mensal.