Fale com a gente no WhatsApp Fale com a gente no WhatsApp
Fale com a gente no WhatsApp

Desenvolvimento Front-end HTML

Semântica HTML: O que é e por que é importante

Neste artigo, veremos a importância do uso da Semântica HTML e como utilizamos as tags em nossos projetos, mantendo assim o código semântico.

há 1 ano 7 meses

Formação Base para desenvolvedor
Conheça a formação em detalhes

A Semântica HTML é um conceito fundamental na construção de páginas web. Trata-se da utilização correta das tags HTML para representar o conteúdo de uma página web de forma clara e significativa.

Sendo assim, a semântica é importante por vários motivos, como a acessibilidade, a indexação por mecanismos de busca e a legibilidade do código.

O que é?

Em primeiro lugar, a Semântica HTML é o uso correto das tags HTML para indicar o significado do conteúdo de uma página web. Isso significa que cada tag deve ser usada de forma apropriada para descrever o que o conteúdo representa.

Por exemplo, para escrevermos um título, devemos utilizar a tag <h1>, enquanto um parágrafo deve ser envolvido pela tag <p>. Quando usamos as tags corretas para cada tipo de conteúdo, a página se torna mais acessível e legível para os usuários e mecanismos de busca.

Por que a Semântica HTML é importante para acessibilidade?

A Semântica HTML é importante para a acessibilidade porque permite que as pessoas com deficiências visuais ou outras limitações possam navegar pelas páginas com mais facilidade.

Acessibilidade - Introdução
Curso Acessibilidade - Introdução
Conhecer o curso

As tags semânticas nos ajudam a estruturar o conteúdo da nossa página de uma forma lógica e significativa, permitindo que leitores de tela, por exemplo, possam identificar facilmente o que é um título, um parágrafo ou uma lista.

Como a semântica afeta a indexação por mecanismos de busca?

A Semântica HTML é importante para a indexação por mecanismos de busca, pois ajudam os robôs dos mecanismos de busca a entender melhor o conteúdo da página.

As tags semânticas permitem que os mecanismos de busca identifiquem facilmente o título da página, o conteúdo principal e as seções secundárias. Isso ajuda a melhorar a relevância da página nos resultados de busca.

Como a semântica afeta a legibilidade do código?

A Semântica HTML afeta a legibilidade do código porque torna o código mais fácil de entender e interpretar. Quando utilizamos as tags semânticas corretamente, o código se torna mais legível e estruturado, permitindo que outros desenvolvedores possam entender e modificar nosso código com mais facilidade. Isso é especialmente importante em projetos grandes e complexos.

Como usar a Semântica HTML corretamente?

Para usarmos a Semântica HTML corretamente, é importante entendermos o significado de cada tag e como devemos utilizá-la. É recomendável usarmos as tags HTML5 semânticas, como header, main, nav, section, article, aside, figure e footer.

  • header - Utilizamos para representar o cabeçalho de um documento ou seção declarado no HTML. Nele podemos inserir elementos de <h1> a <h6>;

  • main - Especificamos o conteúdo principal e, consequentemente, de maior relevância dentro da página;

  • nav - Utilizamos quando precisamos representar um agrupamento de links de navegação, que, por sua vez, são criados com os elementos <ul>, <li> e <a>;

HTML5 + CSS3 -  Construindo sites semânticos
Curso HTML5 + CSS3 - Construindo sites semânticos
Conhecer o curso

  • section - Representamos uma seção em um documento e geralmente contém um título, o qual é definido por meio de um dos elementos entre <h1> e <h6>.

  • article - Quando precisamos declarar um conteúdo que não precisa de outro para fazer sentido em um documento HTML, por exemplo, um artigo em um blog;

  • aside - Utilizado quando precisamos criar um conteúdo de apoio/adicional ao conteúdo principal;

  • figure - é uma marcação de uso específico para a inserção de uma figura;

  • footer - Representamos o rodapé de um documento, como a área presente no final de uma página web.

Ainda mais, é de suma importância evitarmos o uso excessivo de <div> e <span> para estruturarmos o conteúdo da página, pois isso torna nosso código mais confuso e difícil de ler.

Exemplo de código utilizando Semântica HTML

Só para exemplificar, podemos observar a diferença entre um código utilizando a semântica HTML e um composto apenas por <div>, através destes códigos:

Código sem semântica

<div class="header">
	<div class="logo">
		<img src="logo.svg" alt="logo da TreinaWeb">
	</div>
	<div class="title">
		<div class="titulo">TreinaWeb</div>
	</div>
</div>

Código utilizando semântica

<header class="cabecalho">
	<section class="logo">
		<img src="logo.svg" alt="logo da TreinaWeb">
	</section>
	<section class="title">
		<h1 class="titulo">TreinaWeb</h1>
	</section>
</header>

Acessibilidade -  Desenvolvendo sites acessíveis
Curso Acessibilidade - Desenvolvendo sites acessíveis
Conhecer o curso

Em resumo, a Semântica HTML é um conceito importante para a construção de páginas web.

Aqui, nós temos um breve exemplo ilustrando como devemos utilizar as tags semânticas HTML.

imagem ilustrando as tags semânticas HTML e onde cada uma deve ser utilizada

Conclusão

Em conclusão, a semântica HTML é fundamental para criar páginas web acessíveis e otimizadas para mecanismos de busca. A utilização de elementos semânticos corretos permite que os navegadores, leitores de tela e outros dispositivos possam interpretar corretamente o conteúdo de uma página, tornando-a mais acessível para pessoas com deficiências visuais ou cognitivas.

Além disso, a semântica também desempenha um papel importante no SEO, ajudando os mecanismos de busca a entender o conteúdo de uma página e, assim, melhorar sua posição nos resultados de pesquisa.

Portanto, é essencial que os desenvolvedores web priorizem o uso da semântica em seus projetos, garantindo uma melhor experiência para todos os usuários da web.

Autor(a) do artigo

Rafael Oliveira
Rafael Oliveira

Estudante de programação, atualmente me especializando no Front End. Faço curso de Desenvolvimento de Sistemas na Escola Tecnica Estadual Doutora Ruth Cardoso e o meu principal objetivo é me tornar um Full Stack. Nas horas vagas costumo cozinhar, pois sou apaixonado pela área da culinária.

Todos os artigos

Artigos relacionados Ver todos