Dev NotesA Linguagem da Web

HTML5 Tags

As tags HTML5 são tipo os blocos de construção do seu site. Cada uma tem sua função pra mostrar um tipo de conteúdo diferente.

Sumário:

  1. Comentários: Pra você não se perder (e nem os outros!) - Sabe quando você quer deixar uma anotação no código pra lembrar de algo ou explicar alguma coisa? É pra isso que servem os comentários!
  2. Links e Âncoras (Tag <a>): Pra ir de um lugar pro outro - Quer botar um link pra outra página, pra um site amigo ou pra algum lugar dentro da sua própria página? A tag `<a>` é a chave!
  3. Abreviações (Tag <abbr>): Pra não escrever tudo toda hora - Sabe quando você usa uma sigla ou abreviação? Com a tag `<abbr>`, você pode mostrar o significado completo quando alguém passar o mouse por cima.
  4. Endereço (Tag <address>): Pra deixar seus contatos - Quer mostrar um endereço, um e-mail ou outras informações de contato? A tag `<address>` é a certa pra isso.
  5. Área Sensível (Tag <area>): Pra clicar em pedacinhos da imagem - Já viu aquelas imagens que você clica em um pedaço e vai pra outro lugar? A tag `<area>` ajuda a definir essas áreas clicáveis.
  6. Artigo (Tag <article>): Pra conteúdo que faz sentido sozinho - Sabe um post de blog, uma notícia ou qualquer conteúdo que dá pra entender mesmo fora do resto da página? A tag `<article>` é pra ele!
  7. Laterais (Tag <aside>): Pra um conteúdo extra, mas relacionado - Sabe quando você tem uma informação extra que tem a ver com o conteúdo principal, mas não é super essencial? A tag `<aside>` é perfeita pra isso!
  8. Áudio (Tag <audio>): Pra botar um som na página - Quer adicionar uma música, um podcast ou qualquer arquivo de áudio no seu site? A tag `<audio>` te ajuda nessa!
  9. Negrito (Tag <b>): Pra deixar o texto mais forte - Quer dar um destaque pra uma palavra ou frase deixando ela em negrito? A tag `<b>` faz isso rapidinho.
  10. Base (Tag <base>): Pra facilitar a vida com os links - Às vezes, todos os links da sua página começam com o mesmo endereço. Com a tag `<base>`, você define esse endereço uma vez só e não precisa repetir em todos os links.
  11. Bidirecional (Tag <bdi>): Pra textos que vão e vêm (tipo árabe) - Se você tem um texto que pode ser lido da direita pra esquerda (como em árabe), mas tá no meio de um texto que vai da esquerda pra direita, a tag `<bdi>` ajuda a isolar ele pra não bagunçar a leitura.
  12. Bidirecional Anulado (Tag <bdo>): Pra mudar a direção do texto - Se você tem um texto que normalmente seria lido da direita pra esquerda, mas quer que ele apareça da esquerda pra direita, a tag `<bdo>` faz isso.
  13. Bloco de Citação (Tag <blockquote>): Pra citações longas - Se você quer colocar uma citação longa, a tag `<blockquote>` é a escolha certa. Ela deixa claro que o texto ali é uma citação.
  14. Corpo (Tag <body>): Onde a mágica acontece (o conteúdo visível) - A tag `<body>` é tipo o palco do seu site. Tudo que você vê na página (textos, imagens, links, etc.) fica dentro dela.
  15. Botão (Tag <button>): Pra interagir com o usuário - Quer botar um botão pra galera clicar e fazer alguma coisa (enviar um formulário, abrir uma janela, etc.)? A tag `<button>` é a solução.
  16. Canvas (Tag <canvas>): Pra desenhar o que quiser! - Se você quer criar gráficos, desenhos ou animações direto na página, a tag `<canvas>` é como uma tela em branco pra você usar a criatividade (geralmente com JavaScript).
  17. Legenda de Campo (Tag <caption>): Pra botar um título na tabela - Quer colocar um título ou uma explicação pra sua tabela? A tag `<caption>` faz esse trabalho!
  18. Citação (Tag <cite>): Pra dizer de onde veio aquela ideia - Se você tá mencionando um livro, um filme, uma música ou outra obra, a tag `<cite>` ajuda a marcar o título dessa obra.
  19. Código (Tag <code>): Pra mostrar um trechinho de código - Quer mostrar um pedacinho de código de programação na sua página? A tag `<code>` é a ideal pra isso.
  20. Coluna (Tag <col>): Pra estilizar colunas da tabela de uma vez - Se você quer mudar o estilo de uma ou mais colunas inteiras da sua tabela, a tag `<col>` te ajuda a fazer isso de um jeito mais fácil.
  21. Grupo de Colunas (Tag <colgroup>): Pra juntar colunas e estilizar junto - Às vezes, você quer aplicar o mesmo estilo pra um grupo de colunas na sua tabela. A tag `<colgroup>` serve pra você agrupar essas colunas.
  22. Data (Tag <data>): Pra dar um valor 'de verdade' pro conteúdo - Essa tag é usada pra você associar um valor específico a um conteúdo. Tipo, mostrar um preço formatado, mas guardar o valor numérico pra outras coisas.
  23. Lista de dados (Tag <datalist>): Pra dar sugestões em campos de texto - Sabe quando você começa a digitar num campo de busca e aparecem várias sugestões? A tag `<datalist>` ajuda a criar essas listas de opções.
  24. Definição (Tag <dd>): A explicação do termo - Naquelas listas de definições (tipo um dicionário), a tag `<dd>` é onde você coloca a explicação do termo que veio antes.
  25. Deletado (Tag <del>): Pra mostrar que algo foi removido - Sabe quando você quer mostrar que um texto foi apagado, mas ainda quer que ele apareça (geralmente com uma linha no meio)? A tag `<del>` faz isso.
  26. Detalhes (Tag <details>): Pra esconder e mostrar mais informações - Essa tag é ótima pra esconder um monte de informação extra que nem sempre precisa aparecer. Você coloca um resumo com a tag `<summary>` e o resto dentro de `<details>`. Aí a pessoa clica se quiser ver mais.
  27. Definição de Termo (Tag <dfn>): Marcando o que significa aquela palavra - Se você tá apresentando um termo novo e quer deixar claro que essa é a definição dele, use a tag `<dfn>`.
  28. Diálogo (Tag <dialog>): Pra criar janelinhas de conversa - Quer criar aquelas janelas que aparecem na frente da página pra dar um aviso ou pedir uma confirmação? A tag `<dialog>` é pra isso.
  29. Divisão (Tag <div>): A caixa multiuso do HTML - A tag `<div>` é tipo uma caixa invisível que você usa pra agrupar outros elementos HTML e organizar sua página.
  30. Lista de Definição (Tag <dl>): Tipo um dicionário na web - Se você quer criar uma lista de termos e suas definições, a tag `<dl>` é perfeita. Pense num dicionário online.
  31. Lista de Definição de Termos (Tag <dt>): O termo que você vai explicar - Na lista de definições (`<dl>`), a tag `<dt>` é onde você coloca o termo que você vai explicar logo em seguida com a tag `<dd>`.
  32. Destaque (Tag <em>): Pra dar uma ênfase no texto - Quer dar uma ênfase em alguma palavra ou frase no seu texto? A tag `<em>` geralmente deixa o texto em itálico pra mostrar que é importante.
  33. Embed (Tag <embed>): Pra colocar vídeos, áudios e outros arquivos na página - Quer mostrar um vídeo, um áudio, um PDF ou outro tipo de arquivo multimídia direto na sua página? A tag `<embed>` é uma forma de fazer isso.
  34. Campo de Formulário (Tag <fieldset>): Pra organizar os campos do formulário - Se você tem um formulário com vários campos, a tag `<fieldset>` te ajuda a agrupar eles por assunto, deixando tudo mais organizado.
  35. Legenda de Figura (Tag <figcaption>): Pra botar uma descrição na imagem - Sabe quando você coloca uma imagem e quer botar um textinho embaixo explicando o que ela é? A tag `<figcaption>` é perfeita pra isso.
  36. Figura (Tag <figure>): Pra agrupar imagem e legenda - Se você tem uma imagem e quer colocar uma legenda juntinho dela, a tag `<figure>` é perfeita pra agrupar os dois como uma unidade.
  37. Rodapé (Tag <footer>): O final da página com infos extras - Sabe aquela parte de baixo da página que geralmente tem informações de copyright, links úteis ou contatos? Essa é a função da tag `<footer>`.
  38. Formulário (Tag <form>): Pra coletar informações dos usuários - Se você precisa que as pessoas digitem informações, escolham opções ou enviem arquivos, a tag `<form>` é o ponto de partida pra criar um formulário.
  39. Cabeçalho (Tags <h1> a <h6>): Pra organizar os títulos da página - As tags de `<h1>` até `<h6>` servem pra você criar os títulos e subtítulos da sua página, mostrando o que é mais importante (<h1>) e o que é menos (<h6>).
  40. Container de meta-informação (Tag <head>): O cérebro da página (informações nos bastidores) - A tag `<head>` guarda informações importantes sobre a sua página que não aparecem diretamente pro usuário, como o título da aba do navegador, configurações de caracteres e links para arquivos CSS e JavaScript.
  41. Cabeçalho de Grupo (Tag <header>): O topo da página ou de uma seção - A tag `<header>` geralmente fica no começo da página ou de uma seção e pode ter o título principal, um subtítulo, um menu de navegação, etc.
  42. Cabeçalho de Grupo (Tag <hgroup>): Pra juntar títulos que se completam - Se você tem um título principal (`<h1>`) e um subtítulo (`<h2>`) que estão super ligados, a tag `<hgroup>` ajuda a juntar eles como um grupo só.
  43. Divisão Horizontal (Tag <hr>): Pra separar assuntos - Sabe aquela linha que você bota pra separar um assunto do outro? No HTML, a tag `<hr>` faz essa linha aparecer.
  44. Html (Tag <html>): A base de tudo! - A tag `<html>` é a principal de todas! Ela marca o começo e o fim de todo o seu documento HTML.
  45. Itálico (Tag <i>): Pra deixar o texto meio de ladinho - Quer deixar uma palavra ou frase em itálico? A tag `<i>` faz o texto ficar meio inclinado.
  46. Iframe (Tag <iframe>): Pra botar uma página dentro de outra - Sabe quando você vê um vídeo do YouTube incorporado em um site? A tag `<iframe>` serve pra colocar uma página inteira dentro da sua.
  47. Imagem (Tag <img>): Pra mostrar fotos e figuras - Quer botar uma foto, um desenho ou qualquer imagem na sua página? A tag `<img>` faz isso rapidinho.
  48. Entrada (Tag <input>): Onde o usuário digita as coisas - A tag `<input>` é o campo onde as pessoas podem digitar texto, escolher opções, marcar caixas, etc., dentro de um formulário.
  49. Inserir (Tag <ins>): Pra mostrar que algo foi adicionado - Sabe quando você quer mostrar que um texto foi adicionado (tipo numa atualização)? A tag `<ins>` geralmente sublinha o texto pra indicar isso.
  50. Teclado (Tag <kbd>): Pra mostrar o que o usuário digita - Se você quer mostrar um comando de teclado ou algo que o usuário precisa digitar, a tag `<kbd>` geralmente usa uma fonte diferente pra destacar isso.
  51. Rótulo (Tag <label>): Pra dizer o que cada campo do formulário significa - A tag `<label>` serve pra você colocar um textinho explicando o que o usuário tem que digitar ou escolher em cada campo do formulário.
  52. Legenda de Título (Tag <legend>): O título da caixinha de campos do formulário - Dentro da tag `<fieldset>`, você usa a tag `<legend>` pra colocar um título naquela caixinha de campos do formulário.
  53. Lista de Itens (Tag `<li>`): Cada item da sua lista - Se você quer fazer uma lista (com bolinhas ou números), cada item dessa lista vai dentro da tag `<li>`.
  54. Link (Tag `<link>`): Pra ligar sua página a outros arquivos (tipo CSS) - A tag `<link>` serve pra conectar sua página HTML com outros arquivos importantes, como os arquivos de estilo CSS que deixam seu site bonito.
  55. Conteúdo principal (Tag `<main>`): Onde fica a parte mais importante da página - A tag `<main>` serve pra marcar qual é o conteúdo principal da sua página, aquilo que é mais importante pro usuário.
  56. Mapa de Imagem (Tag <map>): Pra criar áreas clicáveis em imagens - Sabe quando você clica em diferentes partes de uma imagem e cada parte te leva pra um lugar diferente? A tag `<map>` junto com `<area>` fazem essa mágica acontecer.
  57. Marcado (Tag <mark>): Pra destacar um texto como um marca-texto - Quer dar um destaque colorido em alguma parte do seu texto, tipo quando você usa um marca-texto num livro? A tag `<mark>` faz isso no HTML.
  58. Menu de Navegação (Tag <menu>): Uma lista de comandos ou opções - A tag `<menu>` serve pra criar uma lista de comandos ou opções que o usuário pode escolher. Antigamente era mais usada pra menus de contexto, mas hoje em dia o `<nav>` é mais comum pra navegação principal.
  59. Meta-informação (Tag <meta>): Infos importantes sobre a página (mas não visíveis) - A tag `<meta>` guarda informações sobre a sua página que não aparecem diretamente pro usuário, mas são importantes pro navegador, pros buscadores (como o Google) e pra outras coisas (tipo a codificação de caracteres).
  60. Marcado (Tag <meter>): Pra mostrar um valor dentro de um intervalo (tipo bateria) - Sabe aqueles gráficos de nível, tipo de bateria ou de uso de espaço? A tag `<meter>` serve pra criar esses indicadores visuais de um valor dentro de um limite.
  61. Navegação (Tag <nav>): O menu principal do site - A tag `<nav>` serve pra marcar a seção principal de navegação do seu site, geralmente com os links para as outras páginas importantes.
  62. Sem suporte (Tag <noscript>): O que mostrar se o JavaScript não funcionar - Se o navegador do usuário não suporta JavaScript ou se ele tá desativado, a tag `<noscript>` permite que você mostre uma mensagem alternativa.
  63. Objeto (Tag <object>): Pra incorporar quase qualquer coisa! - A tag `<object>` é bem versátil e pode ser usada pra incorporar vários tipos de arquivos na sua página, como vídeos, áudios, plugins e até outras páginas HTML.
  64. Lista Ordenada (Tag <ol>): Uma lista com números ou letras - Se você quer fazer uma lista onde a ordem dos itens importa (tipo um passo a passo), a tag `<ol>` cria uma lista numerada (ou com letras, se você quiser).
  65. Grupo de Opções (Tag <optgroup>): Pra organizar as opções de um menu dropdown - Sabe quando você tem um monte de opções num menu dropdown e quer separá-las por categorias? A tag `<optgroup>` te ajuda a criar esses grupos.
  66. Opção (Tag <option>): Uma escolha no menu dropdown - Dentro da tag `<select>`, cada `<option>` representa uma das escolhas que o usuário pode fazer no menu dropdown.
  67. Saída (Tag <output>): Pra mostrar o resultado de um cálculo ou ação - A tag `<output>` serve pra mostrar o resultado de alguma operação, tipo um cálculo feito com JavaScript num formulário.
  68. Parágrafo (Tag <p>): Pra escrever textos em blocos - A tag `<p>` é a mais básica pra escrever textos na web. Cada vez que você quer começar um novo parágrafo, você usa essa tag.
  69. Parâmetro (Tag <param>): Pra configurar objetos incorporados - Quando você usa a tag `<object>` pra incorporar alguma coisa (tipo um vídeo), a tag `<param>` te ajuda a passar configurações extras pra esse objeto (tipo se ele começa a tocar sozinho).
  70. Imagem (Tag <picture>): Pra mostrar a imagem certa dependendo da tela - Se você quer que seu site mostre imagens diferentes dependendo do tamanho da tela ou de outras condições, a tag `<picture>` é a solução. Você coloca várias opções com a tag `<source>` e uma imagem padrão com `<img>`.
  71. Código de Programação (Tag <pre>): Pra mostrar código do jeito que ele é - Se você quer mostrar um bloco de código de programação ou algum texto que precisa manter a formatação (espaços, quebras de linha), a tag `<pre>` é a ideal.
  72. Progresso (Tag <progress>): Pra mostrar uma barra de carregamento - Sabe aquela barrinha que aparece quando você tá baixando um arquivo ou esperando alguma coisa carregar? A tag `<progress>` cria isso no HTML.
  73. Citação (Tag <q>): Pra citar uma frase curta - Se você quer citar uma frase rapidinho dentro de um parágrafo, a tag `<q>` é a certa. Ela geralmente coloca aspas na citação.
  74. Texto de anotação ruby (Tag `<rp>`): Pra navegadores que não entendem anotação ruby - A tag `<rp>` é usada com a tag `<ruby>` pra mostrar um texto alternativo (geralmente parênteses) para navegadores que não conseguem exibir as anotações ruby corretamente (que são usadas pra mostrar a pronúncia de caracteres, tipo em japonês).
  75. Texto de anotação ruby (Tag `<rt>`): A pronúncia do caractere ruby - A tag `<rt>` é usada dentro da tag `<ruby>` pra mostrar a pronúncia de um caractere, tipo como se lê um kanji em japonês.
  76. Texto de anotação ruby (Tag <ruby>): Pra mostrar a pronúncia de caracteres - A tag `<ruby>` é usada pra adicionar anotações de pronúncia em cima de caracteres, tipo como se faz em japonês ou chinês.
  77. Depreciado (Tag <s>): Pra texto que não vale mais (riscado) - A tag `<s>` serve pra mostrar que um texto não é mais correto ou relevante, geralmente aparecendo com uma linha riscando ele.
  78. Amostra (Tag <samp>): Pra mostrar um exemplo de saída de programa - A tag `<samp>` é usada pra mostrar um exemplo de como um programa de computador mostraria alguma informação.
  79. Script (Tag <script>): Pra botar JavaScript na página e fazer coisas dinâmicas - A tag `<script>` é onde você coloca o código JavaScript que faz a sua página interagir com o usuário, mudar o conteúdo, etc.
  80. Busca (Tag <search>): Um campo especial pra procurar coisas - A tag `<search>` é como um campo de texto normal (`<input type='text'>`), mas ela indica que é especificamente pra o usuário digitar o que ele quer buscar no site.
  81. Seção (Tag <section>): Pra dividir o conteúdo em partes com um tema - A tag `<section>` serve pra você dividir o conteúdo da sua página em diferentes partes, cada uma com um assunto relacionado.
  82. Seleção (Tag <select>): Um menu dropdown pra escolher uma opção - A tag `<select>` cria um menu dropdown onde o usuário pode escolher uma opção entre várias.
  83. Texto Pequeno (Tag <small>): Pra deixar o texto menor - A tag `<small>` deixa o texto menor, tipo pra notas de rodapé ou avisos menos importantes.
  84. Fonte de Mídia (Tag <source>): Pra dizer onde tá o vídeo ou áudio - Dentro das tags `<audio>` ou `<video>`, a tag `<source>` te permite especificar diferentes formatos de arquivo de áudio ou vídeo pra que o navegador escolha o que ele consegue rodar.
  85. Texto Genérico (Tag <span>): Um pedacinho de texto pra você estilizar - A tag `<span>` é como um container genérico pra um pedaço de texto. Geralmente você usa ela pra aplicar algum estilo CSS específico naquele trecho.
  86. Texto Fortemente Importante - <strong> - Se você deseja adicionar texto fortemente importante a uma página da web, você pode usar a tag <strong>.
  87. Estilo (Tag <style>): Pra botar CSS direto no HTML (não é o ideal) - A tag `<style>` te permite escrever código CSS diretamente no seu arquivo HTML. Mas geralmente é melhor usar um arquivo CSS separado.
  88. Subescrito (Tag <sub>): Pra botar texto embaixo (tipo H₂O) - A tag `<sub>` coloca o texto um pouco abaixo da linha normal, tipo o '2' no H₂O.
  89. Resumo (Tag <summary>): O título da parte escondida no `<details>` - A tag `<summary>` é o título que aparece pra o usuário clicar e mostrar ou esconder o conteúdo dentro da tag `<details>`.
  90. Superescrito (Tag <sup>): Pra botar texto em cima (tipo X²) - A tag `<sup>` coloca o texto um pouco acima da linha normal, tipo o '2' no X².
  91. SVG (Tag <svg>): Pra desenhar gráficos que não perdem a qualidade - A tag `<svg>` te permite criar gráficos vetoriais, que são aqueles que você pode aumentar o quanto quiser e eles não ficam borrados.
  92. Tabela (Tag <table>): Pra organizar dados em linhas e colunas - A tag `<table>` é usada pra criar tabelas com linhas e colunas pra organizar informações.
  93. Corpo da Tabela (Tag `<tbody>`): Onde ficam os dados principais da tabela - A tag `<tbody>` marca a parte principal da sua tabela, onde os dados realmente ficam.
  94. Dados da Tabela (Tag `<td>`): Cada célula de dado na tabela - A tag `<td>` representa uma célula dentro de uma linha da sua tabela, onde você coloca os dados.
  95. Modelo (Tag `<template>`): Conteúdo que só aparece com JavaScript - A tag `<template>` te permite criar um pedaço de HTML que fica escondido até que algum código JavaScript decida mostrar ele.
  96. Área de Texto (Tag `<textarea>`): Uma caixa grandona pra escrever texto - A tag `<textarea>` cria uma caixa de texto maior, onde o usuário pode digitar várias linhas de texto (tipo pra comentários ou mensagens grandes).
  97. Rodapé da Tabela (Tag `<tfoot>`): A última parte da tabela (tipo o total) - A tag `<tfoot>` marca o rodapé da sua tabela, que geralmente é usado pra mostrar um resumo ou total dos dados.
  98. Cabeçalho da Tabela (Tag `<th>`): O título de cada coluna - A tag `<th>` é usada pra criar as células de cabeçalho da sua tabela, tipo os títulos de cada coluna.
  99. Cabeçalho da Tabela (Tag `<thead>`): A primeira parte da tabela com os títulos - A tag `<thead>` marca a parte de cima da sua tabela, onde geralmente ficam os títulos de cada coluna.
  100. Hora (Tag <time>): Pra marcar datas e horários - A tag `<time>` serve pra marcar datas e horários no seu texto, o que pode ser útil pra mecanismos de busca e outras ferramentas.
  101. Título (Tag <title>): O nome que aparece na aba do navegador - A tag `<title>` define o título da sua página, que aparece na aba do navegador e nos resultados de busca.
  102. Linha de Tabela (Tag `<tr>`): Cada linha da sua tabela - A tag `<tr>` cria uma nova linha dentro da sua tabela.
  103. Conteúdo de Texto (Tag `<track>`): Pra legendas e outras informações de texto em vídeos - A tag `<track>` é usada dentro de elementos de vídeo ou áudio pra adicionar legendas, descrição ou outros tipos de texto que acompanham a mídia.
  104. Texto Não Articulado (Tag `<u>`): Pra sublinhar o texto (use com cuidado!) - A tag `<u>` sublinha o texto. Antigamente era muito usada, mas hoje em dia geralmente a gente usa sublinhado só pra links, então use com cuidado pra não confundir o usuário.
  105. Lista Não Ordenada (Tag `<ul>`): Uma lista com bolinhas (ou outros símbolos) - A tag `<ul>` cria uma lista onde a ordem dos itens não é importante. Por padrão, ela usa bolinhas como marcadores.
  106. Variável (Tag `<var>`): Pra marcar variáveis em fórmulas ou código - A tag `<var>` serve pra marcar variáveis matemáticas ou de programação no seu texto, geralmente aparecendo em itálico.
  107. Vídeo (Tag `<video>`): Pra botar vídeos na sua página - A tag `<video>` te permite incorporar vídeos diretamente na sua página HTML.
  108. Quebra de Linha Opcional (Tag `<wbr>`): Pra ajudar o navegador a quebrar palavras longas - A tag `<wbr>` diz pro navegador que, se uma palavra for muito longa e não couber na linha, ele pode quebrar a linha ali.

