HTML5 - Elementos de Bloco e Web Semântica
Tags: webdev, beginners, html, semantic
Published: 2023-09-14 15:06:14


Neste artigo, vou apresentar as **tags de bloco HTML5** e discutir o conceito da **web semântica** juntamente com as **tags semânticas**.

## Tags de Bloco

Imagine que você precise organizar um parágrafo e uma imagem do mesmo contexto ou duas frases dentro de um parágrafo com formatação diferente. Como você pode estruturá-los de forma eficaz?

Para esse fim, temos as tags de bloco. Existem duas tags de bloco genéricas: `span` e `div`. Essas tags são usadas para:

- Definir uma divisão ou seção.
- Definir contêineres, principalmente a tag `div`.
- Separar partes do código para estilização com CSS.

Exemplo de `div`:

```html
<div>
    <div>bloco 1</div>
    <div>bloco 2</div>
</div>
```

Exemplo de `span`:

```html
<p>O que é <span>HTML</span> e <span>CSS</span> ?</p>
```

### A Diferença entre as Tags `div` e `span`

A tag `div` cria um contêiner com `display: block`, causando uma quebra de linha após ela. Por outro lado, a tag `span` cria um contêiner com `display: inline`, o que significa que nenhuma quebra de linha ocorre após o `span`.

Normalmente, usamos `div` para criar contêineres de layout, e `span` é usado para estilizar partes de textos.

## Web Semântica e HTML5

Por muitos anos, os desenvolvedores front-end usaram o `div` como contêiner de layout. No entanto, um `div` por si só não tem significado para várias entidades, como navegadores, desenvolvedores, mecanismos de busca e leitores de tela.

Para resolver isso, o Consórcio World Wide Web (W3C) introduziu a web semântica no HTML5, resultando em tags semânticas. A Figura 1 ilustra a diferença entre HTML4 e HTML5 em termos de semântica.

