Anatomia de um Elemento HTML

Vamos explorar a anatomia de um elemento HTML analisando um elemento de parágrafo como exemplo.

O elemento de parágrafo da imagem acima é divido em 3 partes:

• Tag de abertura

A tag de abertura é definida a partir do elemento que desejamos criar no HTML, se desejamos criar um elemento de parágrafo, então devemos usar uma tag de abertura <p>.

A tag de abertura foi criada a partir do sinal <, seguido do nome da tag p e do sinal >.

• Conteúdo

O conteúdo do elemento depende da tag que está sendo criada, no caso de um elemento parágrafo, o conteúdo será texto. O conteúdo é tudo aquilo que fica entre a tag de abertura e a tag de fechamento.

• Tag de fechamento

Usaremos o mesmo nome da tag em questão, a diferença é que devemos incluir uma barra após o sinal de menor, dessa forma: </p>.

Elementos com atributos

Elementos também podem ter atributos que possuem informações extras para uma tag, importante ressaltar que os atributos devem ser inseridos na tag de abertura e não no conteúdo do elemento.

O atributo class é um atributo que deve receber um valor. Para isso, é necessário usar o sinal = e atribuímos um valor para ele entre aspas. Mas também existem atributos que não recebem valor, como o atributo required.

Elementos Vazios

Até agora vimos elementos que precisam de conteúdo, mas no HTML também existem elementos que não possuem conteúdo, chamamos esses elementos de elementos vazios.

Esses elementos não possuem uma tag de fechamento e nem precisam envolver qualquer tipo de conteúdo para cumprir seu objetivo, um exemplo de elemento vazio é a tag de imagem.

Uma observação importante: os elementos vazios possuem uma barra antes do sinal de maior.

Esse artigo abordou

• Anatomia de um elemento HTML
• Elementos com atributos
• Elementos vazios

Autor

Daniel Nogueira
https://www.linkedin.com/in/udanielnogueira/