Wtricks • Tutoriais e Dicas do Mundo Digital

Os conceitos fundamentais sobre Hierarquia no HTML

Por Carlos Sabo Cantanzaro • 28/04 - 00:41 am | Em HTML

Hierarquia no HTML não trata da estética de uma site, mas é fundamental para escrever um código de qualidade, semântico e bem estruturado.

O HTML é uma das linguagens mais importantes de todos os tempos, fato esse, comprovado pela pesquisa anual do Stack Overflow, sobre as linguagens mais populares para 2018. 

Na pesquisa o HTML ocupa o segundo lugar (com 68.5% de popularidade), um pouco a frente que o CSS (terceiro lugar, com 65.1%) e perdendo a disputa apenas para o JavaScript (primeiro lugar, com 69,8%).

Um dos pontos que tornam o HTML  tão agradável de se aprender é sua facilidade. Em poucas horas qualquer leigo pode entender seu conceito e sair por ai criando alguma coisa. Porém, a distancia entre compreender o HTML e domina-lo completamente é muito grande. Você até pode levar algumas horinhas para aprender a linguagem, mas você vai precisar de muito, muito, muito mais tempo para domina-la completamente.

Justamente por isso, hoje vamos falar de um dos assuntos mais importantes do HTML, e que muitas vezes é deixado de lado, por não ter muito valor estético: a hierarquia. Caso você nunca tenha tido nenhum contato com a linguagem, recomendo que leia o artigo introdutório antes

Conceitos básicos sobre hierarquia 

É muito comum ver desenvolvedores confundirem hierarquia no HTML com indentação. Mas uma coisa não tem muito a ver com a outra. O HTML, diferente de algumas linguagens como, por exemplo, Python, não depende da indentação para funcionar corretamente. Mas é sempre recomendado fazer isso para manter a legibilidade do código. 

semantica no HTML

Deste modo, a indentação do código em HTML, apesar de ser importante para manutenção do código, é um recurso muito mais estético do que funcional, no que diz respeito a legibilidade do código. Já a hierarquia é o extremo oposto disso, não vai alterar em nada a estética da aplicação, mas pode ser fundamental para um código funcional e semântico.

Existe muitas formas de definir tecnicamente para que realmente serve a hierarquia de um documento ou como defini-la. Porém, prefiro deixar a parte técnica de lado e usar alguns exemplo mais práticos e simples de serem entendidos.

E para deixar as coisas mais simples ainda, vamos deixar um pouco de lado o próprio HTML e pensar em um texto, especificamente em uma redação de vestibular no modelo dissertação.

Não é minha intenção aqui ensinar fazer uma dissertação, mas lanço uma questão: O que um bom texto precisa ter? Na escola eu aprendi que todo texto precisava ter um começo um meio e um fim. Mas quais são os elementos que compõem essa estrutura?

Se olharmos mais a fundo, vamos ver que um bom texto precisa de alguns elementos fundamentais, como por exemplo: titulo, parágrafos, subtítulos (dependendo do tamanho do artigo), entre outros elementos. 

Quando vamos criar uma dissertação, esses elementos precisam estar em uma ordem lógica, que é: o titulo, um parágrafo de Introdução, onde vai ser lançado uma tese, dois parágrafos que vamos usar para defender a tese da introdução e por fim, a conclusão onde apresentamos uma solução para as teses apresentadas. Cada um desses parágrafos vai ter em média 5 linhas o que no total vai dar 21 linhas contando com o titulo.

Modelo básico de dissertação

Simples né? Nem tanto! Eu mesmo quando fiz a prova do ENEM, alguns anos atrás, fiquei nervoso e esqueci o título! Nem preciso dizer que isso me custou muitos pontos!

Quando não colocamos os elemento nessa ordem, fazemos os outros perderem o sentido. Eu não posso começar um artigo pelo parágrafo de introdução, depois colocar a conclusão, dois parágrafos de argumentação e depois o titulo. Não faz sentido nenhum!

Modelo de dissertação errado

