Elementos semânticos do HTML5 explicados

Gustavo Goulart Baptista — Tue, 15 Feb 2022 17:44:12 +0000

Artigo original: Semantic HTML5 Elements Explained

Elementos semânticos do HTML5 são aqueles que descrevem claramente seu significado de uma maneira que seja legível tanto para humanos quanto para máquinas.

Elementos como

(cabeçalho, rodapé e artigo, respectivamente, traduzidos para o português) são considerados semânticos, pois eles descrevem com precisão o propósito do elemento e o tipo de conteúdo dentro dele.

O que são elementos semânticos?

O HTML foi originalmente criado como uma linguagem de marcação para descrever documentos no início da internet. Conforme a internet cresceu e foi sendo adotada por cada vez mais pessoas, algumas mudanças precisaram acontecer.

A internet, que foi originalmente pensada para compartilhamento de artigos científicos, agora se tornou um local onde as pessoas querem compartilhar outras coisas também. Rapidamente, elas começaram a querer fazer com que a Web fosse mais atrativa visualmente.

Devido à web não ser ter sido inicialmente construída pensando em design, os programadores usaram alguns truques diferentes para arrumar tudo de diversas maneiras. Ao invés de usar a tag

(tabela, em inglês) para descrever informações usando uma tabela, programadores a usavam para posicionar outros elementos dentro de uma página.

Conforme as interfaces progrediram visualmente, os programadores começaram a usar tags genéricas e não semânticas como

(divisão, em inglês). Eles costumavam dar a esses elementos atributos de classe (class) ou id que descrevessem seu propósito. Por exemplo, ao invés de

era comumente escrito algo como

Como o HTML5 é algo ainda relativamente novo, esse uso de elementos não semânticos ainda é muito comum em websites atualmente.

Lista de elementos semânticos:

Os elementos semânticos adicionados ao HTML5 foram:

Elementos como

funcionam mais ou menos como elementos

. Eles agrupam outros elementos juntos em seções de uma página. Uma tag

poderia conter qualquer tipo de informação. Contudo, é fácil identificar que tipo de informação seria incluída em uma tag semântica como

Um exemplo de uma interface com elementos semânticos da w3schools

Por que usar elementos semânticos?

Para ver os benefícios dos elementos semânticos, aqui temos dois trechos de código em HTML. Esse primeiro bloco de código utiliza elementos semânticos:

Enquanto esse segundo bloco de código usa elementos não semânticos:

O primeiro é muito mais fácil de ler. Essa, provavelmente, é a primeira coisa que você notará quando for ler o primeiro trecho de código, que está usando elementos semânticos. Esse é um exemplo pequeno. Porém, como programador, você lerá centenas ou milhares de linhas de código. Quanto mais fácil for ler e entender o código, mais fácil será seu trabalho.

Ele tem maior acessibilidade. Você não é o único que acha que elementos semânticos são mais fáceis de entender. Os algoritmos de indexação em sites de busca e as tecnologias assistivas (como leitores de tela para usuários com deficiência visual) também entenderão melhor o contexto e conteúdo do seu website, entregando uma melhor experiência para os usuários.

Geralmente, elementos semânticos também resultam em um código mais consistente. Quando criamos um cabeçalho usando elementos não semânticos, diversos programadores podem escrever algo como

ou, simplesmente,

. Existem várias maneiras de criar blocos de código para representar um elemento de cabeçalho. Todas eles dependem de uma preferência pessoal do programador. Criando um padrão com elementos semânticos, facilitamos o trabalho para todos.

Em outubro de 2014 o HTML4 foi atualizado para o HTML5, que incluiu alguns novos elementos "semânticos". Até hoje, alguns de nós ainda nos confundimos com relação aos diversos elementos que não parecem demonstrar nenhuma grande mudança.

e