Comentários: Pra você não se perder (e nem os outros!)

Sabe quando você quer deixar uma anotação no código pra lembrar de algo ou explicar alguma coisa? É pra isso que servem os comentários!

Exemplo:

1<!-- Isso é um comentário! -->
Os comentários somem da tela quando a página carrega. Eles são tipo um bilhetinho pra você (ou pra quem mais mexer no código).

Links e Âncoras (Tag <a>): Pra ir de um lugar pro outro

Quer botar um link pra outra página, pra um site amigo ou pra algum lugar dentro da sua própria página? A tag `<a>` é a chave!

Exemplo:

1<a href='https://github.com/martine-coding' target='_blank'>
2	Dá uma olhada no meu GitHub!
3</a>
A tag `a` é pra links. O `href` diz pra onde o link vai te levar. Já o `target='_blank'` manda abrir o link em uma aba novinha do navegador.

Abreviações (Tag <abbr>): Pra não escrever tudo toda hora

Sabe quando você usa uma sigla ou abreviação? Com a tag `<abbr>`, você pode mostrar o significado completo quando alguém passar o mouse por cima.

Exemplo:

1<abbr title='Martine Coding'>
2	MC
3</abbr>
MC
O `title` guarda o texto completo da abreviação. Quando alguém passa o mouse em cima do 'MC', aparece 'Martine Coding'.

