Elemento é a informação composta por uma tag e os elementos afetados por ela. Por exemplo, o elemento parágrafo contém a definição de sua tag mais o conteúdo que o forma. Os elementos podem conter textos, outros elementos ou ainda serem vazios. As tags devem ser escritas em letras minúsculas.

Exemplo:

<p>parágrafo</p>

Um elemento vazio comporta-se como uma mescla entre a tag de abertura e a tag de fechamento do elemento. Esse tipo de elemento possui toda a informação a respeito de seu conteúdo nos seus atributos, por isso dispensa o fechamento da tag.

Exemplo:

<img src="/logo.png" alt="Texto alternativo da imagem" />

Note que nesse elemento o fechamento da tag é realizado pelo espaço + barra antes do sinal de "maior".

 

Atributos e valores

Os atributos contém informações sobre os dados no documento aos quais a tag afeta. Para cada atributo de um elemento deve haver um valor contido entre aspas. Os atributos também são escritos em minúsculas, porém seus valores não necessariamente.

Exemplo:

<img src="/logo.png" alt="logotipo" />

src (source) é um atributo da tag img (image) que descreve onde a imagem pode ser encontrada, e "logo.png" é o valor que corresponde ao caminho para a imagem. Assim como o atributo alt (alternative) representa o que deve ser exibido se a imagem não for encontrada e tem como valor "logotipo".

Alguns atributos têm valores predefinidos, como no caso do atributo media do elemento vazio link:

<link rel="stylesheet" media="screen" type="text/css" href="/estilo.css" />

Nesse caso, o atributo media tem valores predefinidos, como "screen", "handheld" ou "print".

 

Elementos em bloco e em linha

Um elemento pode pertencer a duas categorias distintas: block e inline. Os elementos em bloco sempre iniciam em uma "nova linha" sequencialmente, enquanto elementos em linha vão se posicionando lado a lado até que finalmente preenchem todo o espaço e seguem para uma nova linha.

As tags de parágrafo (<p></p>) e divisão (<div></div>) são exemplos de elementos em bloco, enquanto as tags para negrito (<b></b> ou <strong></strong>) e âncora (<a></a>) são elementos em linha. Uma regra básica é que elementos em linha não podem conter elementos em bloco, assim não é possível inserir uma divisão dentro de âncora.

Alguns elementos em bloco também não podem conter outros elementos em bloco, como por exemplo a tag de cabeçalho <h1></h1> não pode conter uma tag de parágrafo <p></p>. No entanto as divisões, por exemplo, podem conter parágrafos.

 

Elementos pai e filho

Se um elemento contém outro elemento, ele é considerado o elemento pai do contido. Caso haja mais elementos dentro do elemento filho, todos são considerados descendentes do elemento pai, respeitando a relação de hierarquia entre eles. Isso significa que a tag do elemento pai só pode ser fechada após todas as tags dos elementos filhos serem fechadas.

Exemplo:

<div><p> texto</p></div>

<div><p> texto e <a>link</a></p></div>

 

Caracteres codificados

Caso não se utilize um editor visual para se criar as páginas XHTML (como o Adobe Dreamweaver, por exemplo) deve-se tomar cuidado com os elementos codificados. Se for digitado o caractere "<" o editor de texto não saberá informar se esse é o início de uma tag ou o caractere a ser exibido, o que provavelmente resultará no navegador interpretando como o início de uma tag.

Para que se inclua esses caracteres no corpo do texto é imprescindível o uso das suas codificações. Assim o caractere "<" será digitado como "<" (less than - menor que). Toda entidade dessa natureza inicia-se com o & ("e" comercial) e termina com ";" (ponto e vírgula). Abaixo segue uma tabela com os principais caracteres e suas respectivas codificações.

 

Caractere	Código
< e > (maior que e menor que)	< e >
" (aspas)	"
&	&
©	©
®	®
£	£
€	€

Tabela de caracteres e suas codificações.

 

Uma lista mais completa de caracteres especiais pode ser encontrada no site HTMLHelp.

• < URL - Uniform Resource Location
• Introdução ao XHTML >