Semântica é o estudo do significado das palavras, frases e expressões. Ela ajuda a entender como usamos a linguagem
para comunicar ideias, sentimentos e informações. Por exemplo, quando dizemos "coração", podemos estar falando do
órgão do corpo ou de sentimentos como amor — e é a semântica que nos ajuda a interpretar isso corretamente.
Na prática, a semântica está presente em tudo o que falamos e escrevemos. Ela permite que a gente compreenda o
sentido por trás das palavras, levando em conta o contexto em que são usadas. É como se fosse o “sabor” da linguagem
— o que dá sentido real às palavras que escolhemos.
E o que isso tem a ver com o HTML5?
O HTML5 trouxe uma grande evolução ao permitir que os desenvolvedores usem tags com significado — ou seja,
semânticas. Isso quer dizer que, em vez de usar apenas <div> para tudo, agora podemos usar
<header>, <nav>, <main>, <article> e
outras que indicam claramente o papel de cada parte do conteúdo. Isso facilita a leitura do código, melhora a
acessibilidade para leitores de tela e ajuda os mecanismos de busca a entenderem melhor a estrutura da página.
Em resumo: a semântica no HTML5 é como dar nome aos blocos da sua página, tornando tudo mais organizado,
compreensível e profissional — tanto para humanos quanto para máquinas.
O HTML5 trouxe uma série de melhorias que tornaram o desenvolvimento web mais moderno, acessível e eficiente. Uma
das principais novidades foi a introdução de tags semânticas, como <header>,
<nav>, <main>, <article> e <footer>, que
ajudam a organizar o conteúdo com significado claro.
Outra grande mudança foi o suporte nativo a áudio e vídeo, com as tags <audio> e
<video>, eliminando a necessidade de plugins externos como Flash. Também foi incluído o elemento
<canvas>, que permite desenhar gráficos diretamente na página usando JavaScript.
O HTML5 também trouxe melhorias para formulários, com novos tipos de entrada como email,
url, date, range e color, facilitando a validação e a coleta de
dados. Além disso, passou a oferecer armazenamento local com localStorage e
sessionStorage, permitindo guardar informações no navegador sem depender de cookies.
A tag <header> é um elemento semântico do HTML5 que representa o cabeçalho de uma página ou
de
uma seção específica. Ela é usada para agrupar elementos introdutórios ou de navegação, como logotipos, títulos,
menus e até formulários de busca. O objetivo principal é fornecer contexto sobre o conteúdo que segue,
facilitando a
organização e a acessibilidade do site.
É importante não confundir <header> com <head>: enquanto
<head> contém metadados e configurações da página, <header> é parte
visível do
corpo do site. Além disso, a tag <header> pode ser usada dentro de outras seções como
<article>, <section> ou <aside>, sempre com a função de
introduzir aquele bloco de conteúdo.
Main
A tag <main> representa o conteúdo principal de uma página HTML. Ela foi criada no HTML5 para
indicar, de forma clara, qual parte do site é o foco principal — ou seja, o que realmente importa para o
visitante.
Tudo que está dentro do <main> deve estar diretamente relacionado ao propósito da página.
Por exemplo, em um blog, o texto do artigo estaria dentro do <main>. Já elementos como menus,
rodapés ou barras laterais ficam fora, pois são considerados complementares. É importante lembrar que só deve
haver
uma única tag <main> por página, e ela não pode estar dentro de outras tags
como
<header>, <footer> ou <nav>.
Footer
A tag <footer> representa o rodapé de uma página ou de uma seção específica. Ela é usada para
agrupar informações complementares, como dados do autor, direitos autorais, links de contato, políticas do site
ou
até uma navegação secundária. O objetivo é encerrar o conteúdo com elementos úteis e informativos, sem
interferir no
conteúdo principal.
Você pode usar múltiplos <footer> em uma mesma página, desde que cada um esteja relacionado
ao
seu bloco de conteúdo — por exemplo, um rodapé dentro de um <article> ou
<section>. No entanto, é importante evitar colocar um <footer> dentro de
outro
<footer> ou dentro de um <header>.
A tag <nav> é usada para definir uma área de navegação em uma página HTML. Ela agrupa links
que
levam o usuário para outras partes do site ou para seções dentro da mesma página. Isso inclui menus principais,
barras laterais, rodapés com links úteis e qualquer outro conjunto de navegação relevante.
Diferente de uma <div> comum, a <nav> tem significado semântico: ela
informa
aos navegadores e leitores de tela que aquele bloco contém links de navegação. Isso melhora a acessibilidade e
ajuda
mecanismos de busca a entenderem melhor a estrutura do site.
OL e UL
As tags <ol> e <ul> são usadas para criar listas em HTML. A diferença
entre
elas está na forma como os itens são apresentados: <ol> cria uma lista
ordenada, com
numeração ou letras, ideal para sequências ou passos; já <ul> cria uma lista não
ordenada,
com marcadores simples, usada quando a ordem dos itens não importa.
Em ambos os casos, os itens da lista são definidos com a tag <li>, que representa cada
elemento
individual. Você pode usar essas listas para menus, tópicos, instruções, entre outros.
LI
A tag <li> é usada para representar um item dentro de uma lista em HTML. Ela deve estar
sempre
contida em uma tag de lista, como <ul> (lista não ordenada), <ol> (lista
ordenada). Cada <li> define um elemento individual da lista, como um
tópico, opção ou passo.
Essa tag é essencial para organizar conteúdos em formato de lista, tornando a leitura mais clara e estruturada.
Você
pode usar quantos <li> quiser dentro de uma lista, e também pode criar listas aninhadas — ou
seja, listas dentro de listas — para representar hierarquias ou subcategorias.
A tag <table> é usada para criar tabelas em HTML, permitindo organizar dados em linhas e
colunas.
Ela é ideal para apresentar informações estruturadas, como listas de produtos, horários, resultados ou qualquer
conteúdo que precise de uma visualização clara e alinhada.
Dentro da tag <table>, usamos outras tags para montar a estrutura: <tr>
para
definir linhas, <td> para células de dados e <th> para cabeçalhos. Também
é
possível usar <caption> para adicionar um título à tabela, e <thead>,
<tbody> e <tfoot> para separar visualmente e semanticamente as partes da
tabela.
Thead
A tag <thead> é usada para agrupar o cabeçalho de uma tabela HTML. Ela organiza as linhas que
contêm os títulos das colunas, geralmente utilizando a tag <th> para destacar cada célula como
cabeçalho. Isso ajuda a tornar os dados mais claros e acessíveis, tanto para usuários quanto para leitores de tela.
O <thead> deve ser colocado logo após a abertura da tag <table>, antes do
<tbody> e do <tfoot>. Embora não altere visualmente a tabela por padrão, seu
uso melhora a semântica do código e facilita a aplicação de estilos com CSS.
Tbody
A tag <tbody> é usada para agrupar o corpo principal de uma tabela HTML — ou seja, as linhas que
contêm os dados reais. Ela funciona como uma divisão semântica que separa o conteúdo da tabela dos cabeçalhos
(<thead>) e do rodapé (<tfoot>), tornando o código mais organizado e
acessível.
Dentro do <tbody>, você deve usar a tag <tr> para criar linhas, e dentro de
cada linha, as tags <td> ou <th> para definir as células. Embora o uso do
<tbody> não altere visualmente a tabela por padrão, ele é essencial para manter uma estrutura
semântica clara.
A tag <tfoot> é usada para definir o rodapé de uma tabela HTML. Ela agrupa uma ou mais linhas que
geralmente contêm **totais, resumos ou informações finais** relacionadas aos dados apresentados. Embora visualmente
não altere a tabela por padrão, seu uso melhora a organização e a semântica do código.
O <tfoot> deve ser colocado dentro da tag <table>, normalmente **antes do
<tbody>**, mesmo que o conteúdo apareça visualmente no final. Isso permite que navegadores e
impressoras tratem o rodapé corretamente, como repetir o conteúdo em cada página impressa ou manter o rodapé fixo
com rolagem.
TR
A tag <tr> é usada para criar uma **linha** dentro de uma tabela HTML. Ela agrupa células de
dados (<td>) ou de cabeçalho (<th>) que formam uma linha horizontal. Cada vez
que você usa <tr>, está definindo uma nova linha na tabela — seja no cabeçalho, no corpo ou no
rodapé.
Essa tag deve estar sempre dentro de uma estrutura de tabela, como <thead>,
<tbody> ou <tfoot>. Dentro de cada <tr>, você pode colocar
quantas células quiser, respeitando a lógica da tabela.
TH
A tag <th> é usada para definir uma **célula de cabeçalho** em uma tabela HTML. Ela serve para
identificar o conteúdo das colunas ou linhas, funcionando como um título para os dados que estão ao lado ou abaixo.
Por padrão, os navegadores exibem o conteúdo da célula <th> em **negrito e centralizado**,
destacando visualmente o cabeçalho.
Essa tag deve estar dentro de uma linha <tr>, e pode ser usada tanto no
<thead> quanto no <tbody> ou <tfoot>, dependendo da função
da célula. Para melhorar a acessibilidade, é recomendado usar o atributo scope, indicando se o
cabeçalho se refere a uma linha (row) ou a uma coluna (col).
A tag <td> é usada para criar uma **célula de dados** dentro de uma tabela HTML. Ela representa o
conteúdo real de uma linha, como textos, números, imagens ou qualquer outro tipo de informação que você queira
exibir. Cada <td> deve estar dentro de uma linha <tr>, formando a estrutura da
tabela.
Diferente da tag <th>, que é usada para cabeçalhos, a <td> não tem destaque
visual por padrão — o conteúdo aparece alinhado à esquerda e sem negrito, mas isso pode ser facilmente personalizado
com CSS.
SUB e SUP
As tags <sub> e <sup> são usadas para formatar texto em subscrito e
sobrescrito, respectivamente. A tag <sub> posiciona o texto um pouco abaixo da linha base —
comum em fórmulas químicas, como H2O. Já a tag <sup> posiciona o texto acima da linha
— ideal para expoentes matemáticos, como x2.
Essas tags são úteis para dar clareza visual e semântica a conteúdos técnicos, científicos ou matemáticos, mantendo
a estrutura do texto organizada e acessível.