Se você conseguiu entender que isso não faz nenhum sentido, você entendeu o que é hierarquia! Agora voltando para o HTML é só aplicar a mesma lógica que o da dissertação. De um lado temos os elementos do HTML que é o que chamamos de tags, e do outro, a forma como eles devem ser estruturados, que é a Hierarquia. Então, da mesma forma que não podemos começar um texto pela conclusão, não podemos começar uma página em HTML pela Tag ‘H6’.

Mas afinal, qual é a hierarquia correta do HTML?

A hierarquia no HTML é o mesmo conceito do texto que citamos acima. É ela quem vai determinar a forma correta de fazer a marcação da nossa página e do mesmo jeito que em uma dissertação nós precisamos respeitar uma estrutura, no HTML nós preciso respeitar a hierarquia.

O que temos que ter em mente é que nada te impede de escrever um texto fora de ordem, assim como nada te impede de fazer a marcação HTML fora de ordemExistem ferramentas como o validador da W3c e o HTML Checklist, que podem te ajudar a validar seu código e consecutivamente deixa-lo com mais qualidade e semântica, mas até mesmo essas ferramentas podem deixar algumas coisas passarem desapercebido. Então a melhor dica é estar sempre atento e sempre que possível aprofundar seus estudos no HTML.

Mas para tudo isso ficar mais claro vamos falar de algumas tags que mais geram confusão e dúvidas na hora de fazer a marcação no HTML:

Títulos

Quando eu falo de títulos no HTML eu não me refiro a tag <title> que colocamos no <header> de todas as páginas e sim, das tags de marcação de título que são: h1, h2, h3, h4, h5, h6. Alguns navegadores modernos aceitam, se não me engano, até o h8 ou superior, o que sinceramente, não tem utilidade nenhuma, pois raramente vamos precisar usar mais que o h3.

Então, basicamente o titulo da página vai ser representado por um H1, os subtítulos por H2 e por ai vai.

Para ficar mais claro, vamos olhar um exemplo:

Hierarquia no HTML

Exemplo de títulos e subtítulos no HTML

Apensar de SEO não ser o assunto desse artigo, mas as boas praticas recomendam usar títulos com mais de 50 caracteres e no máximo 72. Isso porque, esse é o máximo de caracteres exibidos em um resultado de busca no Google.   

Exemplo de resultado de busca

Paragrafos

Os parágrafos estão entre os elementos mais usados no HTML, isso porque, qualquer página que use texto, precisa usar um parágrafo, ele é o container padrão para qualquer pedaço de texto.

Então, indiferente do que você vai construir, seja um blog post ou um formulário de contato, trate todo pedaço de texto como uma parágrafo.

Porém, lembre-se sempre de limitar o uso dos parágrafos apenas para blocos de texto. Vamos falar logo a frente sobre elementos em bloco versos elementos inline. Mas, diferente da maioria dos elementos em bloco, o parágrafo não tem função estrutural fora a exibição de textos.

Desta forma, sempre preste muita atenção para não colocar o titulo ou qualquer outro elemento dentro de uma tag <p>.

Hierarquia no HTML

Exemplo de parágrafo válido

Qual tamanho ideal de um parágrafo?

Isso é muito relativo e não existe de fato uma regra. Mas acho que é sempre bom lembrar que, por trás do computador existe uma pessoa, e precisamos focar nisso ao fazer a marcação de um documento.

Se esse site tivesse apenas um parágrafo, eu tenho certeza absoluta que você não leria nem 20%. Então é importante pensar no tipo de conteúdo que vamos fornecer e principalmente quem é que vai receber a mensagem que vamos transmitir.

Mas de acordo com as boas praticas de SEO cerca de 20 palavras é o número suficiente para cada parágrafo.

Elementos em bloco

Os elementos em bloco do HTML tem a função estrutural e o mais conhecido deles é a tag <div>, que é basicamente uma tag genérica que pode ser usado para diversas funções estruturais.