Endereço (Tag <address>): Pra deixar seus contatos

Quer mostrar um endereço, um e-mail ou outras informações de contato? A tag `<address>` é a certa pra isso.

Exemplo:

1<address>
2	Projeto: Dev Notes<br>
3	Feito por: Martine Coding
4</address>
Projeto: Dev Notes
Feito por: Martine Coding
A tag `address` é pra info de contato. O `br` ali serve só pra pular uma linha.

Área Sensível (Tag <area>): Pra clicar em pedacinhos da imagem

Já viu aquelas imagens que você clica em um pedaço e vai pra outro lugar? A tag `<area>` ajuda a definir essas áreas clicáveis.

Exemplo:

1<img src='https://github.com/martine-coding.png' usemap='#area-sensivel' width='100' alt='Martine Coding'>
2<map name='area-sensivel'>
3	<area shape='rect' coords='50,50,100,100' href='https://github.com/martine-coding' alt='Martine Coding'>
4</map>
Martine CodingMartine Coding
A tag `area` define uma área clicável dentro de uma imagem. O `shape` diz que forma é essa (pode ser retângulo, círculo, etc.), o `coords` define as coordenadas dessa área na imagem e o `href` é o link pra onde vai quando clica. A tag `map` agrupa as áreas sensíveis e a tag `img` mostra a imagem que tem essas áreas.

Artigo (Tag <article>): Pra conteúdo que faz sentido sozinho

Sabe um post de blog, uma notícia ou qualquer conteúdo que dá pra entender mesmo fora do resto da página? A tag `<article>` é pra ele!

Exemplo:

1<article>
2	<h1>Meu Novo Post</h1>
3	<p>Esse post fala sobre coisas muito legais...</p>
4</article>

Meu Novo Post

Esse post fala sobre coisas muito legais...

A tag `article` é pra conteúdo independente. Pensa em algo que você poderia compartilhar separado do resto do site. No exemplo, a gente usou `article` pra criar o artigo, `h1` pro título e `p` pro texto.

Laterais (Tag <aside>): Pra um conteúdo extra, mas relacionado

Sabe quando você tem uma informação extra que tem a ver com o conteúdo principal, mas não é super essencial? A tag `<aside>` é perfeita pra isso!

Exemplo:

1<span>Martine Coding</span>
2<aside>
3	<h4>Informações da Empresa</h4>
4	<p>Martine Coding é uma empresa de desenvolvimento web.</p>
5</aside>
Martine Coding
A tag `aside` é pra aquele conteúdo que tá ali do ladinho, dando um apoio ao que é mais importante na página. Pensa numa barra lateral com infos extras ou um destaque. No exemplo, a gente usou `aside` pra botar as informações da empresa do lado do nome (`span`), com um título (`h4`) e o conteúdo (`p`).

Áudio (Tag <audio>): Pra botar um som na página

Quer adicionar uma música, um podcast ou qualquer arquivo de áudio no seu site? A tag `<audio>` te ajuda nessa!

Exemplo:

1<audio controls>
2	<source src='https://www.w3schools.com/html/horse.ogg' type='audio/ogg'>
3	<source src='https://www.w3schools.com/html/horse.mp3' type='audio/mpeg'>
4	Seu navegador não suporta o elemento de áudio.
5</audio>
A tag `audio` é pra botar áudio. O `controls` mostra aqueles botões de play, pause, volume, etc. A tag `source` serve pra você colocar o mesmo áudio em vários formatos (pra funcionar em mais navegadores). O `src` diz onde tá o arquivo de áudio e o `type` fala qual é o formato dele. Se o navegador não entender nada de áudio, ele mostra a mensagem 'Seu navegador não aguenta essa parada de áudio.'

Negrito (Tag <b>): Pra deixar o texto mais forte

Quer dar um destaque pra uma palavra ou frase deixando ela em negrito? A tag `<b>` faz isso rapidinho.

Exemplo:

1<p>
2	Este é um texto <b>em negrito</b>.
3</p>

Este é um texto em negrito.

No exemplo, a gente usou a tag `p` pra criar um parágrafo e a tag `b` pra deixar o 'em negrito' bem destacado.

Base (Tag <base>): Pra facilitar a vida com os links

Às vezes, todos os links da sua página começam com o mesmo endereço. Com a tag `<base>`, você define esse endereço uma vez só e não precisa repetir em todos os links.

Exemplo:

1<base href='https://github.com/martine-coding' target='_blank'>
A tag `base` define o endereço base pra todos os links da página. O `href` diz qual é esse endereço principal. O `target='_blank'` faz com que todos os links abram em uma nova aba por padrão.

Bidirecional (Tag <bdi>): Pra textos que vão e vêm (tipo árabe)

Se você tem um texto que pode ser lido da direita pra esquerda (como em árabe), mas tá no meio de um texto que vai da esquerda pra direita, a tag `<bdi>` ajuda a isolar ele pra não bagunçar a leitura.

Exemplo:

1<p>
2	Usuário: <bdi>Martine Coding</bdi>
3</p>

Usuário: Martine Coding

No exemplo, a tag `bdi` tá isolando o nome 'Martine Coding' pra ele ser formatado da maneira correta, mesmo que o texto ao redor tenha outra direção.

Bidirecional Anulado (Tag <bdo>): Pra mudar a direção do texto

Se você tem um texto que normalmente seria lido da direita pra esquerda, mas quer que ele apareça da esquerda pra direita, a tag `<bdo>` faz isso.

Exemplo:

1<p>
2	<bdo dir='ltr'>Martine Coding</bdo>
3</p>

Martine Coding

No exemplo, a tag `bdo` tá mudando a direção do texto 'Martine Coding' pra ser lido da esquerda pra direita, mesmo que o resto do texto tenha outra direção.

Bloco de Citação (Tag <blockquote>): Pra citações longas

