HTML5 - Elementos Semânticos

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

<!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

<!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.

<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.

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

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

E os outros elementos?

Recomendo uma lida no MDN 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.

Blog