"Qual a diferença?", você pode estar se perguntando. Ambos os elementos são usados para seccionar o conteúdo – e, sim, eles definitivamente podem ser intercambiáveis. É uma questão de analisar cada situação. O HTML4 nos oferecia somente um tipo de elemento container, a

. Embora ela ainda seja usada em HTML5, ainda temos a possibilidade de substituí-la em duas maneiras, usando

Os elementos

são conceitualmente similares e intercambiáveis. Para decidir qual deles você deve escolher, observe o que citaremos abaixo:

Um
tem como objetivo ser independentemente distribuível ou reutilizável.
Uma
é um temático agrupamento de conteúdos.


  Histórias novas
  
    Notícias
    História 1
    História 2
    História 3
  
  
    Esportes
    História 1
    História 2
    História 3

e

O elemento

é geralmente encontrado no topo de um documento, uma seção ou um artigo e geralmente contém o cabeçalho principal da página e algumas navegações e barras de busca.


  Company A
  
    Home
    Sobre
    Contato

O elemento

deve ser usado quando você quer um cabeçalho principal com um ou mais subcabeçalhos.


  Cabeçalho 1
  Subcabeçalho 1
  Subcabeçalho 2

Lembre-se de que o elemento

pode conter qualquer conteúdo. Porém, o elemento somente contém outros cabeçalhos, ou seja, elementos de

(header1, do inglês) a

(header6, do inglês) e outros .

O elemento

é destinado a conteúdos que não fazem parte do fluxo do texto, mas que, ainda sim, estão relacionados de alguma forma. Esse

poderia ser utilizado como uma barra lateral (sidebar) para o seu conteúdo principal.


  Essa é uma sidebar, por exemplo, uma definição de uma terminologia ou uma descrição curta para uma imagem de uma figura histórica.

Antes do HTML5, nosso menus eram criados com as tags

. Agora, junto com esses elementos, nós podemos separar nosso itens no menu com um elemento
para a navegação entre as páginas. Você pode ter mais de um elemento
na página. É comum, por exemplo, ter uma navegação global percorrendo o topo da página (dentro do elemento
) e uma navegação local em uma sidebar (dentro de um elemento
).
Home Sobre Contato
Se existe um
(cabeçalho, em inglês), deve existir um
(rodapé, em inglês). Uma tag
é geralmente encontrada no final de um documento, uma seção ou um artigo. Assim como no
o conteúdo é geralmente uma metainformação, por exemplo, com detalhes sobre o autor, informações legais, e/ou links e informações relacionadas. Também é válido incluir elementos
dentro de um footer.
©Empresa A
O elemento (pequeno, na tradução para o português) sempre aparece dentro de um elemento
ou
, normalmente incluindo informações de direitos autorais ou avisos legais, além de outras "letras miúdas". No entanto, esse elemento não é feito para deixar seu texto menor. É apenas uma descrição de seu conteúdo e não faz nenhuma prescrição visual.
©Empresa A Data
O elemento permite que uma data no formato ISO 8601 não ambígua seja adicionada a uma versão mais amigável para leitura humana daquela data.
Terça, 31 Outubro 2017
Por que se preocupar com ? Embora humanos possam eliminar ambiguidades e ler o tempo de maneiras normais, os computadores podem ler datas em formato ISO 8601 e ver a data, a hora e o fuso horário.
e
serve para inserir conteúdos de imagem, enquanto
é destinado às legendas dessa imagem.
Arte de capa de Middle Earth: Shadow of Mordor
Aprenda mais sobre os novos elementos do HTML5:
A w3schools mantém uma descrição simples e clara de muitos dos novos elementos e de como/onde eles devem ser usados.
A MDN também é uma grande referência para todos os elementos HTML e vai mais a fundo em cada um deles.

Modelo básico de HTML5: Use este boilerplate de HTML para começar qualquer projeto de desenvolvimento para a web

Daniel Rosa — Tue, 11 Jan 2022 01:19:09 +0000

