Tags HTML: quais são as mais usadas e como você pode reconhecer elas fácil
Sacar o que é e como cada tag HTML funciona é crucial pra usar elas direitinho no código do seu site. Então, cola aqui com a gente e bora ver tudo o que você precisa saber pra mandar bem nesse assunto!
Tabela Conteúdo
O que são tags HTML?
Tags HTML são comandos que dizem pro navegador como ele deve exibir o texto. Com elas, dá pra fazer de tudo: deixar o texto em itálico, pular linha, criar listas, inserir objetos e muito mais.
Essas tags fazem parte do HTML (Hypertext Markup Language), que tá por trás de toda página da internet.
Como as páginas entendem as tags HTML?
Quando você abre uma página web, o servidor dá uma olhada no código HTML e entende tudo o que precisa mostrar. É tipo o navegador lendo um roteiro, de cima pra baixo, igualzinho como você tá dando uma olhada nesse texto agora.
Na hora de formatar o conteúdo, você pode usar várias tags à vontade. Mas tem umas regrinhas básicas que não dá pra esquecer.
Cada tag HTML é como um combo de três partes:
- Tag de abertura — começa com
<e termina com>, é tipo o “inicio” do rolê; - Conteúdo — são as instruções que mostram como o elemento deve aparecer na página, tipo o “passo a passo”;
- Tag de fechamento — termina com
</e>, é o “fim” do rolê.
Algumas tags são meio “vagabundas” e não precisam de fechamento. Elas são como aqueles atalhos que você usa pra coisas rápidas, como quebras de linha ou metadados.
Qual é a diferença entre elementos, atributos e tags HTML?
Mesmo que a gente esteja falando de tags HTML, é importante sacar a diferença entre elas e os elementos e atributos HTML.
- Elementos HTML são os “rolês” que aparecem na página; são a parte do conteúdo que você vê. Tipo, se você tem um texto em negrito, o texto em si é o elemento.
- Tags HTML são como as “instruções” que dizem ao navegador como mostrar esse elemento. Elas começam com
<e terminam com>. Por exemplo:<b>Texto em negrito</b>. - Atributos HTML são os detalhes extras que você adiciona nas tags pra dar uma forcinha a mais. Eles aparecem dentro da tag e descrevem características específicas do elemento. Por exemplo:
<html lang="pt-BR">— aqui,lang="pt-BR"é o atributo que define o idioma da página.
Então, olha só como tudo se encaixa:
- Tags são os “comandos” que mostram como exibir um elemento.
- Elementos são o “conteúdo” que fica entre as tags.
- Atributos são os “toques especiais” que você coloca nas tags pra dar mais informações sobre o elemento.
Tudo junto cria a mágica da sua página!
| Tipo | Tag HTML | Elemento HTML | Atributo HTML |
| Siginificado | São as instruções que dizem pro navegador como mostrar um elemento na página. | É o conteúdo real que aparece na página, que fica dentro da tag. | São informações extras que você coloca na tag pra dar mais detalhes sobre o elemento. |
| Aparência | Começa com < e termina com >. | Fica dentro da tag HTML. | Aparece na tag inicial antes de qualquer elemento, tipo src em <img src="imagem.jpg">. |
Exemplos de Tags HTML Que São Hits
Quer saber como deixar seu site com aquele visual maneiro? Se liga nessas tags HTML que são top e vão transformar seu texto em estilo puro!
<p> Tag de Parágrafo
O que é: Se você quer organizar o texto e deixar ele bem separadinho, usa essa tag.
Como Funciona: Qualquer texto que você colocar entre <p> e </p> vai virar um parágrafo padrão, aquele corpo de texto que a galera lê com calma. É como se fosse o “fundamento” do seu conteúdo!
<p>Esse é um parágrafo da hora!</p><h2> Tag de Título
O que é: Pra criar subtítulos e organizar o conteúdo, essa tag é o caminho.
Como Funciona: Texto entre <h2> e </h2> vira um Título 2, ideal pra dividir o conteúdo em seções. Tem também o <h1> pra título principal, e <h3> e até <h4> pra níveis mais profundos.
<h2>Esse é um subtítulo</h2><b> Tag de Negrito
O que é: Quer destacar algo com aquele negrito poderoso? É essa tag que você usa.
Como Funciona: Qualquer texto entre <b> e </b> vai ficar em negrito. Perfeito pra dar ênfase em partes importantes do conteúdo. (O ‘b’ vem de ‘bold’!)
<b>Texto em negrito</b><i> Tag de Itálico
O que é: Pra dar aquele charme no texto, use essa tag.
Como Funciona: Texto entre <i> e </i> vai ficar em itálico, ideal pra destacar uma palavra ou frase de um jeito mais sutil. (O ‘i’ vem de ‘italic’!)
<i>Texto em itálico</i><u> Tag de Sublinhado
O que é: Pra deixar o texto sublinhado e chamar atenção, essa tag é a solução.
Como Funciona: Texto entre <u> e </u> vai aparecer com uma linha embaixo. (O ‘u’ vem de ‘underline’!)
<u>Texto sublinhado</u>As tags HTML mais comuns
Tem um montão de tags HTML disponíveis — quase 100! Vamos dar uma olhada nas principais que você vai usar no seu site.
| Tag | Tipo | O que é |
| <p> | Tags de Texto HTML | Parágrafo |
| <h1> | Tags de Texto HTML | Título 1 |
| <h2> | Tags de Texto HTML | Título 2 |
| <h3> | Tags de Texto HTML | Título 3 |
| <h4> | Tags de Texto HTML | Título 4 |
| <h5> | Tags de Texto HTML | Título 5 |
| <h6> | Tags de Texto HTML | Título 6 |
| <strong> | Tags de Texto HTML | Importância |
| <em> | Tags de Texto HTML | Ênfase |
| <abbr> | Tags de Texto HTML | Abreviação |
| <address> | Tags de Texto HTML | Informações de contato |
| <bdo> | Tags de Texto HTML | Substituir a direção do texto atual |
| <blockquote> | Tags de Texto HTML | Conteúdo de outra fonte |
| <cite> | Tags de Texto HTML | Título da obra, livro, site |
| <q> | Tags de Texto HTML | Citação |
| <code> | Tags de Texto HTML | Exibir uma parte do código de programação |
| <ins> | Tags de Texto HTML | Texto inserido |
| <del> | Tags de Texto HTML | Texto excluído do documento |
| <dfn> | Tags de Texto HTML | Termo definido em uma frase |
| <kbd> | Tags de Texto HTML | Entrada de teclado |
| <pre> | Tags de Texto HTML | Texto pré-formatado |
| <samp> | Tags de Texto HTML | Amostra de saída de um programa de computador |
| <var> | Tags de Texto HTML | Nome de variável usado em contexto matemático ou de programação |
| <br> | Tags de Texto HTML | Quebra de linha única |
| <div> | Tags de Texto HTML | Divisão |
| <a> | Tags de link HTML | Tag âncora para um link |
| <base> | Tags de link HTML | URL base para todas as URLs relativas no documento |
| <img> | Tags de imagem e objeto HTML | Imagem |
| <area> | Tags de imagem e objeto HTML | Área de um mapa de imagem |
| <map> | Tags de imagem e objeto HTML | Mapa de imagem |
| <param> | Tags de imagem e objeto HTML | Parâmetro para um elemento <Object> |
| <object> | Tags de imagem e objeto HTML | Incorporar um objeto |
| <ul> | Tags de lista HTML | Lista não ordenada |
| <ol> | Tags de lista HTML | Lista ordenada |
| <li> | Tags de lista HTML | Lista |
| <dl> | Tags de lista HTML | Lista de descrição |
| <dt> | Tags de lista HTML | Termo na lista de descrição |
| <dd> | Tags de lista HTML | Definição/descrição de um termo na lista de descrição |
Considerações Finais
Sacar como o HTML funciona não é nenhum bicho de sete cabeças. Com as dicas que rolou neste guia, você já tá pronto pra identificar e usar as tags HTML nas páginas do seu site como um verdadeiro pro!
Related videos
Watch LaterAdded
17:50