![HTML4 vs HTML5 em visualização semântica](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oi1k8dwkj1d6zt0i6aqf.png)
*Figura 1. HTML4 vs HTML5 em visualização semântica. Fonte: [Alejandro-ao.com](https://alejandro-ao.com/web-course/intro-to-html/semantic-html/).*

No HTML4, dependíamos do `div` para estruturar várias seções de uma página da web. No entanto, o HTML5 introduziu uma mudança significativa, criando tags semânticas específicas para seções comuns, conferindo significado ao conteúdo.

> Tags semânticas estão relacionadas ao significado do conteúdo.

Hoje em dia, usamos comumente:
- `header` para o cabeçalho da página, que pode incluir elementos como logotipos, formulários de pesquisa e nomes de autores. Geralmente, há um por seção, artigo ou corpo.
- `main` para o conteúdo principal da página, com apenas um por documento.
- `nav` para menus de navegação, especialmente a navegação importante ou primária.
- `article` para artigos no documento. Um artigo pode ter um cabeçalho, rodapé ou seções. Ele representa conteúdo independente na página.
- `section` para agrupar conteúdo relacionado no documento.
- `aside` para conteúdo lateral relacionado ao conteúdo principal.
- `footer` para o rodapé do documento, artigo ou seção, incluindo informações como autoria, direitos autorais e links relacionados.

A Figura 2 fornece um exemplo mais detalhado.

![Figura 2. HTML5 semântico em exemplo.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogvqgfnmaz6krhs7aztk.png)
*Figura 2. HTML5 semântico em exemplo.*

### Seção vs. Artigo no HTML5

Consulte esta discussão: [Seção vs. Artigo HTML5](https://stackoverflow.com/questions/7549561/section-vs-article-html5).

## Código Inicial Completo

Seguindo essa explicação, abaixo você encontrará um código HTML5 inicial completo. Por enquanto, ignore os atributos `class` e `id`.

```html
<!DOCTYPE html>
<html>
    <head>
        <!-- Arquivos externos (CSS, JS) e metadados -->
    </head>
    <body>
        <!-- Prefira usar classes para estilização; IDs são principalmente para JavaScript -->
        <header class="header" id="header">
            Cabeçalho da página
        </header>
        <nav class="nav">
            Menu
        </nav>
        <main class="content">
            <!-- Apenas um por página/documento -->
            Conteúdo principal
            <article>
                Artigo interno
                <header>Cabeçalho deste artigo</header>
                <section id="introduction">
                </section>
                <section id="content">
                </section>
                <section id="summary">
                </section>
                <!-- É possível ter artigos dentro de seções ou vice-versa; consulte o link do stackoverflow -->
            </article>
        </main>
        <section id="comments">
        </section>
        <footer class="footer">
        </footer>
    </body>
</html>
```

Explicação de cada linha do código HTML fornecido:

1. `<!DOCTYPE html>`: Esta é a declaração do tipo de documento, especificando que o documento é um documento HTML5.
2. `<html>`: Este é o início da tag `<html>`, indicando o início do documento HTML.
3. `<head>`: O elemento `<head>` contém metainformações sobre o documento, como links para arquivos externos (CSS e JavaScript) e metadados (como o título do documento).
4. `<!-- Arquivos externos (CSS, JS) e metadados -->`: Este é um comentário HTML, fornecendo uma nota para quem lê o código, mas não afeta a renderização da página. Ele sugere que a seção `<head>` é normalmente onde você inclui links para arquivos CSS e JavaScript externos e especifica metadados.
5. `<body>`: O elemento `<body>` é onde o conteúdo visível da página da web é colocado.
6. `<!-- Prefira usar classes para estilização; IDs são principalmente para JavaScript -->`: Outro comentário HTML, dando orientações sobre o uso de classes para estilizar elementos e reservar IDs principalmente para interações com JavaScript.
7. `<header class="header" id="header">`: Esta linha define um elemento `<header>` (`<header>`) com um atributo `class` e um atributo `id`. O atributo `class` está definido como "header", que pode ser usado para estilização com CSS. O atributo `id` também está definido como "header", identificando exclusivamente este elemento na página.
8. `Cabeçalho da página`: Dentro do elemento `<header>`, "Cabeçalho da página" é o conteúdo visível que será exibido como o cabeçalho da página.
9. `<nav class="nav">`: Esta linha define um elemento de navegação (`<nav>`) com um atributo `class` definido como "nav", indicando que é um menu de navegação.
10. `Menu`: Dentro do elemento `<nav>`, "Menu" é o conteúdo visível para o menu de navegação.
11. `<main class="content">`: Aqui, um elemento `<main>` é definido com um atributo `class` definido como "content". O elemento `<main>` geralmente contém o conteúdo principal da página.
12. `Conteúdo principal`: Dentro do elemento `<main>`, "Conteúdo principal" é o conteúdo visível que indica o conteúdo principal da página.
13. `<article>`: O elemento `<article>` é usado para representar um conteúdo independente, como uma postagem de blog, artigo ou notícia.
14. `Artigo interno`: Dentro do elemento `<article>`, "Artigo interno" representa o título ou cabeçalho do artigo.
15. `<header>Cabeçalho deste artigo</header>`: Esta linha define outro elemento `<header>` dentro do `<article>`, contendo o cabeçalho ou título do artigo.
16. `<section id="introduction">`: Esta linha define um elemento `<section>` com um atributo `id` definido como "introduction", que pode ser usado para direcionar e estilizar esta seção especificamente.
17. `<section id="content">`: Semelhante à linha anterior, esta define outro elemento `<section>` com um atributo `id` definido como "content".
18. `<section id="summary">`: Mais um elemento `<section>` é definido com um atributo `id` definido como "summary".
19. `<!-- É possível ter artigos dentro de seções ou vice-versa; consulte o link do stackoverflow -->`: Este é outro comentário HTML, fornecendo uma nota sobre a possibilidade de aninhar artigos dentro de seções ou vice-versa. Ele também faz referência a um link do Stack Overflow para mais informações.
20. `</article>`: Isso marca o final do elemento `<article>`, fechando-o.
21. `<section id="comments">`: Esta linha define um elemento `<section>` com um atributo `id` definido como "comments", provavelmente indicando uma seção onde os comentários ou discussões seriam inseridos.
22. `</section>`: Isso fecha o elemento `<section>` para comentários.
23. `<footer class="footer">`: Aqui, um elemento `<footer>` é definido com um atributo `class` definido como "footer", sugerindo que é a seção de rodapé da página.
24. `</footer>`: Isso fecha o elemento `<footer>`.
25. `</body>`: Isso marca o final do elemento `<body>`.
26. `</html>`: Esta é a tag de fechamento `</html>`, indicando o fim do documento HTML.

Cada linha deste código HTML contribui para a estrutura e conteúdo de uma página da web. Os comentários fornecem informações adicionais e orientações para entender o código.

### O Que Está Por Vir

Nos próximos artigos, você aprenderá como identificar uma tag.
Fique ligado!