HTML5 - Elementos Semânticos
Tags: braziliandevs
Published: 2022-01-08 18:25:05

> Disclaimer: This post is in Brazilian Portuguese 🇧🇷

Agora que você decidiu aprender programação, você escutará e lerá bastante o termo boa prática, exercida pelo mercado e pela comunidade a fim de organizar o código e deixar mais legível para quem for fazer a manutenção depois.

Embora HTML não seja uma linguagem de programação (Linguagem de Marcação de Hipertexto), e sim uma linguagem de marcação, ela é fundamental para o funcionamento da WEB como conhecemos hoje.

> Uma boa prática de programação é separar a estrutura (HTML), estilo (CSS) e comportamento (JavaScript).

## As vantagens do HTML semântico:

- Fácil de interpretar
- Melhoria na qualidade de SEO do site (posicionamento em sites de pesquisa)
- Melhor entendimento para leitores de acessibilidade
- Mais compreensível para o computador

## Anatomia de uma página HTML5

```html
<!DOCTYPE html>
<html>
  <head>
		<meta charset="utf-8">
    <title>Titulo da Pagina</title>
  </head>
  <body>
		<!--No header fica o cabeçalho do site -->
    <header></header>

		<!-- Na main fica o conteúdo da página -->
		<main>

			<section>
				<article>
					<figure>
						<img>
						<figcaption></figcaption>
					</figure>
				</article>
			</section>

		</main>

		<!-- No footer fica o rodapé da página -->
		<footer>&copy; Direitos reservados</footer>
  </body>
</html>
``` 

## Anatomia de uma página sem HTML semântico
```html
<!DOCTYPE html>
<html>
  <head>
		<meta charset="utf-8">
    <title>Titulo da Pagina</title>
  </head>
  <body>
		<div id="header"></div>
		<div id="main">
				<div class="section">
				<div class="article">
					<div class="figure">
						<img>
						<div class="figcaption"></div>
					</div>
				</div>
			</div>
		</div>
		<div id="footer"></div>
	</body>
</html>
```

Qual é mais fácil de ler?

No HTML semântico temos um código mais consistente, o que é diferente quando estamos colocando `divs` em todos os lugares da página, sem saber qual elemento está fechando quem ou o que. Além de melhorar profundamente a acessibilidade do site.

Isso quer dizer que o `div` não deve ser utilizado? Não. Embora não possua valor semântico, pode ser utilizado e ter outros fins.

Lembre-se que quando você estiver desenvolvendo sua página HTML ela poderá ser visualizada por pessoas com diminuição de alguma capacidade, é seu papel trabalhar e atuar com a universalização do acesso e a garantia de abranger o maior número possível do público.

**Todos tem direito a consumir conteúdo de qualidade e cabe a você proporcionar uma estrutura bem organizada e coesa.**

### Elementos semânticos do HTML5

- header

Geralmente é encontrado no topo da página, é onde conterá o cabeçalho da sua página, com a logo e o sistema de navegação.

```html
<header>
	<h1>Marca</h1>
	<ul>
		<li><a href="#">Index</a></li>
		<li><a href="/projetos">Projetos</a></li>
		<li><a href="/sobre">Sobre</a></li>
	</ul>
</header>
```

- main

Define o conteúdo principal da página.

Aqui tudo que for referente ao conteúdo da sua página, se você estiver desenvolvendo um portfolio, ficará a descrição sobre você, seus projetos, sua página de sobre.

- footer

Geralmente encontrado ao final da página, o rodapé. É onde, normalmente, se encontram as informações legais, detalhes do autor.

- section e article

Afinal, tem diferença? Qual usar?

Ambos são usados para definir o espaço de um conteúdo, podendo ser usados de forma intercalada sem mudança aparente no site. Eles surgiram com o HTML5 para substituir o `div`.

![TechCrunch Landing Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54g4owabn6mwelltrjwc.jpg)

Uma boa regra que você pode pensar na hora de aplicar, é:

1. article, são independentes e reutilizáveis (caixas em azul).
2. section, servem como temas para um conteúdo (caixa em vermelho).

### E os outros elementos?

Recomendo uma lida no [MDN](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element) que trará descrições sobre o nav, aside de forma mais clara, assim como os elementos strong, small, mark que são fundamentais para uma boa acessibilidade ao site que você estiver desenvolvendo.

### Até mais

Essa foi uma introdução sobre elementos semânticos, em breve volto com um novo post sobre elementos não-semânticos.