Guia Completo de HTML Semântico: Melhorando a Estrutura e SEO do seu Site

O HTML semântico não é apenas um termo da moda; é uma abordagem essencial para criar páginas web que sejam tanto amigáveis para os desenvolvedores quanto otimizadas para mecanismos de busca. Mas o que isso realmente significa?

Em termos simples, o HTML semântico ajuda a dar sentido ao conteúdo de uma página web, tornando-o compreensível não apenas para humanos, mas também para máquinas.

• O que é html?
• HTML e HTML5 Semântico: Criando Conteúdo Significativo para a Web
• A importância das Tags Semânticas: HTML semântico
• Cabeçalhos e seções: O papel do <header> e <section>
• Tags de Artigos e conteúdo principal: <article> e <main>
• Navegação e Links: Entendendo <nav> e <a>
• Conteúdo complementar: O uso de <aside>
• Figuras e descrições: <figure> e <figcaption>
• Rodapé: A importância do <footer>
• Semântica de texto: <em> e <strong>
• Citações e datas: <cite> e <q>
• Representação de datas: <time>
• Exeplo explicativo de código html usando tags Semânticas

O que é html?

HTML, que significa HyperText Markup Language (Linguagem de Marcação de Hipertexto, em português), é a base fundamental da maioria das páginas da web que vemos hoje. Trata-se de uma linguagem de marcação que permite a criação e estruturação de conteúdo na internet.

Os documentos HTML consistem em uma série de elementos ou "tags" que são utilizados para definir diferentes tipos de conteúdo, como texto, imagens, links e elementos multimídia.

Essas tags descrevem a função de cada elemento na página e como ele deve ser exibido pelo navegador da web. HTML desempenha um papel crucial na formatação e organização do conteúdo online, tornando-o legível e acessível aos usuários por meio de seus navegadores da web.

HTML e HTML5 Semântico: Criando Conteúdo Significativo para a Web

O HTML (HyperText Markup Language) é a espinha dorsal da World Wide Web, permitindo a criação de páginas e aplicativos da web. Com a introdução do HTML5, uma versão mais moderna e robusta, surgiu uma ênfase renovada na semântica.

HTML semântico não se limita apenas a definir a estrutura de um documento, mas também atribui significado aos elementos utilizados. Isso significa que, ao invés de apenas definir como o conteúdo deve ser estilizado, o HTML5 semântico descreve o que o conteúdo realmente representa.

Isso não só melhora a acessibilidade para pessoas com deficiência, mas também beneficia os mecanismos de busca, tornando o conteúdo mais compreensível e relevante.

A importância das Tags Semânticas: HTML semântico

Ao contrário do HTML tradicional, que se concentra principalmente na estrutura, o HTML semântico vai além. Ele utiliza tags específicas que descrevem o tipo e a natureza do conteúdo.

Isso é crucial tanto para os desenvolvedores que querem entender o código rapidamente quanto para os mecanismos de busca que indexam o conteúdo.

Cabeçalhos e seções: O papel do <header> e <section>

O elemento <header> é usado para definir o cabeçalho de uma página ou seção. Ele pode conter desde títulos até imagens e listas de navegação.

Já o elemento <section> é responsável por delimitar diferentes seções de conteúdo em uma página, geralmente acompanhadas de um título.

Veja um exemplo simples de uso do <header>:

<header>
  <h1>Título da página</h1>
  <h2>Sutitulo da página</h2>
</header>

Veja um exemplo simples de uso da <section>:

<section>
  <h2>Subtitulo da página</h1>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</p>
    <hr/>
  </div>
</section>

Tags de Artigos e conteúdo principal: <article> e <main>

O <article> é uma tag que você usará quando estiver apresentando um conteúdo que faz sentido por si só, como um post de blog. É uma boa prática associar cada <article> a um título.

O elemento <main> é onde o conteúdo mais relevante da página deve residir. Idealmente, deve haver apenas um <main> por página.

Veja um exemplo do uso da <article>:

<article>
  <h2>Título do artigo 1 </h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ...</p>
</article>
<article>
  <h2>Título do artigo 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ...</p>
</article>

Veja um exemplo do uso da <main>:

<main>
  <h2>Titulo</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ...</p>
  <article>
    <h3>Subtítulo</h3>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum...</p>
  </article>
</main>

Navegação e Links: Entendendo <nav> e <a>

O elemento <nav> é utilizado para agrupar links de navegação, facilitando a experiência do usuário e a indexação por mecanismos de busca.

Dentro de <nav>, usamos o elemento <a> para criar os links propriamente ditos, permitindo uma navegação fluida entre diferentes páginas ou seções do site.

Veja um exemplo simples de uso da <nav> e <a> :

<nav>
  <a href="#portfolio">Portfólio</a>
  <a href="#projetos">Projetos</a>
  <a href="#contato">Contato</a>
