O Que é uma Tag em HTML? Entenda a Base da Criação de Sites
Neste tutorial fundamental do nosso curso de HTML, vamos desvendar o principal conceito por trás das linguagens de marcação. Se você quer aprender a criar sites, existe uma palavra que fará parte do seu vocabulário todos os dias a partir de agora: as famosas tags.
Sem elas, a internet seria apenas um bloco de texto sem formatação, sem cores, sem imagens e sem links. Vamos entender de uma vez por todas o que elas são e como utilizá-las.
Quer dominar o Front-End e criar sites profissionais?
Transforme seus estudos em uma profissão altamente lucrativa. Domine a base do HTML e CSS com o nosso material completo e conquiste o mercado de tecnologia.
"A didática da apostila é incrível. Consegui entender conceitos que antes pareciam grego e hoje já pego meus primeiros freelas de criação de sites!" - Mariana, Web Designer.🚀 Baixar a Apostila Digital (PDF)
O que, afinal, é uma tag em HTML?
Provavelmente você já ouviu a palavra "tag" em outro contexto. Nas redes sociais ou em blogs, as tags (ou hashtags) são palavras-chave usadas para classificar um assunto. Porém, no mundo da programação e do HTML, o sentido é muito mais literal.
A tradução de tag para o português é etiqueta. E é exatamente isso que faremos: vamos colocar "etiquetas" em nossos textos para que o navegador de internet (Chrome, Safari, Firefox) saiba como exibi-los.
A analogia do recado
Imagine que sua mãe precisa sair e deixa um dinheiro em cima da mesa para você. Como você sabe o que fazer com aquele dinheiro? A maneira mais simples seria ela deixar um recadinho num post-it: "Compre pão e leite".
As tags no HTML funcionam exatamente como esse bilhete. Elas são recados que você deixa para o navegador web interpretar: "Ei, navegador, pegue essa frase e exiba em negrito" ou "Ei, navegador, transforme esse texto num link".
A Sintaxe Perfeita: Os Símbolos < > e </ >
Para que o navegador não confunda o seu texto normal com uma "ordem" (tag), nós precisamos isolar esses comandos usando os sinais de menor que < e maior que >.
A grande maioria das tags existe em pares, abraçando o conteúdo. Precisamos dizer onde o efeito começa e onde ele termina. A tag de fechamento é idêntica à de abertura, mas possui uma barra / logo após o primeiro sinal.
- Tag de Abertura:
<nome-do-comando> - O Conteúdo: O texto ou elemento que será afetado.
- Tag de Fechamento:
</nome-do-comando>
Tudo o que estiver entre a tag de abertura e a tag de fechamento sofrerá a marcação escolhida.
Prática: Criando nossa própria linguagem (Prog HTML)
Para o conceito fixar na sua mente, vamos brincar de inventar uma linguagem de marcação. Imagine que você foi convidado para dar um discurso num evento internacional de tecnologia. Para não se perder, você anota o discurso e cria "tags de comportamento" no papel.
- Na introdução, você deve falar com calma. Vamos usar a tag:
<devagar> - No meio, você deve apontar para o projetor. Vamos usar a tag:
<slides> - No fim, você deve expressar gratidão. Vamos usar a tag:
<agradecer>
Aplicando a nossa linguagem "Prog HTML", o seu discurso ficaria estruturado assim:
<devagar>
Olá, meu nome é Geddy Lee, sou Desenvolvedor Front-End e hoje vou falar sobre HTML.
</devagar>
<slides>
Como podem ver neste gráfico, estas são as linguagens mais usadas no mundo.
</slides>
<agradecer>
Gostaria de agradecer a todos pela atenção e ao Curso HTML Progressivo.
</agradecer>Note como a estrutura é limpa! Fica claro para você (o "navegador" do discurso) exatamente onde começa e onde termina cada comportamento, sem misturar as coisas. É exatamente assim que o Google Chrome lê o seu código para montar a página na tela do usuário.
🏋️ Exercício de Fixação: A sua rotina em Tags
Crie, no papel ou no Bloco de Notas, a sua própria linguagem de marcação fictícia. Em seguida, escreva um texto narrando a sua rotina para estudar programação.
Invente tags como <ligar-pc>, <foco-total>, <tomar-cafe> e aplique-as abraçando as frases correspondentes. Lembre-se de fechar todas as tags com a barra /!
Perguntas Frequentes (FAQ)
1. Todas as tags HTML precisam de fechamento?
A maioria sim, mas existem exceções. As chamadas "Void Elements" ou tags vazias não possuem conteúdo interno e, portanto, não precisam de uma tag de fechamento. Exemplos famosos incluem <br> (quebra de linha) e <img> (inserir imagem).
2. O que acontece se eu esquecer de fechar uma tag?
O navegador tentará "adivinhar" o que você quis fazer, o que geralmente resulta em um site quebrado. Por exemplo, se você esquecer de fechar uma tag de negrito <strong>, o navegador pode deixar a página inteira, até o rodapé, em negrito. Sempre revise o fechamento das tags.
3. Posso colocar uma tag dentro da outra?
Sim! Isso se chama aninhamento (nesting). Por exemplo, você pode colocar uma tag de itálico dentro de uma tag de parágrafo. O segredo é fechar as tags na ordem inversa que foram abertas. O primeiro a abrir deve ser o último a fechar.
Nenhum comentário:
Postar um comentário