O que são tags em HTML - < > e < / >

Nesse tutorial de HTML de nosso curso, vamos ensinar o principal conceito das linguagens de marcação (dentre elas, o HTML, para criação de sites): as tags.

Caso deseje transformar seus estudos de HTML em uma profissão para começar a ganhar dinheiro criando sites, sugerimos que faça o curso e obtenha seu certificado de Webmaster (tudo online):
 
Estudar pela Apostila HTML Progressivo

Obter meu certificado!

O que é uma tag em HTML

Provavelmente você já deve ter ouvido falar em tags, mas em outro contexto.

Por exemplo, os bloggers (pessoas que criam mantém blogs) costumam usar uma lista de ‘tags’ ao fim de cada artigo, que nada mais são que palavras-chaves que definem e classificam o conteúdo daquela página de internet.

Porém, as tags têm um sentido bem mais abrangente.

Podemos ver isso simplesmente pela tradução da palavra tag que significa etiqueta.

Isso mesmo, vamos colocar algumas etiquetas em nossos códigos HTML na hora que formos criar um site usando a linguagem HTML.

Essas etiquetas servem para informar ao navegador que o está entre as tags deverá ser interpretado de uma maneira diferente.

Por exemplo: se sua mãe sai e deixa dinheiro para você. Como você sabe o que vai fazer com esse dinheiro (supondo que sua mãe não te dê dinheiro sem motivos)?

A maneira mais simples de especificar como devemos ver isso seria através de um recadinho em um papel.

As tags, em nossos códigos de HTML, possuem significado semelhante, elas servem para alertar o browser para uma maneira de interpretar aquela informação: “Hey, navegador, pegue a próxima informação e exiba da seguinte maneira”.

Uma tag que sua mãe poderia deixar seria: compre o leite.

Pronto, agora você já sabe como interpretar aquela informação (dinheiro deixado em cima da mesa): para comprar leite.

Definição das tags em HTML: < > e </ >

As tags em HTML têm a mesma função do recado de sua mãe: é um recado sobre a maneira que o navegador deve interpretar e exibir um determinado trecho do seu código.

As tags vêm entre os símbolos de: <>

A grande maioria das tags existem em pares, indicando onde deve iniciar e terminar um tipo de marcação. A tag de início é somente o comando entre <>, já a tag de término, possui o símbolo / após  >. Veja:

Tag de início:  < nome do comando >

Tag de término: </ nome do comando >

Note que o nome do comando deverá sempre ser o mesmo.

Assim, o que estiver entre essas duas tags, o navegador irá interpretar da maneira que você ordenou através de seu código HTML.

Criando uma linguagem de marcação para explicar Tags

Isso mesmo, vamos agora criar uma linguagem de marcação.

Vamos supor que você foi contratado pela Google para ser Webmaster e agora vai ter que fazer um discurso internacional.

Para facilitar sua vida, você vai anotar esse discurso e usará tags nesse seu texto para saber o que fazer.

Inicialmente, na introdução do discurso, você tem que falar com calma e devagar.

O comando para isso será: devagar

Em seguida, você deve olhar para a tela onde irá exibir seus slides.

O comando para se virar e ler é: slides

E por fim, você deve agradecer aos seus ouvintes.

O comando que está em seu papel para isso é: agradecer

Agora vamos escrever nosso discurso:

“Olá, meu nome é Geddy Lee e sou Webmaster do Google, e hoje vou falar para vocês sobre o HTML.

...

Como podem ver, nesses slides, essas são as principais utilidades do HTML.

...

Gostaria de agradecer a todos pela atenção e ao Curso HTML Progressivo por ter me ensinado tudo isso.”

Ok, esse é um texto normal.

Mas para apresentar, você não deve somente ler, você deve interpretar de outras maneiras esse texto. Para isso, vamos fazer marcações nesse papel. Vamos usar a linguagem de marcação Prog HTML, inventada por nós :)

Nosso discurso ficaria assim:

<devagar>
Olá, meu nome é Geddy Lee e sou Webmaster do Google, e hoje vou falar para vocês sobre o HTML. 
...
</devagar> <br>
 
<slides>
Como podem ver, nesses slides, essas são as principais utilidades do HTML.
...
</slides> <br>
 
<agradecer>
Gostaria de agradecer a todos pela atenção e ao Curso HTML Progressivo, por terem me ensinado tudo isso.
</agradecer>

Pronto, fica bem claro onde você deve começar e terminar a introdução, de maneira devagar, em que parte você deve exibir e parar de exibir os slides, e o momento certo de agradecer e terminar o agradecimento de seu discurso.

Simples não?

Exercício: Crie sua linguagem de marcação

Crie uma linguagem de marcação, e em seguida crie um texto com essa linguagem que descreva o passo a passo que você leva para criar um site. Crie seus comandos, como: ligar computador, conectar a internet, entrar no site HTML Progressivo, estudar um capítulo, testar os exemplos e fazer os exercícios.

Use tags.