</nav>

Conteúdo complementar: O uso de <aside>

Quando você tem informações adicionais que podem enriquecer o conteúdo principal, mas não são essenciais para o entendimento do mesmo, você pode usar a tag <aside>.

Isso é particularmente útil para sugestões de leitura complementar ou anúncios.

Veja um exemplo simples de uso da <aside>:

<aside>
  <nav>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
     </ul>
  </nav>
</aside>

Figuras e descrições: <figure> e <figcaption>

Para adicionar imagens ou gráficos de forma semântica, o HTML5 introduziu a tag <figure>. Para descrever essas imagens, você pode usar <figcaption>, que é aninhada dentro da tag <figure>.

Veja um exemplo simples de uso da <figure>:

<figure>
  <img src=”http://meusite.com.br/assets/imagem.jpg” alt=”Imagem”>
</figure>

Exemplo de uso de <figure> com <figcaption>:

<figure>
  <img src=”http://meusite.com.br/assets/imagem.jpg” alt=”Imagem”>
  <figcaption>Figura 1. Imagem</figcaption>
</figure>

Rodapé: A importância do <footer>

O <footer> é geralmente usado no final de uma página para fornecer informações como autoria, direitos autorais e links adicionais. É uma parte crucial para adicionar credibilidade e transparência ao seu conteúdo.

Exemplo de uso de <footer>:

<footer>
  <p>Escrito por Henrico Piubello</p>
  <p>Publicado em 11/09/2023 </p>
</footer>

Semântica de texto: <em> e <strong>

Além da estrutura, o HTML semântico também permite que você dê ênfase ao texto. O <em> é usado para enfatizar texto, enquanto <strong> é usado para indicar importância.

Exemplo de uso de <footer>:

<p>Você <em>tem certeza</em> que deseja encerrar a aplicação?</p>

Citações e datas: <cite> e <q>

Se você está citando uma fonte externa, a tag <cite> é apropriada.

O uso comum do elemento <cite> ocorre em conjunto com a tag <q>. O <cite> desempenha o papel de identificar a fonte da qual o conteúdo foi retirado quando se utiliza o elemento <q> para apresentar citações.

Exemplo de uso de <cite> e o q:

<p>
  <q>Lorem ipsum dolor sit amet, consectetur </q> - <cite>http://br.lipsum.com/</cite>.
</p>

Representação de datas: <time>

Para datas, o elemento <time> com o atributo datetime permite uma formatação padronizada.

Exemplo de uso de <time>:

<time datetime=”2023-09-11”>4/7</time>

Exeplo explicativo de código html usando tags Semânticas

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de HTML Semântico - CodeCrush</title>
</head>
<body>
  <header>
    <h1>CodeCrush</h1>
    <nav>
      <ul>
        <li><a href="/">Página Inicial</a></li>
        <li><a href="/sobre">Sobre Nós</a></li>
        <li><a href="/contato">Contato</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Artigo Principal</h2>
      <p>Este é o conteúdo principal do CodeCrush.</p>
      <time datetime="2023-09-11">Publicado em 11 de setembro de 2023</time>
    </article>

    <aside>
      <h3>Barra Lateral</h3>
      <p>Informações adicionais podem ser encontradas aqui.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2023 CodeCrush. Todos os direitos reservados.</p>
  </footer>
</body>
</html>

Aqui estão os comentários explicativos:

• <header>: Define o cabeçalho do documento, geralmente contendo o logotipo e a navegação do site.
• <nav>: Define a seção de navegação.
• <ul>: Lista não ordenada para agrupar os itens de navegação.
• <li>: Item da lista.
• <main>: Define o conteúdo principal do documento.
• <article>: Define um conteúdo autônomo e autoexplicativo, como um artigo ou post.
• <aside>: Define conteúdo relacionado que pode ser considerado separado do conteúdo principal.
• <time>: Define uma data ou hora, geralmente usada para indicar a data de publicação.
• <footer>: Define o rodapé do documento, geralmente contendo informações de direitos autorais e outras notas finais.

Conclusão

Em resumo, o HTML semântico não é apenas uma prática recomendada; é uma necessidade na era moderna da web. Ele não só facilita a vida dos desenvolvedores, tornando o código mais fácil de ler e manter, mas também otimiza o site para mecanismos de busca.

Utilizar elementos semânticos corretamente é fundamental para criar páginas web que sejam acessíveis, compreensíveis e fáceis de indexar.

Ao adotar essa abordagem, você estará contribuindo para uma web mais inclusiva e eficiente, onde o conteúdo pode ser facilmente consumido e compreendido por todos: humanos e máquinas. Portanto, da próxima vez que você se encontrar codificando uma página web, lembre-se da importância de incorporar o HTML semântico em sua estrutura.