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>
Exemplo de span:
<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.
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:
-
headerpara 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. -
mainpara o conteúdo principal da página, com apenas um por documento. -
navpara menus de navegação, especialmente a navegação importante ou primária. -
articlepara artigos no documento. Um artigo pode ter um cabeçalho, rodapé ou seções. Ele representa conteúdo independente na página. -
sectionpara agrupar conteúdo relacionado no documento. -
asidepara conteúdo lateral relacionado ao conteúdo principal. -
footerpara 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.
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>
Explicação de cada linha do código HTML fornecido:
-
<!DOCTYPE html>: Esta é a declaração do tipo de documento, especificando que o documento é um documento HTML5. -
<html>: Este é o início da tag<html>, indicando o início do documento HTML. -
<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). -
<!-- 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. -
<body>: O elemento<body>é onde o conteúdo visível da página da web é colocado. -
<!-- 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. -
<header class="header" id="header">: Esta linha define um elemento<header>(<header>) com um atributoclasse um atributoid. O atributoclassestá definido como "header", que pode ser usado para estilização com CSS. O atributoidtambém está definido como "header", identificando exclusivamente este elemento na página. -
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. -
<nav class="nav">: Esta linha define um elemento de navegação (<nav>) com um atributoclassdefinido como "nav", indicando que é um menu de navegação. -
Menu: Dentro do elemento<nav>, "Menu" é o conteúdo visível para o menu de navegação. -
<main class="content">: Aqui, um elemento<main>é definido com um atributoclassdefinido como "content". O elemento<main>geralmente contém o conteúdo principal da página. -
Conteúdo principal: Dentro do elemento<main>, "Conteúdo principal" é o conteúdo visível que indica o conteúdo principal da página. -
<article>: O elemento<article>é usado para representar um conteúdo independente, como uma postagem de blog, artigo ou notícia. -
Artigo interno: Dentro do elemento<article>, "Artigo interno" representa o título ou cabeçalho do artigo. -
<header>Cabeçalho deste artigo</header>: Esta linha define outro elemento<header>dentro do<article>, contendo o cabeçalho ou título do artigo. -
<section id="introduction">: Esta linha define um elemento<section>com um atributoiddefinido como "introduction", que pode ser usado para direcionar e estilizar esta seção especificamente. -
<section id="content">: Semelhante à linha anterior, esta define outro elemento<section>com um atributoiddefinido como "content". -
<section id="summary">: Mais um elemento<section>é definido com um atributoiddefinido como "summary". -
<!-- É 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. -
</article>: Isso marca o final do elemento<article>, fechando-o. -
<section id="comments">: Esta linha define um elemento<section>com um atributoiddefinido como "comments", provavelmente indicando uma seção onde os comentários ou discussões seriam inseridos. -
</section>: Isso fecha o elemento<section>para comentários. -
<footer class="footer">: Aqui, um elemento<footer>é definido com um atributoclassdefinido como "footer", sugerindo que é a seção de rodapé da página. -
</footer>: Isso fecha o elemento<footer>. -
</body>: Isso marca o final do elemento<body>. -
</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)