A expressão “tag” significa literalmente “etiqueta”. Uma etiqueta é usada para marcar ou identificar algo, como a etiqueta de preços no mercado por exemplo.
No HTML5, as tags tem o mesmo objetivo: marcar elementos. Ou seja, determinar onde um elemento começa e onde ele termina. Isso é muito apropriado, afinal “HTML” significa Linguagem de Marcação de Hipertexto.
Há dois tipos de tags: 1) as que precisam de fechamento e 2) as que se fecham sozinhas. Vamos conhecê-las agora.
1 - Tags que necessitam de fechamento
Para criar uma tag precisamos definir um sinal de menor (<), o nome da tag e por fim um sinal de maior (>).
Para fechar essa mesma tag, basta definir um sinal de menor (<), uma barra (/), o nome da tag e um sinal de maior (>).
Entre a tag de abertura e fechamento irá o conteúdo da tag. Exemplo:
Em vermelho estão as tags de abertura e fechamento e em amarelo está o conteúdo da tag.
Quando uma tag é interpretada no navegador, ela se transforma em um elemento HTML.
2 - Tags que se fecham sozinhas (self-closing)
Algumas tags não precisam de tag de fechamento. Nesse caso, na tag de abertura, após definir o nome da tag, nós já colocamos uma barra (/), deixando claro seu fechamento. Exemplo:
Em vermelho está a tag de abertura e a barra de fechamento no final dela.
As tags de auto fechamento não irão possuir conteúdo.
Percebemos que é bem simples criar uma tag, não concorda? Elas podem ser simples de criar, mas também são muito poderosas, pois elas são um dos fundamentos da linguagem HTML, o que as torna também um dos fundamentos da Web Moderna. :)
Há um provérbio chinês que diz: “Uma longa caminhada começa sempre com o primeiro passo”. Da mesma forma, não importa quão grande um site ou sistema possa ser, ele sempre irá começar com uma pequena tag.
Até o próximo artigo!
Gostou deste artigo?
Gostaria de aprender mais sobre HTML5? Então se inscreva em nosso Curso Completo de HTML5, que você pode acessar neste link https://hcode.com.br/cursos/HTML5. Aprenda todas as tags e todos os atributos desta linguagem, por meio de exemplos práticos, com a ajuda do método Hcode de ensino ;)