Se você quer colocar uma citação longa, a tag `<blockquote>` é a escolha certa. Ela deixa claro que o texto ali é uma citação.

Exemplo:

1<blockquote>
2	<p>"A vida é como andar de bicicleta. Para manter o equilíbrio, você deve continuar se movendo." - Albert Einstein</p>
3</blockquote>

"A vida é como andar de bicicleta. Para manter o equilíbrio, você deve continuar se movendo." - Albert Einstein

A tag `blockquote` é pra citações longas. Ela geralmente vem com um recuo pra mostrar que o texto ali é diferente do resto. No exemplo, a gente usou `blockquote` pra criar a citação e `p` pra colocar o texto dentro.

Corpo (Tag <body>): Onde a mágica acontece (o conteúdo visível)

A tag `<body>` é tipo o palco do seu site. Tudo que você vê na página (textos, imagens, links, etc.) fica dentro dela.

Exemplo:

1<body>
2	<h1>Martine Coding</h1>
3	<p>Martine Coding é uma empresa de desenvolvimento web.</p>
4</body>

Martine Coding

Martine Coding é uma empresa de desenvolvimento web.

No exemplo, a tag `body` envolve todo o conteúdo visível da página: o título (`h1`) e o parágrafo (`p`). Só pode ter uma tag `body` por página, viu?

Botão (Tag <button>): Pra interagir com o usuário

Quer botar um botão pra galera clicar e fazer alguma coisa (enviar um formulário, abrir uma janela, etc.)? A tag `<button>` é a solução.

Exemplo:

1<button onclick='alert("Tudo certo!")'>Clique em mim para ver o resultado</button>
A tag `button` cria um botão. O `onclick` diz o que acontece quando alguém clica nele. No exemplo, ele mostra um alerta com a mensagem 'Tudo certo!'

Canvas (Tag <canvas>): Pra desenhar o que quiser!

Se você quer criar gráficos, desenhos ou animações direto na página, a tag `<canvas>` é como uma tela em branco pra você usar a criatividade (geralmente com JavaScript).

Exemplo:

1<canvas id='myCanvas' width='100' height='100' style='border:1px solid #FF66C4;'>
2Seu navegador não suporta o elemento de canvas.
3</canvas>
Seu navegador não suporta o elemento de canvas.
A tag `canvas` é pra desenhar. O `id` dá um nome pra tela, o `width` e o `height` definem o tamanho dela. O `style` é pra dar uma borda (só pra mostrar onde tá a tela). Se o navegador não entender a tag, ele mostra a mensagem 'Seu navegador não suporta o elemento de canvas.'

Legenda de Campo (Tag <caption>): Pra botar um título na tabela

Quer colocar um título ou uma explicação pra sua tabela? A tag `<caption>` faz esse trabalho!

Exemplo:

1<table>
2	<caption>Lista de Tarefas</caption>
3	<thead>
4		<tr>
5			<th>Tarefa</th>
6			<th>Prioridade</th>
7		</tr>
8	</thead>
9	<tbody>
10		<tr>
11			<td>Estudar HTML</td>
12			<td>Alta</td>
13		</tr>
14	</tbody>
15</table>
Lista de Tarefas
TarefaPrioridade
Estudar HTMLAlta

Citação (Tag <cite>): Pra dizer de onde veio aquela ideia

Se você tá mencionando um livro, um filme, uma música ou outra obra, a tag `<cite>` ajuda a marcar o título dessa obra.

Exemplo:

1<p>
2	Meu livro favorito é <cite>O Código Da Vinci</cite>.
3</p>

Meu livro favorito é O Código Da Vinci.

No exemplo, a tag `cite` tá marcando o título do livro 'O Código Da Vinci'.

Código (Tag <code>): Pra mostrar um trechinho de código

Quer mostrar um pedacinho de código de programação na sua página? A tag `<code>` é a ideal pra isso.

Exemplo:

1<p>
2	Use o comando <code>git clone</code> para clonar um repositório.
3</p>

Use o comando git clone para clonar um repositório.

No exemplo, a tag `code` tá mostrando o comando `git clone`. Geralmente, o texto dentro dessa tag aparece com uma fonte diferente.

Coluna (Tag <col>): Pra estilizar colunas da tabela de uma vez

Se você quer mudar o estilo de uma ou mais colunas inteiras da sua tabela, a tag `<col>` te ajuda a fazer isso de um jeito mais fácil.

Exemplo:

1<table>
2	<colgroup>
3		<col span='2'>
4	</colgroup>
5	<thead>
6		<tr>
7			<th>Tarefa</th>
8			<th>Prioridade</th>
9		</tr>
10	</thead>
11	<tbody>
12		<tr>
13			<td>Estudar HTML</td>
14			<td>Alta</td>
15		</tr>
16	</tbody>
17</table>
TarefaPrioridade
Estudar HTMLAlta
A tag `col` é pra você dar um estilo pra coluna da tabela. No exemplo, a gente usou o `span='2'` pra dizer que as duas primeiras colunas vão ter o mesmo estilo (que a gente poderia adicionar no próprio ``).

Grupo de Colunas (Tag <colgroup>): Pra juntar colunas e estilizar junto

Às vezes, você quer aplicar o mesmo estilo pra um grupo de colunas na sua tabela. A tag `<colgroup>` serve pra você agrupar essas colunas.

Exemplo:

1<table>
2	<colgroup>
3		<col span='2'>
4	</colgroup>
5	<thead>
6		<tr>
7			<th>Tarefa</th>
8			<th>Prioridade</th>
9		</tr>
10	</thead>
11	<tbody>
12		<tr>
13			<td>Estudar HTML</td>
14			<td>Alta</td>
15		</tr>
16	</tbody>
17</table>
TarefaPrioridade
Estudar HTMLAlta
A tag `colgroup` é tipo um container pra você colocar as tags `` dentro e organizar melhor os estilos das colunas da sua tabela. No exemplo, a gente agrupou as duas primeiras colunas.

Data (Tag <data>): Pra dar um valor 'de verdade' pro conteúdo

Essa tag é usada pra você associar um valor específico a um conteúdo. Tipo, mostrar um preço formatado, mas guardar o valor numérico pra outras coisas.

Exemplo:

1<p>
2	O preço do café é <data value='3.50'>R$ 3,50</data>.
3</p>

O preço do café é R$ 3,50.

A tag `data` guarda um valor no atributo `value`. No exemplo, a gente mostra 'R$ 3,50', mas o valor '3.50' tá guardado ali pra outras coisas (tipo JavaScript).

Lista de dados (Tag <datalist>): Pra dar sugestões em campos de texto

Sabe quando você começa a digitar num campo de busca e aparecem várias sugestões? A tag `<datalist>` ajuda a criar essas listas de opções.

Exemplo:

1<label for='browser'>Escolha seu navegador:</label>
2<input list='browsers' id='browser' name='browser'>
3<datalist id='browsers'>
4	<option value='Chrome'>
5	<option value='Firefox'>
6	<option value='Safari'>
7	<option value='Opera'>
8	<option value='Edge'>
9</datalist>
A tag `datalist` é pra criar uma lista de sugestões. O `input list` conecta o campo de texto com a lista de opções. As tags `option` definem as opções que aparecem quando você começa a digitar.

Definição (Tag <dd>): A explicação do termo

Naquelas listas de definições (tipo um dicionário), a tag `<dd>` é onde você coloca a explicação do termo que veio antes.

Exemplo:

1<dl>
2	<dt>HTML</dt>
3	<dd>Linguagem de Marcação de Hipertexto</dd>
4	<dt>CSS</dt>
5	<dd>Folhas de Estilo em Cascata</dd>
6</dl>
HTML
Linguagem de Marcação de Hipertexto
CSS
Folhas de Estilo em Cascata
A tag `dd` vem sempre depois da tag `dt` dentro de uma lista de definições (`dl`). Ela que dá a explicação do termo.

Deletado (Tag <del>): Pra mostrar que algo foi removido

Sabe quando você quer mostrar que um texto foi apagado, mas ainda quer que ele apareça (geralmente com uma linha no meio)? A tag `<del>` faz isso.

Exemplo:

1<p>
2	O texto <del>deletado</del> foi removido.
3</p>

O texto deletado foi removido.

A tag `del` risca o texto, mostrando que ele foi deletado ou não é mais válido.

Detalhes (Tag <details>): Pra esconder e mostrar mais informações

Essa tag é ótima pra esconder um monte de informação extra que nem sempre precisa aparecer. Você coloca um resumo com a tag `<summary>` e o resto dentro de `<details>`. Aí a pessoa clica se quiser ver mais.

Exemplo:

1<details>
2	<summary>Detalhes</summary>
3	<p>Os detalhes são importantes.</p>
4</details>
Detalhes

Os detalhes são importantes.

A tag `details` cria uma seção que pode ser aberta ou fechada. A tag `summary` dentro dela é o título que aparece pra pessoa clicar e ver o resto do conteúdo.

Definição de Termo (Tag <dfn>): Marcando o que significa aquela palavra

Se você tá apresentando um termo novo e quer deixar claro que essa é a definição dele, use a tag `<dfn>`.

Exemplo:

1<p>
2	O <dfn>HTML</dfn> é uma linguagem de marcação de hipertexto.
3</p>

O HTML é uma linguagem de marcação de hipertexto.

A tag `dfn` serve pra marcar a primeira vez que um termo importante aparece e sua definição.

Diálogo (Tag <dialog>): Pra criar janelinhas de conversa

Quer criar aquelas janelas que aparecem na frente da página pra dar um aviso ou pedir uma confirmação? A tag `<dialog>` é pra isso.

Exemplo:

1<dialog open>
2	<p>Este é um diálogo.</p>
3</dialog>
A tag `dialog` cria uma janela de diálogo. O atributo `open` faz ela aparecer assim que a página carrega (mas geralmente a gente usa JavaScript pra controlar quando ela abre e fecha).

Divisão (Tag <div>): A caixa multiuso do HTML

A tag `<div>` é tipo uma caixa invisível que você usa pra agrupar outros elementos HTML e organizar sua página.

Exemplo:

1<div>
2	<h1>Martine Coding</h1>
3	<p>Martine Coding é uma empresa de desenvolvimento web.</p>
4</div>

Martine Coding

Martine Coding é uma empresa de desenvolvimento web.

A tag `div` não tem uma função visual por si só, mas é super útil pra organizar o conteúdo e aplicar estilos com CSS.

Lista de Definição (Tag <dl>): Tipo um dicionário na web

