Hierarquia de Títulos

Vimos em (Conteúdo em HTML) que para criamos um título usamos a tag <h1>

Porém isto refere-se a um título de nível 1. No HTML temos seis níveis de títulos (<h1> a <h6>)

Sendo os títulos de menor número os superiores.

Imagine que queremos copiar a seguinte estrutura do sumário de um relatório:

Fonte: autoria própria

Fonte: autoria própria

Então, faremos da seguinte forma:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hierarquia de Títulos</title>
</head>
<body>
    **<h1>Sumário</h1>
    <h2>Conjunto de Dados</h2>  
    <h2>Produção de sacas vs custo do cultivo por hectares</h2>
    <h3>Definindo as hipóteses</h3>
    <h3>Teste Estatístico</h3>
    <h3>Nível de Significância</h3>
    <h3>Normalidade das variáveis</h3>
    <h3>Teste de Correlação de Pearson</h3>
    <h3>Conclusão</h3>
    <h2>Custo de Cultivo vs Método do Cultivo</h2>
    <h3>Definindo hipóteses</h3>
    <h3>Teste Estatístico</h3>
    <h3>Nível de Significância</h3>
    <h3>Análise de Resíduos</h3>
    <h4>Normalidade</h4>
    <h4>Independência</h4>
    <h3>Teste de Kruskal-Wallis</h3>
    <h3>Diferença das Médias</h3>
    <h3>Conclusão</h3>**
</body>
</html>

Através do uso correto dos títulos definimos a hierarquia do nosso documento.

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c1072af2-992a-464f-9ef2-7492d00f7af2/1632528620390.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c1072af2-992a-464f-9ef2-7492d00f7af2/1632528620390.png" width="40px" /> A diferença entre os títulos não são os tamanhos das letras, mas sim sua hierarquia.

</aside>