Mas, o mais importante sobre os elementos de bloco é que eles se comportam diferente de um elemento inline. Essas são algumas das principais diferenças entre os dois:

  • Elementos inline por padrão não aceitam formações como width, height, margin-top e margin-bottom, padding-top e padding-bottom, entre outros… Isso pode ser modificado usando CSS ao mudar o tipo de display do elemento.
  • Elementos em bloco ocupam todo os espaço do seu elemento pai, desta forma, quebram a linha e ficam um embaixo do outro por padrão. Isso também pode ser modificado pelo CSS.
  • Um elemento de bloco pode ficar dentro de outro elemento de bloco, porém, isso é uma má pratica, quando se trata de elementos inline. (tanto colocar um inline dentro de outro, como colocar um bloco dentro de um inline é considerado uma pratica ruim.)   

Indo a fundo nas DIVs

Como eu disse anteriormente, um dos elementos mais importantes e mais usados do HTML são as “divs”. Como o próprio nome já deixa claro as divs são divisórias e elas são importantes para ajudar a separar o conteúdo dentro da nossa página.

Para isso ficar mais simples de entender, vamos pensar nas divs como pequenos potes dentro de uma geladeira.

Imagine que você quer separar seus alimentos, então você tem seus vegetais, carnes, saladas, seus molhos, entre outras coisas. Você obviamente não vai misturar tudo isso em um pote só e colocar direto na geladeira, certo?

O mesmo acontece com o HTML, você precisa separar o conteúdo. Você não vai colocar os elementos de um menu no mesmo pote que os elementos de um artigo, nem os elementos de uma sidebar junto no mesmo pode que seu o footer.

Veja o exemplo abaixo para deixar ainda mais claro essa questão:   

‘Potes especializados’ ou melhor dizendo, ‘novas’ tags do HTML5

Não sei nem se podemos chamar as tags do HTML5 de novas, visto que a ultima versão do HTML foi lançada em 2014. Mas o importante de falarmos aqui é que as ‘novas’ tags mudaram algumas coisas importante na forma com que escrevemos o HTML.

Antes da mudança do HTML 4 para o 5 o assunto da semântica não estava tão em evidencia como é hoje, isso porquê, a chegada do HTML5 trouxe consigo algumas tags interessantes como o <section>, <article>, <aside>, <nav>, <footer>, entre muitos outros elementos.

Esses elementos são muito parecidos com as divs, na verdade, o uso e aplicação entre eles é exatamente a mesma, então fica a questão, qual o benefício de usa-los?

Para mim a resposta é bem clara, e vamos voltar ao exemplo dos potes para poder entender melhor.

Sempre que vamos colocar nossa comida na geladeira separamos elas em potes. Mas eu não preciso usar potes aleatórios para colocar meus legumes, se eu tenho um pote próprio pra isso! Eu vou colocar meu legumes no pote de legumes, assim, quando eu for pegar algo, eu sei exatamente onde está cada coisa, evitando meu trabalho de abrir pote por pote.

Voltando para o HTML, se eu vou criar o post de um blog, eu posso usar uma div para agrupar o conteúdo, mas se existe um elemento chamado <article>, me parece muito mais certo usar ele ao invés de uma <div> genérica. O mesmo se aplica a um menu de navegação, eu posso usar a tag <nav> e deixar o código muito mais semântico.

Dessa forma, sempre que eu for dar manutenção para meu site, fica mais simples saber onde está cada elemento. Confira o exemplo abaixo para melhor entendimento:

Esse é o conceito básico de semântica. É usar o elemento certo para agrupar minhas tags dentro do HTML. Cada potinho ser responsabilizado pelo seu tipo especifico de conteúdo.

E isso tudo tem ligação com o hierarquia, pois, se eu vou definir uma artigo (<article>), o mesmo precisa ter um titulo (<h1>, <h2>, etc..), parágrafos (<p>) talvez um lista de artigos relacionados (<aside> e <nav>).

Agora, só para ver se você entenderam bem o conceito até aqui, vejam o código abaixo e façam a validação do mesmo, existe algum erro? Se sim, qual ou quais? (Deixe a resposta nos comentários)

Para ver uma lista completa dos elementos em bloco do HTML é só clicar aqui 

Elementos em inline

