Nessa aula vamos começar a falar sobre as tags que de fato aparecem na tela para os usuários, as tags que usamos dentro do body do seu HTML. É fundamental dominar os títulos no HTML (do h1 ao h6) porque são importantes para organizar os conteúdos na sua página.

Os elementos de cabeçalho do HTML são fundamentais para organizar as seções de sua página HTML, pois visualmente conseguem chamar atenção do usuário ao se diferenciar em tamanho dos outros textos do seu site.

Os títulos de cabeçalho são divididos em 6 níveis: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>.

Diferença do h1 ao h6

A diferença entre esses elementos de títulos está no tamanho da fonte, pois o h1 é o elemento de maior tamanho seguido do h2 e assim sucessivamente, sendo o h6 o menor título.

Quando queremos criar um título grande e importante para a página usamos o h1. É indicado utilizar o h1 apenas uma vez na sua página, para ser o título principal de maior importância visualmente.

Aqui nessa página por exemplo você pode perceber que no início o título principal é inserido usando a tag <h1></h1>, e dentro do texto os títulos menores usam o h2.

Nada impede que use livremente as tags h3 por exemplo e aumentar no CSS o tamanho desse título, mas é indicado prezar por uma organização em seus códigos e seguir a regra de tamanhos dos títulos baseados nas tags de h1 ao h6.

Códigos da aula

Utilize esses códigos abaixo para treinar e ver a diferença entre os elementos, e teste eles em diferentes situações em sua página. Nos vemos na próxima aula.