Se você quer criar uma lista de termos e suas definições, a tag `<dl>` é perfeita. Pense num dicionário online.

Exemplo:

1<dl>
2	<dt>HTML</dt>
3	<dd>Linguagem de Marcação de Hipertexto</dd>
4	<dt>CSS</dt>
5	<dd>Folhas de Estilo em Cascata</dd>
6</dl>
HTML
Linguagem de Marcação de Hipertexto
CSS
Folhas de Estilo em Cascata
A tag `dl` cria a lista de definições. Dentro dela, você usa `dt` pra o termo e `dd` pra a definição.

Lista de Definição de Termos (Tag <dt>): O termo que você vai explicar

Na lista de definições (`<dl>`), a tag `<dt>` é onde você coloca o termo que você vai explicar logo em seguida com a tag `<dd>`.

Exemplo:

1<dl>
2	<dt>HTML</dt>
3	<dd>Linguagem de Marcação de Hipertexto</dd>
4	<dt>CSS</dt>
5	<dd>Folhas de Estilo em Cascata</dd>
6</dl>
HTML
Linguagem de Marcação de Hipertexto
CSS
Folhas de Estilo em Cascata
A tag `dt` marca o termo que vai ser definido na lista de definições (`dl`).

Destaque (Tag <em>): Pra dar uma ênfase no texto

Quer dar uma ênfase em alguma palavra ou frase no seu texto? A tag `<em>` geralmente deixa o texto em itálico pra mostrar que é importante.

Exemplo:

1<p>
2	Este é um texto <em>em destaque</em>.
3</p>

Este é um texto em destaque.

A tag `em` é usada pra dar ênfase em alguma parte do texto. Muitos navegadores mostram isso em itálico.

Embed (Tag <embed>): Pra colocar vídeos, áudios e outros arquivos na página

Quer mostrar um vídeo, um áudio, um PDF ou outro tipo de arquivo multimídia direto na sua página? A tag `<embed>` é uma forma de fazer isso.

Exemplo:

1<embed src='movie.mp4' width='320' height='240'>
A tag `embed` serve pra você colocar arquivos de outros formatos na sua página. O `src` diz qual é o arquivo, e o `width` e `height` definem o tamanho que ele vai ocupar na tela.

Campo de Formulário (Tag <fieldset>): Pra organizar os campos do formulário

Se você tem um formulário com vários campos, a tag `<fieldset>` te ajuda a agrupar eles por assunto, deixando tudo mais organizado.

Exemplo:

1<form>
2	<fieldset>
3		<legend>Informações</legend>
4		<label for='email'>E-mail:</label>
5		<input type='email' id='email' name='email'>
6	</fieldset>
7</form>
Informações
A tag `fieldset` cria uma caixa pra você colocar um grupo de campos do formulário. Já a tag `legend` serve pra dar um título pra essa caixa, tipo 'Informações de Contato' ou algo assim.

Legenda de Figura (Tag <figcaption>): Pra botar uma descrição na imagem

Sabe quando você coloca uma imagem e quer botar um textinho embaixo explicando o que ela é? A tag `<figcaption>` é perfeita pra isso.

Exemplo:

1<figure>
2	<img src='https://github.com/martine-coding.png' alt='Martine Coding'>
3	<figcaption>Martine Coding</figcaption>
4</figure>
Martine Coding
Martine Coding
O elemento figcaption é usado para adicionar uma legenda a uma figura.

O elemento figure é usado para adicionar uma figura a uma página da web. O elemento img é usado para adicionar uma imagem à figura.

No exemplo acima, foi usado o elemento figure para adicionar uma figura à página, img para adicionar uma imagem à figura e figcaption para adicionar uma legenda à figura.

Figura (Tag <figure>): Pra agrupar imagem e legenda

Se você tem uma imagem e quer colocar uma legenda juntinho dela, a tag `<figure>` é perfeita pra agrupar os dois como uma unidade.

Exemplo:

1<figure>
2	<img src='[https://github.com/martine-coding.png](https://github.com/martine-coding.png)' alt='Martine Coding'>
3	<figcaption>Martine Coding</figcaption>
4</figure>
Martine Coding
Martine Coding
A tag `figure` é como uma caixinha pra você colocar uma imagem (`img`) e a legenda dela (`figcaption`) juntas.

Formulário (Tag <form>): Pra coletar informações dos usuários

Se você precisa que as pessoas digitem informações, escolham opções ou enviem arquivos, a tag `<form>` é o ponto de partida pra criar um formulário.

Exemplo:

1<form>
2	<label for='email'>E-mail:</label>
3	<input type='email' id='email' name='email'>
4	<label for='password'>Senha:</label>
5	<input type='password' id='password' name='password'>
6	<input type='submit' value='Enviar'>
7</form>



A tag `form` cria um formulário. Dentro dela, você coloca os campos (`input`), os rótulos (`label`) e o botão de enviar (`submit`).

Cabeçalho (Tags <h1> a <h6>): Pra organizar os títulos da página

As tags de `<h1>` até `<h6>` servem pra você criar os títulos e subtítulos da sua página, mostrando o que é mais importante (<h1>) e o que é menos (<h6>).

Exemplo:

1<h1>Cabeçalho 1</h1>
2<h2>Cabeçalho 2</h2>
3<h3>Cabeçalho 3</h3>
4<h4>Cabeçalho 4</h4>
5<h5>Cabeçalho 5</h5>
6<h6>Cabeçalho 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
As tags de `h1` a `h6` criam os títulos da sua página. O `h1` é o título principal, o mais importante, e o `h6` é o menos importante.

Cabeçalho de Grupo (Tag <hgroup>): Pra juntar títulos que se completam

Se você tem um título principal (`<h1>`) e um subtítulo (`<h2>`) que estão super ligados, a tag `<hgroup>` ajuda a juntar eles como um grupo só.

Exemplo:

1<hgroup>
2	<h1>Cabeçalho 1</h1>
3	<h2>Cabeçalho 2</h2>
4</hgroup>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
A tag `hgroup` serve pra agrupar um título principal (`h1`) com subtítulos (`h2` a `h6`) que fazem parte dele.

Divisão Horizontal (Tag <hr>): Pra separar assuntos

Sabe aquela linha que você bota pra separar um assunto do outro? No HTML, a tag `<hr>` faz essa linha aparecer.

Exemplo:

1<p>Parágrafo 1</p>
2<hr>
3<p>Parágrafo 2</p>

Parágrafo 1

Parágrafo 2

A tag `hr` cria uma linha horizontal pra você separar diferentes partes do conteúdo da sua página.

Html (Tag <html>): A base de tudo!

A tag `<html>` é a principal de todas! Ela marca o começo e o fim de todo o seu documento HTML.

Exemplo:

1<!DOCTYPE html>
2<html lang='pt-BR'>
3	<head>
4		<meta charset='UTF-8'>
5		<title>Minha Página</title>
6	</head>
7	<body>
8		<h1>Olá, Mundo!</h1>
9	</body>
10</html>
A tag `html` é a raiz do seu documento HTML. Tudo o mais fica dentro dela, como o cabeçalho (`head`) e o corpo (`body`). O `lang` diz qual é o idioma principal da página.

Itálico (Tag <i>): Pra deixar o texto meio de ladinho

Quer deixar uma palavra ou frase em itálico? A tag `<i>` faz o texto ficar meio inclinado.

Exemplo:

1<p>
2	Este é um texto <i>em itálico</i>.
3</p>

Este é um texto em itálico.

A tag `i` deixa o texto em itálico. Geralmente é usado pra dar ênfase ou indicar um título de obra, por exemplo.

Iframe (Tag <iframe>): Pra botar uma página dentro de outra

Sabe quando você vê um vídeo do YouTube incorporado em um site? A tag `<iframe>` serve pra colocar uma página inteira dentro da sua.

Exemplo:

1<iframe src='https://dev-notes-beta.vercel.app/easter' width='100%' height='600'>
2</iframe>
A tag `iframe` cria uma janela dentro da sua página pra mostrar outra página da web. O `src` diz qual página vai aparecer ali, e o `width` e `height` definem o tamanho da janela.

Imagem (Tag <img>): Pra mostrar fotos e figuras

Quer botar uma foto, um desenho ou qualquer imagem na sua página? A tag `<img>` faz isso rapidinho.

Exemplo:

1<img src='https://github.com/martine-coding.png' alt='Martine Coding'>
Martine Coding
A tag `img` é pra colocar imagens. O `src` diz onde tá a imagem (o endereço dela na internet), e o `alt` é um texto que aparece se a imagem não carregar ou pra ajudar pessoas com deficiência visual.

Entrada (Tag <input>): Onde o usuário digita as coisas

A tag `<input>` é o campo onde as pessoas podem digitar texto, escolher opções, marcar caixas, etc., dentro de um formulário.

Exemplo:

1<label for='email'>E-mail:</label>
2<input type='email' id='email' name='email'>

A tag `input` cria um campo pra o usuário digitar ou escolher algo. O `type` diz que tipo de campo é (texto, e-mail, senha, etc.). O `id` dá um nome único pra ele, e o `name` é usado pra enviar os dados do formulário. A tag `label` serve pra dizer o que tem que ser digitado naquele campo.

Inserir (Tag <ins>): Pra mostrar que algo foi adicionado

Sabe quando você quer mostrar que um texto foi adicionado (tipo numa atualização)? A tag `<ins>` geralmente sublinha o texto pra indicar isso.

Exemplo:

1<p>
2	O texto <ins>inserido</ins> foi adicionado.
3</p>

O texto inserido foi adicionado.

A tag `ins` marca um texto que foi inserido ou adicionado depois.

Teclado (Tag <kbd>): Pra mostrar o que o usuário digita

Se você quer mostrar um comando de teclado ou algo que o usuário precisa digitar, a tag `<kbd>` geralmente usa uma fonte diferente pra destacar isso.

Exemplo:

1<p>
2	Pressione <kbd>Ctrl</kbd> + <kbd>C</kbd> para copiar.
3</p>

Pressione Ctrl + C para copiar.

A tag `kbd` é usada pra mostrar um texto que representa algo que o usuário digitaria no teclado.

Rótulo (Tag <label>): Pra dizer o que cada campo do formulário significa

A tag `<label>` serve pra você colocar um textinho explicando o que o usuário tem que digitar ou escolher em cada campo do formulário.

Exemplo:

1<label for='email'>E-mail:</label>
2<input type='email' id='email' name='email'>