Os elementos inline são todos aqueles que ao serem marcados na HTML não quebram a linha, um exemplo disso é o da tag <a> que ao ser definida segue o fluxo do documento.

Ou seja, os documentos inline não servem para ser um pote, como o caso da <div>. Eles servem para propósitos específicos, que são definidos por suas tags. Como o <a> que serve para criar links.

Basicamente o que temos que ter em mente é que não podemos de forma alguma usar um elemento inline como pote para outros elementos. Ou seja, você não pode colocar um elemento <div> dentro de um <span>. Isso seria quebrar totalmente a hierarquia dos elementos.

Como toda boa regra, existe exceções. Como por exemplo o próprio caso do elemento <a>, ele não é um elemento em bloco, mas é comum ver ele sendo tratado dessa forma principalmente em menus ou em feeds de noticias. Teoricamente, por ser um elemento inline a tag <a> não aceita as formatações dos elementos em bloco. Mas podemos mudar isso pelo CSS. Entanto, vale lembrar que existe formas melhores de se criar esse tipo de elemento!  

CSS não é o escopo desse artigo, mas no código abaixo você pode ver dois exemplos de tags <a> sendo transformadas em elementos “inline-block” e “block“. Nesse contexto, “inline-block” é um elemento em linha que aceita a formatação dos elementos em bloco, bem versátil não? 

See the Pen Exemplo links inline-block e inline by Carlos Sabo Cantanzaro (@wtricks) on CodePen.

Outro uso comum da propriedade inline-block é para criar grids respondidos, aqui na Wtricks tem um tutorial completo sobre o assunto.    

Para ver a lista completa dos elementos inline do HTML é só clicar aqui 

Herança no HTML

Por fim, vamos falar de outro conceito importante na hierarquia dos elementos do HTML: a herança. No HTML é normal colocar um elemento dentro do outro, dessa forma, geramos parentescos entre esses elementos.

Entender esse parentesco é importe pois, no HTML os elementos recebem atributos dos seus parentes, como podemos ver no exemplo abaixo. 

See the Pen Exemplo de herança no HTML by Carlos Sabo Cantanzaro (@wtricks) on CodePen.

Nós temos dentro da tag <article> três parágrafos e além disso, no ultimo parágrafo temos um link. O que podemos perceber é que todos os parágrafos herdaram a cor vermelha, que foi definida no CSS para o article. Isso aconteceu pois os parágrafos são filhos do <article>

No entanto, o parágrafo do meio ficou com a cor roxa e isso aconteceu por uma coisa chamada “especificidade” , que é um assunto um pouco mais complexo e irei abordar em outro post, mas basicamente, quando eu coloquei outra classe no parágrafo do meio eu fiz com que ele tivesse um “peso” maior. Dessa forma, os atributos herdados foram substituídos pela classe que eu defini. 

Outro ponto importante, é que a tag <a> no ultimo parágrafo não herdou o estilo definido no <article>, isso porque a tag <a> herda um estilo pré-definido no navegador, a especificidade dessa tag (falaremos disso em outro artigo) é muito maior, sendo assim, a única forma de mudar o estilo padrão dela é atacando diretamente a tag, como fizemos no exemplo anterior dos links.

Por fim, o tema de herança é muito mais complexo do que apresentado aqui, para quem quer se aprofundar no assunto, recomendo a leitura do artigo “Cascade and inheritance” no site da MDN.

Conclusão

Como pudemos ver neste artigo, a hierarquia de um documento HTML é importante para manter a organização e o fluxo de informações. Assim como um texto o HTML precisa seguir uma estrutura. Não podemos começar uma página com a tag <h6>, apesar não existe nada que vá te impeça  de fazer isso.

A melhor dica para escrever um código semântico e bem estruturado é o estudo aprofundado do HTML e principalmente planejar bem o código antes de começar a escreve-lo.

Espero que esse artigo tenha te ajudado a escrever um código mais eficiente, caso tenha criticas, sugestões ou queira sugerir alguma correção no artigo, por favor deixe nos comentários.  

PARTICIPE DA DISCUSSÃO