Elementos

Estrutura básica

Todo elemento tem pelo menos uma tag. A estrutura de uma tag depende do tipo dela. Se for uma tag de abertura, também chamada de tag inicial, que serve para indicar que estamos começando a marcar um elemento, ela tem a seguinte estrutura:

<tag atributos>

Se for uma tag de fechamento, também conhecida como tag final, que serve para terminar a marcação de um elemento, a sintaxe é a seguinte:

</tag>

Elementos podem ter conteúdo ou não. Elementos sem conteúdo são chamados de elementos vazios. Elementos com conteúdo tem duas tags. Elementos vazios tem apenas uma tag. Essa é a sintaxe da marcação de um elemento com conteúdo:

<tag atributos>conteúdo</tag>

Já a sintaxe da marcação de um elemento vazio é a seguinte:

<tag atributos>

Uma sintaxe alternativa para um elemento vazio contém uma / antes do >, separada dos atributos por um espaço:

<tag atributos />

O mais recomendado pelos guias de estilo é usar a primeira opção.

Um exemplo de elemento com conteúdo é um parágrafo:

<p>Lorem ipsum dolor sit</p>

Veja que esse elemento possui duas tags, que são as tags inicial e final. Já o elemento <br> é um elemento vazio, e por isso possui apenas uma tag.

Como você pode ter notado, eu citei atributos nas sintaxes dos elementos. Atributos fornecem dados sobre um elemento. Atributos são especificados assim: atributo="valor". As aspas podem ser duplas ou simples e são opcionais, exceto quando o valor contém espaços. O mais recomendado pelos guias de estilo é usar aspas duplas sempre, mesmo quando elas podem ser omitidas.

Considere o elemento abaixo:

<a href="/contato" id="cta-contato">Contato</a>

Esse elemento marca um link e tem os atributos href, que especifica a URL do link e id, que define um identificador único para o elemento. Note que os atributos são colocados na tag inicial. Agora, veja um exemplo de elemento vazio com atributos:

<img src="/foo.png">

Há elementos que não tem atributos. Quando o elemento tem mais de um atributo, os atributos são separados uns dos outros por espaços.

Também há atributos booleanos. No caso deles, o que importa é se eles estão presentes ou não no elemento. Se o atributo for definido, seu valor deve ser vazio ou o próprio nome do atributo. O atributo checked é um dos atributos booleanos mais conhecidos. Exemplo de uso dele:

<input type="checkbox" checked="checked">

Vale lembrar que as tags e atributos são case-insensitive (mas não os valores dos atributos). Por isso, os elementos abaixo são válidos e equivalentes:

<img src="foo.png">
<Img Src="foo.png">
<IMG SRC="foo.png">

É uma boa prática escrever as tags e atributos sempre em letras minúsculas e isso é o mais recomendado pelos guias de estilo.

Aninhamento

O conteúdo de um elemento também pode conter outros elementos. A prática de colocar elementos dentro de outros é chamada de aninhamento. Veja um exemplo onde ocorre o aninhamento:

<section>
  <h2>Título da seção</h2>
  <p>
    Parágrafo com <a href="">link</a>.
  </p>
</section>

Note que o parágrafo (marcado pelo elemento <p>) e o título (marcado pelo elemento <h2>) estão dentro da seção (marcada pelo elemento <section>), pois fazem parte do conteúdo dela. Por sua vez, o link (marcado pelo elemento <a>) está dentro do parágrafo. Assim, podemos dizer que o elemento <section> está no primeiro nível de aninhamento, o elemento <p> está no segundo nível, e o link está no terceiro nível.

É possível aninhar múltiplos elementos dentro dos outros (assim, eu poderia colocar mais links dentro do parágrafo, assim como outros elementos também), e usar quantos níveis de aninhamento forem necessários.

Quando elementos são aninhados, você precisa sempre fechar (ou seja, colocar a tag final) todos os elementos internos de um elemento antes de fechar o elemento externo. Por isso, no exemplo que foi usado, o link foi fechado antes do parágrafo, e o parágrafo foi fechado antes da seção.