Artigo original: Basic HTML5 Template: Use This HTML Boilerplate as a Starter for Any Web Dev Project

Ao criar um novo site da web, é importante ter uma boa base de início. Neste artigo, explicarei o que é um boilerplate de HTML 5 e como criar um modelo (template) básico para usar em seus projetos.

O que é um boilerplate de HTML 5?

De acordo com a Wikipédia,

um código boilerplate ou simplesmente boilerplate são seções de código que são repetidas em vários lugares com pouca ou nenhuma variação.

Um boilerplate em HTML é um modelo que você adicionará ao início do seu projeto. Você deve adicionar esse boilerplate a todas as suas página de HTML.

Exemplo de boilerplate de HTML 5

Vamos examinar um exemplo básico.



  
    
    
    
    HTML 5 Boilerplate

O que é um doctype em HTML?

A primeira linha do seu código em HTML deve ser a declaração de doctype. Um doctype diz ao navegador em qual versão do HTML a página está escrita.

Se você esquecer de incluir essa linha de código em seu arquivo, algumas das tags de HTML 5, como

, < footer > e

poderão não ter o suporte de seu navegador.

O que é um elemento raiz (root) HTML?

A tag é o elemento de nível superior do arquivo HTML. Você aninhará as tags e dentro dela.

O atributo lang dentro da tag de abertura define o idioma da página. Também é bom incluir o idioma por questões de acessibilidade, pois os leitores de tela saberão como pronunciar adequadamente o texto.

O que são as tags head em HTML?

As tags contêm as informações que são processadas pelas máquinas. Dentro das tags , você aninhará os metadados, que são os dados que descrevem o documento para a máquina.


    
    
    
    HTML 5 Boilerplate

O que é a codificação de caracteres UTF-8?

O UTF-8 é a codificação de caracteres padrão que você deve usar em suas páginas da web. Ela geralmente será a primeira tag exibida no elemento .

De acordo com o World Wide Web Consortium (página em inglês),

Uma codificação baseada em Unicode, como o UTF-8, pode dar suporte a vários idiomas e acomodar as páginas e formulários com qualquer mistura desses idiomas. Seu uso também elimina a necessidade de lógica do lado do servidor para determinar de modo individual a codificação de caracteres para cada página servida ou para cada envio de formulário que é recebido.

O que é a tag meta viewport no HTML?

Essa tag renderiza a largura da página no tamanho da tela do dispositivo. Se você tem um dispositivo móvel de 600px de largura, a janela do navegador também terá 600px de largura.

O parâmetro initial-scale controla o nível de zoom. O valor de 1 para initial-scale evita o zoom padrão dos navegadores.

O que significa X-UA-Compatible?

Essa tag especifica o modo de documento para o Internet Explorer. IE=edge é o maior modo suportado.

O que são as tags title em HTML?

A tag </code> é o título da página da web. Esse texto é mostrado na barra de título do navegador.</p><pre><code class="language-html"> <title>HTML 5 Boilerplate

Folha de estilo de CSS (stylesheet)

Este código vinculará seu CSS personalizado à página em HTML. rel="stylesheet" define a relação entre o arquivo HTML e a folha de estilo (stylesheet) externa.

Tags de script em HTML

Tags de script externo serão colocadas logo antes da tag de fechamento do elemento body. É aí que você deve vincular seu código em JavaScript externo.

Conclusão

Você deve adicionar um boilerplate de HTML 5 a cada uma de suas páginas de HTML. Esse código inicial contém informações importantes, como o doctype, metadados, folhas de estilo externas e tags de script.

HTML5 - freeCodeCamp.org

Elementos semânticos do HTML5 explicados

e

Modelo básico de HTML5: Use este boilerplate de HTML para começar qualquer projeto de desenvolvimento para a web

O que é um boilerplate de HTML 5?

Exemplo de boilerplate de HTML 5

O que é um doctype em HTML?