A tag `label` tá ligada a um campo do formulário (`input`, `select`, etc.) através do atributo `for`, que tem que ter o mesmo valor do `id` do campo.

Legenda de Título (Tag <legend>): O título da caixinha de campos do formulário

Dentro da tag `<fieldset>`, você usa a tag `<legend>` pra colocar um título naquela caixinha de campos do formulário.

Exemplo:

1<form>
2	<fieldset>
3		<legend>Informações</legend>
4		<label for='email'>E-mail:</label>
5		<input type='email' id='email' name='email'>
6	</fieldset>
7</form>
Informações
A tag `legend` fica dentro da tag `fieldset` e serve como um título pra aquele grupo de campos do formulário.

Lista de Itens (Tag `<li>`): Cada item da sua lista

Se você quer fazer uma lista (com bolinhas ou números), cada item dessa lista vai dentro da tag `<li>`.

Exemplo:

1<ul>
2	<li>Item 1</li>
3	<li>Item 2</li>
4</ul>
  • Item 1
  • Item 2
A tag `li` representa um item dentro de uma lista não ordenada (`ul`) ou ordenada (`ol`).

Conteúdo principal (Tag `<main>`): Onde fica a parte mais importante da página

A tag `<main>` serve pra marcar qual é o conteúdo principal da sua página, aquilo que é mais importante pro usuário.

Exemplo:

1<main>
2	<h1>Conteúdo Principal</h1>
3	<p>Este é o conteúdo principal da página.</p>
4</main>

Conteúdo Principal

Este é o conteúdo principal da página.

A tag `main` ajuda a organizar o conteúdo da página, mostrando qual é a parte principal e mais importante.

Mapa de Imagem (Tag <map>): Pra criar áreas clicáveis em imagens

Sabe quando você clica em diferentes partes de uma imagem e cada parte te leva pra um lugar diferente? A tag `<map>` junto com `<area>` fazem essa mágica acontecer.

Exemplo:

1<img src='https://github.com/martine-coding.png' usemap='#area-sensivel' width='100' alt='Martine Coding'>
2<map name='area-sensivel'>
3	<area shape='rect' coords='50,50,100,100' href='https://github.com/martine-coding.png'>
4</map>
Martine Coding
A tag `map` cria um mapa de imagem, e dentro dela você usa a tag `area` pra definir as áreas clicáveis. O atributo `usemap` na tag `img` liga a imagem ao mapa.

Marcado (Tag <mark>): Pra destacar um texto como um marca-texto

Quer dar um destaque colorido em alguma parte do seu texto, tipo quando você usa um marca-texto num livro? A tag `<mark>` faz isso no HTML.

Exemplo:

1<p>
2	Este é um texto <mark>destacado</mark>.
3</p>

Este é um texto destacado.

A tag `mark` serve pra você destacar um pedaço do texto, geralmente com uma cor de fundo amarela, como se fosse um marca-texto.

Meta-informação (Tag <meta>): Infos importantes sobre a página (mas não visíveis)

A tag `<meta>` guarda informações sobre a sua página que não aparecem diretamente pro usuário, mas são importantes pro navegador, pros buscadores (como o Google) e pra outras coisas (tipo a codificação de caracteres).

Exemplo:

1<meta charset='UTF-8'>
A tag `meta` fica dentro do `` e dá informações sobre a página. O `charset` diz qual a codificação de caracteres (UTF-8 é a mais comum pra aceitar acentos e outros símbolos). Tem outros tipos de `meta` pra palavras-chave (`name='keywords'`), descrição (`name='description'`), etc.

Marcado (Tag <meter>): Pra mostrar um valor dentro de um intervalo (tipo bateria)

Sabe aqueles gráficos de nível, tipo de bateria ou de uso de espaço? A tag `<meter>` serve pra criar esses indicadores visuais de um valor dentro de um limite.

Exemplo:

1<meter value='50' min='0' max='100'>50%</meter>
50%
A tag `meter` mostra um valor numérico dentro de um intervalo. Você define o valor atual com `value`, o mínimo com `min` e o máximo com `max`.

Sem suporte (Tag <noscript>): O que mostrar se o JavaScript não funcionar

Se o navegador do usuário não suporta JavaScript ou se ele tá desativado, a tag `<noscript>` permite que você mostre uma mensagem alternativa.

Exemplo:

1<noscript>
2	<p>Este site requer JavaScript para funcionar corretamente.</p>
3</noscript>
A tag `noscript` é um espaço pra você colocar conteúdo que só vai aparecer se o JavaScript não estiver funcionando no navegador do usuário.

Objeto (Tag <object>): Pra incorporar quase qualquer coisa!

A tag `<object>` é bem versátil e pode ser usada pra incorporar vários tipos de arquivos na sua página, como vídeos, áudios, plugins e até outras páginas HTML.

Exemplo:

1<object data='movie.mp4' width='560' height='315'>
2	<param name='autoplay' value='1'>
3</object>
A tag `object` serve pra incorporar objetos multimídia ou outros tipos de conteúdo. Você usa o atributo `data` pra dizer qual o arquivo, e pode usar a tag `param` pra passar configurações extras.

Lista Ordenada (Tag <ol>): Uma lista com números ou letras

Se você quer fazer uma lista onde a ordem dos itens importa (tipo um passo a passo), a tag `<ol>` cria uma lista numerada (ou com letras, se você quiser).

Exemplo:

1<ol style='list-style-type: upper-roman;'>
2	<li>Item 1</li>
3	<li>Item 2</li>
4</ol>
  1. Item 1
  2. Item 2
A tag `ol` cria uma lista ordenada (com números por padrão). Você usa a tag `li` pra cada item da lista. O atributo `style` aqui tá só pra mostrar que dá pra mudar o tipo de marcador (pra letras romanas, por exemplo).

Grupo de Opções (Tag <optgroup>): Pra organizar as opções de um menu dropdown

Sabe quando você tem um monte de opções num menu dropdown e quer separá-las por categorias? A tag `<optgroup>` te ajuda a criar esses grupos.

Exemplo:

1<select>
2	<optgroup label='Escolha uma linguagem'>
3		<option value='HTML'>HTML</option>
4		<option value='CSS'>CSS</option>
5		<option value='JavaScript'>JavaScript</option>
6		<option value='Python'>Python</option>
7		<option value='Java'>Java</option>
8	</optgroup>
9</select>

Opção (Tag <option>): Uma escolha no menu dropdown

Dentro da tag `<select>`, cada `<option>` representa uma das escolhas que o usuário pode fazer no menu dropdown.

Exemplo:

1<select>
2	<optgroup label='Escolha uma linguagem'>
3		<option value='HTML'>HTML</option>
4		<option value='CSS'>CSS</option>
5		<option value='JavaScript'>JavaScript</option>
6		<option value='Python'>Python</option>
7		<option value='Java'>Java</option>
8	</optgroup>
9</select>
A tag `option` é cada uma das opções que aparecem quando você clica num menu dropdown (`select`). Se você quiser agrupar as opções por assunto, pode usar a tag `optgroup` antes.

Saída (Tag <output>): Pra mostrar o resultado de um cálculo ou ação

A tag `<output>` serve pra mostrar o resultado de alguma operação, tipo um cálculo feito com JavaScript num formulário.

Exemplo:

1<form oninput='result.value=parseInt(a.value)+parseInt(b.value)' style='display: flex; flex-direction: column;'>
2	<input type='number' id='a' value='0'> +
3	<input type='number' id='b' value='0'> =
4	<output name='result' for='a b'>0</output>
5</form>



A tag `output` é onde você mostra o resultado de alguma coisa. No exemplo, a gente tá somando dois números digitados nos campos `input` e mostrando o resultado na tag `output` com o nome 'result'. O atributo `for` diz quais elementos do formulário estão relacionados com essa saída.

Parágrafo (Tag <p>): Pra escrever textos em blocos

A tag `<p>` é a mais básica pra escrever textos na web. Cada vez que você quer começar um novo parágrafo, você usa essa tag.

Exemplo:

1<p>Este é um parágrafo.</p>

Este é um parágrafo.

A tag `p` cria um parágrafo de texto. Os navegadores geralmente colocam um espaço antes e depois de cada parágrafo.

Parâmetro (Tag <param>): Pra configurar objetos incorporados

Quando você usa a tag `<object>` pra incorporar alguma coisa (tipo um vídeo), a tag `<param>` te ajuda a passar configurações extras pra esse objeto (tipo se ele começa a tocar sozinho).

Exemplo:

1<object data='movie.mp4' width='560' height='315'>
2	<param name='autoplay' value='1'>
3</object>
A tag `param` fica dentro da tag `object` e serve pra você passar parâmetros de configuração pro objeto que você tá incorporando. O `name` diz qual a configuração e o `value` diz o valor dela.

Imagem (Tag <picture>): Pra mostrar a imagem certa dependendo da tela

Se você quer que seu site mostre imagens diferentes dependendo do tamanho da tela ou de outras condições, a tag `<picture>` é a solução. Você coloca várias opções com a tag `<source>` e uma imagem padrão com `<img>`.

Exemplo:

1<picture>
2	<source media='(min-width: 800px)' srcset='https://github.com/martine-coding.png'>
3	<source media='(min-width: 400px)' srcset='https://github.com/martine-coding.png'>
4	<img src='https://github.com/martine-coding.png' alt='Imagem Responsiva'>
5</picture>
Imagem Responsiva
A tag `picture` é usada pra criar imagens responsivas. Você usa a tag `source` pra definir diferentes imagens pra diferentes situações (tipo tamanho da tela) e a tag `img` como uma imagem padrão, caso nenhuma das condições do `source` seja atendida.

Código de Programação (Tag <pre>): Pra mostrar código do jeito que ele é

Se você quer mostrar um bloco de código de programação ou algum texto que precisa manter a formatação (espaços, quebras de linha), a tag `<pre>` é a ideal.

Exemplo:

1<pre>
2	<code>
3		function hello() {
4			console.log('Hello, World!');
5		}
6	</code>
7</pre>
function hello() { console.log('Hello, World!'); }
A tag `pre` mostra o texto exatamente como ele tá escrito no código HTML, incluindo espaços e quebras de linha. É muito usada pra mostrar código de programação, geralmente dentro da tag `code`.

Progresso (Tag <progress>): Pra mostrar uma barra de carregamento

Sabe aquela barrinha que aparece quando você tá baixando um arquivo ou esperando alguma coisa carregar? A tag `<progress>` cria isso no HTML.

Exemplo:

1<progress value='50' max='100'></progress>
A tag `progress` mostra uma barra de progresso. Você usa o atributo `value` pra dizer quanto já carregou e o `max` pra dizer o total.

Citação (Tag <q>): Pra citar uma frase curta

Se você quer citar uma frase rapidinho dentro de um parágrafo, a tag `<q>` é a certa. Ela geralmente coloca aspas na citação.

Exemplo:

1<p>
2	O autor disse: <q>Este é um exemplo de citação curta.</q>
3</p>

O autor disse: Este é um exemplo de citação curta.

A tag `q` é pra você colocar citações curtas dentro do seu texto. Os navegadores costumam colocar aspas automaticamente.

Texto de anotação ruby (Tag `<rp>`): Pra navegadores que não entendem anotação ruby

A tag `<rp>` é usada com a tag `<ruby>` pra mostrar um texto alternativo (geralmente parênteses) para navegadores que não conseguem exibir as anotações ruby corretamente (que são usadas pra mostrar a pronúncia de caracteres, tipo em japonês).

Exemplo:

1<ruby>
2	漢<rp>(</rp><rt>Kan</rt><rp>)</rp>
3</ruby>
漢(Kan)
A tag `rp` serve como um fallback pra navegadores que não suportam a tag `rt` (usada em anotações ruby pra mostrar a pronúncia de caracteres). Geralmente a gente coloca parênteses dentro dela.

Texto de anotação ruby (Tag `<rt>`): A pronúncia do caractere ruby

A tag `<rt>` é usada dentro da tag `<ruby>` pra mostrar a pronúncia de um caractere, tipo como se lê um kanji em japonês.

Exemplo:

1<ruby>
2	漢<rp>(</rp><rt>Kan</rt><rp>)</rp>
3</ruby>
漢(Kan)
A tag `rt` fica dentro da tag `ruby` e é onde você coloca a pronúncia do caractere que veio antes.

Texto de anotação ruby (Tag <ruby>): Pra mostrar a pronúncia de caracteres

A tag `<ruby>` é usada pra adicionar anotações de pronúncia em cima de caracteres, tipo como se faz em japonês ou chinês.

Exemplo:

1<ruby>
2	漢<rp>(</rp><rt>Kan</rt><rp>)</rp>
3</ruby>
漢(Kan)
A tag `ruby` é a base pra você colocar anotações de pronúncia em cima de um texto. Dentro dela, você usa a tag `rt` pra pronúncia e a tag `rp` pra mostrar parênteses em navegadores que não entendem o ruby.

Depreciado (Tag <s>): Pra texto que não vale mais (riscado)

A tag `<s>` serve pra mostrar que um texto não é mais correto ou relevante, geralmente aparecendo com uma linha riscando ele.

Exemplo:

1<p>
2	Este texto não é mais preciso: <s>Texto Antigo</s>.
3</p>

Este texto não é mais preciso: Texto Antigo.

A tag `s` era usada pra marcar texto que foi removido ou que não é mais preciso. Hoje em dia, a tag `del` é mais recomendada pra marcar conteúdo deletado.

Amostra (Tag <samp>): Pra mostrar um exemplo de saída de programa

A tag `<samp>` é usada pra mostrar um exemplo de como um programa de computador mostraria alguma informação.

Exemplo:

1<p>
2	A saída da amostra é: <samp>Exemplo</samp>.
3</p>

A saída da amostra é: Exemplo.

A tag `samp` serve pra você mostrar uma amostra de saída de um programa de computador.

Script (Tag <script>): Pra botar JavaScript na página e fazer coisas dinâmicas

A tag `<script>` é onde você coloca o código JavaScript que faz a sua página interagir com o usuário, mudar o conteúdo, etc.

Exemplo:

1<script>
2	document.getElementById('demo').innerHTML = 'Hello, World!';
3</script>
A tag `script` é usada pra adicionar scripts (geralmente em JavaScript) na sua página HTML. É o que permite você fazer coisas dinâmicas e interativas.

Seção (Tag <section>): Pra dividir o conteúdo em partes com um tema

A tag `<section>` serve pra você dividir o conteúdo da sua página em diferentes partes, cada uma com um assunto relacionado.

Exemplo:

1<section>
2	<h1>Seção</h1>
3	<p>Este é um exemplo de seção.</p>
4</section>

Seção

Este é um exemplo de seção.

A tag `section` ajuda a organizar o conteúdo da sua página em seções temáticas. Geralmente cada `section` tem um título (`h1` a `h6`).

Seleção (Tag <select>): Um menu dropdown pra escolher uma opção

A tag `<select>` cria um menu dropdown onde o usuário pode escolher uma opção entre várias.

Exemplo:

1<select>
2	<option value='HTML'>HTML</option>
3	<option value='CSS'>CSS</option>
4	<option value='JavaScript'>JavaScript</option>
5	<option value='Python'>Python</option>
6	<option value='Java'>Java</option>
7</select>
A tag `select` cria um menu de seleção (dropdown). Dentro dela, você coloca as opções que o usuário pode escolher usando a tag `option`. Você também pode usar a tag `optgroup` pra agrupar as opções por assunto.

Texto Pequeno (Tag <small>): Pra deixar o texto menor

A tag `<small>` deixa o texto menor, tipo pra notas de rodapé ou avisos menos importantes.

Exemplo:

1<p>
2	Este é um texto pequeno: <small>Texto Pequeno</small>.
3</p>

Este é um texto pequeno: Texto Pequeno.

A tag `small` diminui o tamanho da fonte do texto. É útil pra colocar informações adicionais, notas de rodapé ou textos com menos importância.

Fonte de Mídia (Tag <source>): Pra dizer onde tá o vídeo ou áudio

Dentro das tags `<audio>` ou `<video>`, a tag `<source>` te permite especificar diferentes formatos de arquivo de áudio ou vídeo pra que o navegador escolha o que ele consegue rodar.

Exemplo:

1<audio controls>
2	<source src='https://www.w3schools.com/html/horse.ogg' type='audio/ogg'>
3	<source src='https://www.w3schools.com/html/horse.mp3' type='audio/mpeg'>
4	Seu navegador não suporta o elemento de áudio.
5</audio>
A tag `source` fica dentro das tags `

Texto Genérico (Tag <span>): Um pedacinho de texto pra você estilizar

A tag `<span>` é como um container genérico pra um pedaço de texto. Geralmente você usa ela pra aplicar algum estilo CSS específico naquele trecho.

Exemplo:

1<p>
2	Este é um texto genérico: <span>Texto Genérico</span>.
3</p>

Este é um texto genérico: Texto Genérico.

A tag `span` não tem nenhuma função visual por padrão, mas é muito útil pra você agrupar um pedaço de texto dentro de um parágrafo ou outro elemento e aplicar estilos CSS só nele.

Texto Fortemente Importante - <strong>

Se você deseja adicionar texto fortemente importante a uma página da web, você pode usar a tag <strong>.

Exemplo:

1<p>
2	Este é um texto fortemente importante: <strong>Texto Fortemente Importante</strong>.
3</p>

Este é um texto fortemente importante: Texto Fortemente Importante.

O elemento strong é usado para adicionar texto fortemente importante a uma página da web.

No exemplo acima, foi usado o elemento p para criar um parágrafo e o elemento strong para adicionar texto fortemente importante ao parágrafo.

Estilo (Tag <style>): Pra botar CSS direto no HTML (não é o ideal)

A tag `<style>` te permite escrever código CSS diretamente no seu arquivo HTML. Mas geralmente é melhor usar um arquivo CSS separado.

Exemplo:

1<h1 id='demo'>Hello, World!</h1>
2<style>
3	.demo {
4		color: #0f0;
5	}
6</style>

Hello, World!

A tag `style` é onde você coloca regras de CSS pra estilizar sua página. No exemplo, a gente tá mudando a cor de um `h1` com a classe 'demo' pra verde. Mas, geralmente, é melhor colocar o CSS num arquivo separado e linkar no ``.

Subescrito (Tag <sub>): Pra botar texto embaixo (tipo H₂O)

A tag `<sub>` coloca o texto um pouco abaixo da linha normal, tipo o '2' no H₂O.

Exemplo:

1<p>
2	Este é um texto subscrito: H<sub>2</sub>O.
3</p>

Este é um texto subscrito: H2O.

A tag `sub` é usada pra colocar texto em subescrito, que aparece menor e abaixo da linha de base.

Resumo (Tag <summary>): O título da parte escondida no `<details>`

A tag `<summary>` é o título que aparece pra o usuário clicar e mostrar ou esconder o conteúdo dentro da tag `<details>`.

Exemplo:

1<details open>
2	<summary>Resumo</summary>
3	<p>Este é um exemplo de resumo.</p>
4</details>
Resumo

Este é um exemplo de resumo.

A tag `summary` define um resumo visível para o conteúdo escondido dentro da tag `details`. O atributo `open` diz se o conteúdo deve aparecer aberto por padrão.

Superescrito (Tag <sup>): Pra botar texto em cima (tipo X²)

A tag `<sup>` coloca o texto um pouco acima da linha normal, tipo o '2' no X².

Exemplo:

1<p>
2	Este é um texto sobrescrito: X<sup>2</sup>.
3</p>

Este é um texto sobrescrito: X2.

A tag `sup` é usada pra colocar texto em superescrito, que aparece menor e acima da linha de base.

SVG (Tag <svg>): Pra desenhar gráficos que não perdem a qualidade

A tag `<svg>` te permite criar gráficos vetoriais, que são aqueles que você pode aumentar o quanto quiser e eles não ficam borrados.

Exemplo:

1<svg width='100' height='100'>
2	<circle cx='50' cy='50' r='40' fill='#FF66C4' />
3</svg>
A tag `svg` é um container pra gráficos vetoriais escaláveis. Dentro dela, você pode usar várias formas e elementos pra desenhar, como `circle` pra um círculo.

Tabela (Tag <table>): Pra organizar dados em linhas e colunas

A tag `<table>` é usada pra criar tabelas com linhas e colunas pra organizar informações.

Exemplo:

1<table>
2	<thead>
3		<tr>
4			<th>Nome</th>
5			<th>Idade</th>
6		</tr>
7	</thead>
8	<tbody>
9		<tr>
10			<td>João</td>
11			<td>25</td>
12		</tr>
13		<tr>
14			<td>Maria</td>
15			<td>30</td>
16		</tr>
17	</tbody>
18<tfoot>
19	<tr>
20		<td>Total</td>
21		<td>55</td>
22	</tr>
23</tfoot>
24</table>
NomeIdade
João25
Maria30
Total55
A tag `table` é a base pra criar uma tabela. Dentro dela, você pode usar `thead` pro cabeçalho, `tbody` pro corpo e `tfoot` pro rodapé. As linhas são criadas com `tr`, os títulos das colunas com `th` e as células de dados com `td`.

Corpo da Tabela (Tag `<tbody>`): Onde ficam os dados principais da tabela

A tag `<tbody>` marca a parte principal da sua tabela, onde os dados realmente ficam.

Exemplo:

1<table>
2	<tbody>
3		<tr>
4			<td>Este é um corpo de tabela.</td>
5		</tr>
6	</tbody>
7</table>
Este é um corpo de tabela.
A tag `tbody` agrupa as linhas de dados da sua tabela. É uma boa prática usar ela pra organizar o conteúdo.

Dados da Tabela (Tag `<td>`): Cada célula de dado na tabela

A tag `<td>` representa uma célula dentro de uma linha da sua tabela, onde você coloca os dados.

Exemplo:

1<table>
2	<tr>
3		<td>Este é um dado de tabela.</td>
4	</tr>
5</table>
Este é um dado de tabela.
A tag `td` define uma célula de dados dentro de uma linha da tabela (`tr`). É onde o conteúdo da sua tabela vai.

Modelo (Tag `<template>`): Conteúdo que só aparece com JavaScript

A tag `<template>` te permite criar um pedaço de HTML que fica escondido até que algum código JavaScript decida mostrar ele.

Exemplo:

1<template>
2	<p>Este é um modelo.</p>
3</template>
A tag `template` é usada pra declarar um fragmento de HTML que pode ser clonado e inserido no documento via JavaScript.

Área de Texto (Tag `<textarea>`): Uma caixa grandona pra escrever texto

A tag `<textarea>` cria uma caixa de texto maior, onde o usuário pode digitar várias linhas de texto (tipo pra comentários ou mensagens grandes).

Exemplo:

1<textarea>
2	Este é uma área de texto.
3</textarea>
A tag `textarea` cria uma área de texto multi-linha pra o usuário digitar informações.

Rodapé da Tabela (Tag `<tfoot>`): A última parte da tabela (tipo o total)

A tag `<tfoot>` marca o rodapé da sua tabela, que geralmente é usado pra mostrar um resumo ou total dos dados.

Exemplo:

1<table>
2	<thead>
3		<tr>
4			<th>Nome</th>
5			<th>Idade</th>
6		</tr>
7	</thead>
8	<tbody>
9		<tr>
10			<td>João</td>
11			<td>25</td>
12		</tr>
13		<tr>
14			<td>Maria</td>
15			<td>30</td>
16		</tr>
17	</tbody>
18<tfoot>
19	<tr>
20		<td>Total</td>
21		<td>55</td>
22	</tr>
23</tfoot>
24</table>
NomeIdade
João25
Maria30
Total55
A tag `tfoot` define o rodapé da tabela. Ele geralmente aparece depois do `thead` e do `tbody`, mas no código HTML você pode colocar ele antes do `tbody` pra ajudar o navegador a renderizar a tabela mais rápido.

Cabeçalho da Tabela (Tag `<th>`): O título de cada coluna

A tag `<th>` é usada pra criar as células de cabeçalho da sua tabela, tipo os títulos de cada coluna.

Exemplo:

1<table>
2	<thead>
3		<tr>
4			<th>Nome</th>
5			<th>Idade</th>
6		</tr>
7	</thead>
8	<tbody>
9		<tr>
10			<td>João</td>
11			<td>25</td>
12		</tr>
13		<tr>
14			<td>Maria</td>
15			<td>30</td>
16		</tr>
17	</tbody>
18<tfoot>
19	<tr>
20		<td>Total</td>
21		<td>55</td>
22	</tr>
23</tfoot>
24</table>
NomeIdade
João25
Maria30
Total55
A tag `th` define uma célula de cabeçalho em uma tabela. O texto dentro dela geralmente aparece em negrito e centralizado.

Cabeçalho da Tabela (Tag `<thead>`): A primeira parte da tabela com os títulos

A tag `<thead>` marca a parte de cima da sua tabela, onde geralmente ficam os títulos de cada coluna.

Exemplo:

1<table>
2	<thead>
3		<tr>
4			<th>Nome</th>
5			<th>Idade</th>
6		</tr>
7	</thead>
8	<tbody>
9		<tr>
10			<td>João</td>
11			<td>25</td>
12		</tr>
13		<tr>
14			<td>Maria</td>
15			<td>30</td>
16		</tr>
17	</tbody>
18<tfoot>
19	<tr>
20		<td>Total</td>
21		<td>55</td>
22	</tr>
23</tfoot>
24</table>
NomeIdade
João25
Maria30
Total55
A tag `thead` agrupa o conteúdo de cabeçalho da tabela. É útil pra separar visualmente e semanticamente o cabeçalho do corpo da tabela.

Hora (Tag <time>): Pra marcar datas e horários

A tag `<time>` serve pra marcar datas e horários no seu texto, o que pode ser útil pra mecanismos de busca e outras ferramentas.

Exemplo:

1<p>
2	A hora atual é: <time>10:00</time>.
3</p>

A hora atual é: .

A tag `time` representa um período de tempo. Você pode usar o atributo `datetime` pra especificar a data e hora num formato reconhecido.

Título (Tag <title>): O nome que aparece na aba do navegador

A tag `<title>` define o título da sua página, que aparece na aba do navegador e nos resultados de busca.

Exemplo:

1<!DOCTYPE html>
2<html>
3	<head>
4		<title>Título da Página</title>
5	</head>
6	<body>
7		<h1>Este é um título.</h1>
8	</body>
9</html>
Título da Página

Este é um título.

A tag `title` é super importante! Ela fica dentro do `` e define o título da página, que aparece na barra de título do navegador, nas abas e nos resultados de busca.

Linha de Tabela (Tag `<tr>`): Cada linha da sua tabela

A tag `<tr>` cria uma nova linha dentro da sua tabela.

Exemplo:

1<table>
2	<thead>
3		<tr>
4			<th>Nome</th>
5			<th>Idade</th>
6		</tr>
7	</thead>
8	<tbody>
9		<tr>
10			<td>João</td>
11			<td>25</td>
12		</tr>
13		<tr>
14			<td>Maria</td>
15			<td>30</td>
16		</tr>
17	</tbody>
18<tfoot>
19	<tr>
20		<td>Total</td>
21		<td>55</td>
22	</tr>
23</tfoot>
24</table>
NomeIdade
João25
Maria30
Total55
A tag `tr` define uma linha na sua tabela. Dentro dela, você coloca as células de cabeçalho (`th`) ou de dados (`td`).

Conteúdo de Texto (Tag `<track>`): Pra legendas e outras informações de texto em vídeos

A tag `<track>` é usada dentro de elementos de vídeo ou áudio pra adicionar legendas, descrição ou outros tipos de texto que acompanham a mídia.

Exemplo:

1<video width='320' height='240' controls>
2	<source src='movie.mp4' type='video/mp4'>
3	<track src='subtitles_en.vtt' kind='subtitles' srclang='en' label='English'>
4	<track src='subtitles_no.vtt' kind='subtitles' srclang='no' label='Norwegian'>
5	Seu navegador não suporta o elemento de vídeo.
6</video>
A tag `track` adiciona faixas de texto (como legendas) pra elementos de mídia (`video` ou `audio`). Você usa o atributo `src` pra dizer onde tá o arquivo de legenda, `kind` pra dizer o tipo (legendas, descrição, etc.), `srclang` pra o idioma e `label` pra um nome que aparece pro usuário.

Texto Não Articulado (Tag `<u>`): Pra sublinhar o texto (use com cuidado!)

A tag `<u>` sublinha o texto. Antigamente era muito usada, mas hoje em dia geralmente a gente usa sublinhado só pra links, então use com cuidado pra não confundir o usuário.

Exemplo:

1<p>
2	Este é um texto não articulado: <u>Texto Não Articulado</u>.
3</p>

Este é um texto não articulado: Texto Não Articulado.

A tag `u` simplesmente sublinha o texto. É importante usar com moderação pra não confundir com links.

Lista Não Ordenada (Tag `<ul>`): Uma lista com bolinhas (ou outros símbolos)

A tag `<ul>` cria uma lista onde a ordem dos itens não é importante. Por padrão, ela usa bolinhas como marcadores.

Exemplo:

1<ul style='list-style-type:circle'>
2	<li>Item 1</li>
3	<li>Item 2</li>
4	<li>Item 3</li>
5</ul>
  • Item 1
  • Item 2
  • Item 3
A tag `ul` cria uma lista não ordenada (com marcadores como bolinhas). Cada item da lista vai dentro de uma tag `li`.

Variável (Tag `<var>`): Pra marcar variáveis em fórmulas ou código

A tag `<var>` serve pra marcar variáveis matemáticas ou de programação no seu texto, geralmente aparecendo em itálico.

Exemplo:

1<p>A fórmula da equação quadrática é: <var>x</var> = (-<var>b</var> ± √(<var>b</var>² - 4<var>a</var><var>c</var>)) / (2<var>a</var>)</p>

A fórmula da equação quadrática é: x = (-b ± √(b² - 4ac)) / (2a)

A tag `var` é usada pra indicar uma variável em um contexto matemático ou de programação.

Vídeo (Tag `<video>`): Pra botar vídeos na sua página

A tag `<video>` te permite incorporar vídeos diretamente na sua página HTML.

Exemplo:

1<video width='320' height='240' controls>
2	<source src='movie.mp4' type='video/mp4'>
3	Seu navegador não suporta o elemento de vídeo.
4</video>
A tag `video` incorpora um vídeo na sua página. Você pode definir a largura (`width`) e altura (`height`), mostrar os controles de reprodução com `controls` e usar a tag `source` pra especificar o arquivo de vídeo.

Quebra de Linha Opcional (Tag `<wbr>`): Pra ajudar o navegador a quebrar palavras longas

A tag `<wbr>` diz pro navegador que, se uma palavra for muito longa e não couber na linha, ele pode quebrar a linha ali.

Exemplo:

1<p>Esta é uma palavra super<wbr>hiper<wbr>mega<wbr>grande que pode quebrar.</p>

Esta é uma palavra superhipermegagrande que pode quebrar.

A tag `wbr` (Word Break Opportunity) indica um ponto no texto onde o navegador pode, opcionalmente, inserir uma quebra de linha se a palavra for muito longa.