DEV Community

Cover image for HTML5 - Elementos de Bloco e Web Semântica
Arthur Nascimento Assunção
Arthur Nascimento Assunção

Posted on

HTML5 - Elementos de Bloco e Web Semântica

#html #webdev #semantic #beginners

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:

<div>
    <div>bloco 1</div>
    <div>bloco 2</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Exemplo de span:

<p>O que é <span>HTML</span> e <span>CSS</span> ?</p>
Enter fullscreen mode Exit fullscreen mode

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
Figura 1. HTML4 vs HTML5 em visualização semântica. Fonte: Alejandro-ao.com.

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.
Figura 2. HTML5 semântico em exemplo.

Seção vs. Artigo no HTML5

Consulte esta discussão: Seção vs. Artigo 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.

<!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>
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)