pular para o conteúdo
cefas

Benefícios do HTML Semântico que Você Não Pode Ignorar

Benefícios do HTML Semântico que Você Não Pode Ignorar
Foto de Valery Sysoev no Unsplash

O HTML (HyperText Markup Language) é a base da web. É a linguagem usada para criar a estrutura e o conteúdo das páginas. O HTML semântico é um aspecto importante para criar um site que não seja só bonito, mas também acessível e compreensível para todo mundo. Neste post, vamos ver o que é HTML semântico e por que ele é essencial para o desenvolvimento web.

HTML semântico é a prática de usar elementos HTML que transmitem significado e propósito tanto para pessoas quanto para máquinas. Esses elementos fornecem informações sobre o conteúdo da página, facilitando a compreensão por buscadores, leitores de tela e outras tecnologias assistivas.

Um dos principais benefícios do HTML semântico é a melhoria da acessibilidade. Acessibilidade significa criar conteúdo web que possa ser acessado por pessoas com deficiência. Usando elementos HTML semânticos, os desenvolvedores web dão mais contexto às tecnologias assistivas, que por sua vez oferecem uma experiência melhor às pessoas com deficiência.

O HTML semântico também pode melhorar o SEO (Search Engine Optimization) de um site. Os buscadores dependem do conteúdo de uma página para determinar sua relevância e posicioná-la nos resultados de busca. Usando elementos HTML semânticos, os desenvolvedores web fornecem mais informações aos buscadores sobre o conteúdo da página, o que pode melhorar seu posicionamento.

Vamos ver alguns exemplos de elementos HTML semânticos.

  1. <header> — O elemento <header> é usado para definir a seção de cabeçalho de uma página. Normalmente, ele contém o logo do site, o menu de navegação e outras informações importantes relacionadas à página.
  2. <main> — O elemento <main> é usado para definir o conteúdo principal de uma página. Normalmente, ele contém o conteúdo central da página, como artigos, posts de blog ou listas de produtos.
  3. <article> — O elemento <article> é usado para definir um conteúdo independente e autocontido dentro da página. Normalmente, é usado para posts de blog, notícias ou conteúdos parecidos.
  4. <section> — O elemento <section> é usado para definir uma seção da página. Normalmente, é usado para agrupar conteúdos relacionados, como um grupo de artigos, produtos ou serviços.
  5. <footer> — O elemento <footer> é usado para definir a seção de rodapé de uma página. Normalmente, ele contém informações de direitos autorais, links para redes sociais e outras informações importantes relacionadas à página.

O HTML semântico não só torna a página acessível para pessoas com deficiência, como também melhora a usabilidade para todo mundo. Por exemplo, usando elementos semânticos como <nav> para os links de navegação, os desenvolvedores web facilitam a compreensão e a navegação do site. Da mesma forma, usando de <h1> a <h6> para os títulos, ajudam os usuários a escanear e entender rapidamente o conteúdo da página.

Outra vantagem do HTML semântico é deixar o site mais fácil de manter e preparado para o futuro. Usando nomes de elementos descritivos e significativos, fica mais fácil atualizar e modificar o código depois. Por exemplo, se você usa <section> para agrupar conteúdos relacionados, fica mais fácil alterar aquela seção no futuro sem precisar mexer na página inteira.

O HTML semântico também tem um papel importante no design responsivo. Com o uso cada vez maior de dispositivos móveis, os desenvolvedores web precisam criar páginas que se adaptem a diferentes tamanhos de tela. O HTML semântico ajuda nesse processo, oferecendo a estrutura e a hierarquia necessárias ao conteúdo. Usando os elementos <header>, <main> e <footer>, os desenvolvedores web conseguem criar um layout flexível, que funciona em diferentes dispositivos.

Existem alguns erros comuns que os desenvolvedores web cometem quando o assunto é HTML semântico. Por exemplo, usar <div> no lugar de elementos semânticos ou usar elementos semânticos de forma incorreta. Isso pode gerar uma página mal estruturada, difícil de entender e de navegar. Por isso, é essencial usar o HTML semântico corretamente para garantir que o site seja acessível, usável e preparado para o futuro.

Para ilustrar o que foi discutido, veja os exemplos abaixo:

Bom Exemplo

<header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <header>
      <h1>Why Semantic HTML is Important</h1>
      <p>Published on March 23, 2022</p>
    </header>
    <p>Semantic HTML plays a crucial role in web development...</p>
  </article>
  <section>
    <h2>Our Services</h2>
    <ul>
      <li>Web Design</li>
      <li>Web Development</li>
      <li>SEO</li>
    </ul>
  </section>
</main>
<footer>
  <p>&copy; 2022 MyCompany. All rights reserved.</p>
</footer>

Neste exemplo, elementos HTML semânticos como <header>, <nav>, <article>, <section> e <footer> são usados para estruturar o conteúdo da página. Isso torna a página mais acessível, melhora o SEO e facilita a manutenção.

Mau Exemplo

<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<div class="content">
  <div class="blog-post">
    <div class="blog-header">
      <h1>Why Semantic HTML is Important</h1>
      <p>Published on March 23, 2022</p>
    </div>
    <div class="blog-content">
      <p>Semantic HTML plays a crucial role in web development...</p>
    </div>
  </div>
  <div class="services">
    <h2>Our Services</h2>
    <ul>
      <li>Web Design</li>
      <li>Web Development</li>
      <li>SEO</li>
    </ul>
  </div>
</div>
<div class="footer">
  <p>&copy; 2022 MyCompany. All rights reserved.</p>
</div>

Neste exemplo, elementos não semânticos como <div> são usados no lugar de elementos HTML semânticos como <header>, <nav>, <article>, <section> e <footer>. Isso torna a página mais difícil de entender para buscadores, leitores de tela e outras tecnologias assistivas. Também torna o código mais difícil de manter e atualizar no futuro.

Resumindo, o HTML semântico é um aspecto essencial do desenvolvimento web, que melhora a acessibilidade, a usabilidade, a manutenibilidade e a longevidade de um site. Usando os elementos HTML semânticos corretamente, os desenvolvedores web criam sites fáceis de navegar, que se adaptam a diferentes tamanhos de tela e são acessíveis para todos. Por isso, é importante aprender e usar o HTML semântico do jeito certo para criar uma experiência web melhor para todo mundo.

Referências

  1. MDN Web Docs: HTML Semantic Elements: https://developer.mozilla.org/en-US/docs/Glossary/Semantics#html_semantic_elements
  2. W3Schools: HTML Semantics: https://www.w3schools.com/html/html5_semantic_elements.asp
  3. A List Apart: The Importance of Semantics: https://alistapart.com/article/the-importance-of-semantic-markup/
  4. HTML5 Doctor: HTML5 Semantics: https://html5doctor.com/html-5-semantics/
  5. WebAIM: Semantic Structure: https://webaim.org/techniques/semanticstructure/
  6. CSS-Tricks: Semantic HTML: https://css-tricks.com/semantic-html/
← todos os posts