{"id":1590,"date":"2018-10-17T11:42:56","date_gmt":"2018-10-17T14:42:56","guid":{"rendered":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/?p=1590"},"modified":"2020-04-06T12:15:08","modified_gmt":"2020-04-06T15:15:08","slug":"headers","status":"publish","type":"post","link":"https:\/\/www.ufrgs.br\/acessibilidadedigital\/headers\/","title":{"rendered":"Estrutura de T\u00edtulos"},"content":{"rendered":"

As estruturas de cabe\u00e7alhos s\u00e3o criadas a partir dos t\u00edtulos do seu conte\u00fado e representam um importante recurso para navega\u00e7\u00e3o em seu site. Uma boa estrutura\u00e7\u00e3o de cabe\u00e7alho garante uma boa experi\u00eancia para usu\u00e1rios (principalmente os de leitores de tela), al\u00e9m de melhorar o ranqueamento de seu site em buscadores.<\/p>\n

Na web, temos seis n\u00edveis de cabe\u00e7alhos poss\u00edveis. Se voc\u00ea utiliza algum gerenciador de conte\u00fado, o editor visual de sua ferramenta pode mostrar algo como:<\/p>\n

\"Lista<\/p>\n

Em c\u00f3digo HTML, essas estruturas est\u00e3o representadas pelas tag h+n sendo “n” o n\u00famero equivalente ao n\u00edvel do cabe\u00e7alho. O cabe\u00e7alho mais importante tem a classifica\u00e7\u00e3o 1 (<h1>) e a classifica\u00e7\u00e3o de t\u00edtulo menos importante \u00e9 6 (<h6>).<\/p>\n

<h1>T\u00edtulo 1<\/h1><\/pre>\n
<h2>T\u00edtulo 2<\/h2><\/pre>\n
<h3>T\u00edtulo 3<\/h3><\/pre>\n
<h4>T\u00edtulo 4<\/h4><\/pre>\n
<h5>T\u00edtulo 5<\/h5><\/pre>\n
<h6>T\u00edtulo 6<\/h6><\/pre>\n\n\n
Embora cada n\u00edvel se diferencie visualmente do outro, voc\u00ea n\u00e3o deve fazer uso das marca\u00e7\u00f5es simplesmente por motivos visuais e est\u00e9ticos. O ideal \u00e9 que as estruturas sejam utilizadas de forma sem\u00e2ntica, dotadas de significado.<\/p>\n\n\n\n
Assim, a l\u00f3gica \u00e9 come\u00e7ar pelo mais importante ao menos importante, evitando quebras nos n\u00edveis. Ou seja, voc\u00ea n\u00e3o deve utilizar um t\u00edtulo de n\u00edvel 3 ( <h3> ) sem antes ter utilizado um t\u00edtulo de n\u00edvel 2 ( <h2>). <\/p>\n\n\n\n
Um bom exemplo de estrutura de t\u00edtulos \u00e9<\/p>\n\n\n\n
<h1>Maria Silva<\/h1>\n<h2>Forma\u00e7\u00e3o<\/h2>\n<h3>Gradua\u00e7\u00e3o<\/h3>\n<h3>Especializa\u00e7\u00e3o<\/h3>\n<h2>Experi\u00eancia<\/h2>\n<h3>UFRGS<\/h3><\/pre>\n\n\n\n
Um mau exemplo poderia ser<\/p>\n\n\n\n
<h1>B\u00e1rbara Arena<\/h1>\n<h2>Forma\u00e7\u00e3o<\/h2>\n<h4>Gradua\u00e7\u00e3o<\/h4>\n<h4>Especializa\u00e7\u00e3o<\/h4>\n<h2>Experi\u00eancia<\/h2>\n<h3>UFRGS<\/h3><\/pre>\n\n\n\n
Embora no HTML vers\u00e3o 5 seja poss\u00edvel o uso de m\u00faltiplos t\u00edtulos de n\u00edvel um, desde que cada um esteja em uma se\u00e7\u00e3o pr\u00f3pria, por exemplo, ainda \u00e9 recomendado que voc\u00ea tenha apenas um T\u00edtulo de n\u00edvel 1 na p\u00e1gina<\/strong>.<\/p>\n\n\n\n
Para saber mais sobre o assunto:<\/p>\n\n\n