Nessa aula você vai ver o que de fato é o HTML. Os conceitos da W3C e da Mozilla sobre o que é HTML, O que são as Tags do HTML, estrutura de um elemento HTML, atributos e muito mais.

Segundo a W3C, “HTML é a linguagem principal da Web para criar conteúdo para todos usarem em qualquer lugar.”

E segundo o site do Mozilla: “HTML (HyperText Markup Language) não é uma linguagem de programação, é uma linguagem de marcação utilizada para dizer ao seu navegador como estruturar a página web que você visita. A página pode ser tanto complicada como simples quanto o desenvolvedor web desejar que seja.”

Essa segunda explicação talvez seja a mais precisa para ter uma idéia do que seja o HTML, que basicamente é a linguagem que o site explica direitinho ao navegador como ele deve mostrar na tela cada elemento da página que você abriu, tudo isso baseado em como o desenvolvedor que criou o site quer que você veja as informações.

HTML Não é programação

Não se pode considerar o HTML como uma linguagem de programação, pois ela serve apenas para fazer marcações de conteúdos, ser informativa, ela não possui lógica de programação.

Imagine que o desenvolvedor do site quer que você veja primeiro ao abrir um site a imagem do logotipo, logo embaixo um título grande, e mais embaixo um texto explicando algo.

Tudo isso é possível porque o navegador consegue entender como cada parte do conteúdo do site deve ser, ele consegue diferenciar uma imagem, de um título, um texto corrido, vídeos, links, e tudo mais.

A questão é: Como escrevemos isso, pra informar ao navegador a estrutura da página?

Tags

O “x” da questão são as tags. Tags são rótulos, etiquetas que usamos no HTML pra informar o tipo de cada conteúdo.

A tag é formada pelo sinal de menor que “<”, o nome da tag, e o sinal de maior “>”. Como por exemplo:

<h1>

Esse exemplo é a tag de abertura. Quando queremos por exemplo dizer “esse é o título da página”, precisamos usar a tag pra dizer onde começa o título e onde termina.

Nesse caso precisamos antes do título usar a tag de abertura “<h1>” e no final no título, dizer que o título acaba ali, então usamos a tag de fechamento, que é igual a de abertura, só que ela tem uma barra “</h1>”.

Então para esse exemplo de título, ficaria:

<h1>esse é o título da página</h1>

Elementos do HTML

Tudo isso junto forma o Elemento, que pode ser entendido como a Tag (abertura + fechamento) + o conteúdo em si.

Uma observação importante: nem todas as tags possuem fechamento, pois se ela não vai indicar o início e o fim de um conteúdo ou melhor, delimitar algo, ela já é considerada o elemento completo por si só, como por exemplo a tag <img>.

Na tag <img> indicamos dentro dela mesma o endereço da imagem a ser mostrada como: <img src=”endereco-da-imagem.jpg”>, não sendo necessário fechá-la, pois o conteúdo já está dentro da tag. Esses elementos podem ser chamados de elementos vazios, usando apenas a tag de abertura pra representá-los.

Atributos

Esse exemplo da tag de imagem mostra algo importante de ser usado em qualquer tipo de elemento chamado atributo. No elemento “imagem” mostrado, o atributo usado foi o “src”.

Os atributos são basicamente informações que passamos dentro da tag, informando uma característica ou um comportamento esperado para aquele elemento.

Se queremos por exemplo dar uma identidade única pra um elemento, dizemos:

<h1 id=”titulo-principal”>esse é o título da página</h1>

Onde “titulo-principal” vai representar a identificação desse elemento, diferenciando ele dentre todos os elementos <h1>.

A estrutura do atributo é bem simples como mostrado anteriormente, basta dentro da tag, informar o nome do atributo = “valor-do-atributo”.

Atributos globais x específicos

Existem atributos que podem ser usados de forma generalizada, servindo para qualquer tag chamados globais, e atributos únicos pra cada tag que são os atributos específicos.

Alguns exemplos de atributos globais:

-Id: Como visto antes vai criar uma identificação única pra o elemento, e essa identificação não poderá se repetir em nenhum outro elemento da página.

-Class: Vai classificar o elemento como parte de um grupo. Por exemplo, podemos dizer que:

<h1 class=”titulos”>título 1</h1> 

Nesse caso, informamos que esse h1 pertence a uma classe de elementos chamada “titulos”, e sempre que quisermos que um outro elemento da página tenha as mesmas características, atribuímos a ele a classe “titulos”.