Ilustração minimalista de mulher desenvolvendo site em um notebook
Freepik

O HTML é uma linguagem de marcação utilizada para criar páginas web, definindo a estrutura e o conteúdo do documento. É a partir do HTML que os navegadores web interpretam as informações e exibem a página para o usuário.

Para que uma página web seja acessível e bem estruturada, é fundamental entender a hierarquia do HTML e como as diferentes tags se relacionam. Neste artigo, vamos explorar os conceitos fundamentais da estrutura do HTML e como aplicá-los na criação de páginas web.

O que é hierarquia do HTML?

A hierarquia do HTML é a relação entre as diferentes tags que compõem um documento HTML. Cada tag tem um papel específico na estruturação e organização do conteúdo da página, e deve ser usada de acordo com sua finalidade.

Para entender a hierarquia do HTML, é preciso conhecer as diferentes categorias de tags. As principais são:

  • Tags de cabeçalho: <html>, <head>, <title>;
  • Tags de corpo: <body>, <h1> a <h6>, <p>, <ul>, <ol>, <li>, <a>, <img>;
  • Tags de estruturação: <div>, <section>, <article>, <header>, <footer>, <nav>, <aside>, <main>;
  • Tags de formatação: <em>, <strong>, <b>, <i>, <u>, <strike>, <sup>, <sub>, <code>, <pre>, <blockquote>, <q>;
  • Tags de formulário: <form>, <input>, <textarea>, <button>, <select>, <option>, <label>, <fieldset>, <legend>, <optgroup>, <datalist>, <output>, <progress>, <meter>.

Essas tags podem ser combinadas de diversas formas para criar a estrutura da página, e é importante entender como elas se relacionam para garantir uma organização clara e semântica do conteúdo.

A importância da hierarquia do HTML

A hierarquia do HTML é fundamental para garantir que uma página web seja acessível e bem estruturada. Uma estrutura clara e semântica facilita a compreensão do conteúdo pelos usuários e pelos mecanismos de busca, melhorando a usabilidade e o posicionamento da página nos resultados de pesquisa.

Além disso, a hierarquia do HTML é essencial para a acessibilidade da página. Tags mal utilizadas ou uma estrutura confusa podem dificultar a navegação por usuários com algum grau de deficiência visual ou outros tipos de limitações, tornando a página inacessível para parte do público.

Como aplicar a hierarquia do HTML na prática

Para aplicar a hierarquia do HTML na criação de páginas web, é importante seguir algumas boas práticas:

1. Estruturação da página

A estruturação da página é um dos aspectos mais importantes da hierarquia do HTML. É preciso definir claramente qual é o conteúdo principal da página e como ele se relaciona com os demais elementos.

Para isso, é recomendado utilizar as tags de estruturação, como <header>, <footer>, <nav>, <section>, <article> e <aside>. Essas tags permitem organizar o conteúdo de forma semântica e ajudam os mecanismos de busca a entender a estrutura da página.

Por exemplo, o cabeçalho da página pode ser definido com a tag <header>, enquanto o rodapé pode ser definido com a tag <footer>. Já o conteúdo principal da página pode ser organizado em uma tag <main>, com seções e artigos dentro dele.

2. Utilização correta das tags de cabeçalho

As tags de cabeçalho são essenciais para indicar ao navegador e aos mecanismos de busca as informações básicas sobre a página, como o título e a descrição. É importante utilizar essas tags de forma correta e semântica.

A tag <html> deve ser a primeira tag do documento e contém as informações básicas do documento. Dentro dela, a tag <head> contém as informações sobre o documento que não aparecem na página, como o título, o autor e as informações de SEO.

A tag <title> é utilizada para definir o título da página, que aparece na aba do navegador e nos resultados de busca. É importante que o título seja descritivo e contenha palavras-chave relevantes para a página.

3. Utilização correta das tags de corpo

As tags de corpo são responsáveis por definir o conteúdo principal da página. É importante utilizá-las de forma semântica e de acordo com sua finalidade.

As tags <h1> a <h6> são utilizadas para definir os títulos e subtítulos da página. É importante utilizar essas tags de forma hierárquica e em ordem lógica, definindo claramente qual é o título principal da página e como os demais títulos se relacionam com ele.

As tags de parágrafo, como <p>, devem ser utilizadas para definir o texto corrido da página. Já as tags de lista, como <ul>, <ol> e <li>, devem ser utilizadas para definir listas com marcadores ou numeradas.

4. Atributos de acessibilidade

Para garantir a acessibilidade da página, é importante utilizar atributos específicos nas tags. Alguns exemplos são:

  • O atributo alt na tag <img>, para definir uma descrição alternativa para a imagem, que é lida pelos leitores de tela;
  • O atributo aria-label em elementos que não possuem texto descritivo, para informar aos leitores de tela o propósito do elemento;
  • O atributo tabindex em elementos interativos, para definir a ordem de navegação por teclado.

5. Validação do código

Por fim, é importante validar o código HTML para garantir que ele esteja correto e sem erros. Existem diversas ferramentas online que permitem validar o código HTML, como o W3C Markup Validation Service.

A validação do código é importante para garantir a compatibilidade com diferentes navegadores e dispositivos, além de facilitar a manutenção do código no futuro.

Exemplo

Agora que você já sabe como estruturar um código HTML respeitando a suia hierarquia, vamos para um exemplo prático. A página HTML abaixo usa todas as tags mencionadas anteriormente:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Título da Página</title>
  <meta name="description" content="Descrição da página para mecanismos de busca">
</head>
<body>
  <header>
    <h1>Logo da Empresa</h1>
    <nav>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h2>Título da Seção 1</h2>
      <p>Texto da seção 1.</p>
      <article>
        <h3>Título do Artigo 1</h3>
        <p>Texto do artigo 1.</p>
      </article>
      <article>
        <h3>Título do Artigo 2</h3>
        <p>Texto do artigo 2.</p>
      </article>
    </section>
    <section>
      <h2>Título da Seção 2</h2>
      <p>Texto da seção 2.</p>
      <aside>
        <h3>Título do Anúncio</h3>
        <img src="anuncio.jpg" alt="Anúncio de produto">
        <p>Descrição do produto.</p>
      </aside>
    </section>
  </main>
  <footer>
    <p>Direitos autorais © 2014. Todos os direitos reservados.</p>
  </footer>
</body>
</html>

Você pode ver um exemplo desta página neste link. Clique no botão RUN, no canto superior direito. O código não tem uma folha de estilos (CSS) para facilitar a visualização da estrutura.