Você está em: Home > HTML/XHTML > Visualizando artigo

Guia prático de HTML - Elementos e atributos

Autor/fonte: Tiago Daniel de Souza
Tags: [ guia prático de html ]

[ Indicar a um amigo ] [ Translate to english ] [ Imprimir ]

1. Elementos

Um elemento é uma estrutura semântica, composta de tag de abertura, conteúdo e tag de fechamento.

Os documentos HTML são simples arquivos de texto que contêm "tags de marcação". Essas etiquetas definem os elementos da linguagem HTML e os seus conteúdos. A lista seguinte indica algumas de suas características:

As "tags de marcação" do HTML são usadas para definir os elementos;
As tags HTML escrevem-se utilizando os caracteres <e>, entre eles o nome do elemento e os seus atributos;
A primeira tag do par é a tag de início (ou de abertura) e a segunda do par é a tag de fim (ou de fechamento);
Tudo o que se encontrar entre as tags de início e de fim fazem parte do conteúdo do elemento;
Em XHTML as tags devem ser escritas sempre com letras minúsculas, e as tags e não representam o mesmo elementp.

Você se lembra de nosso primei ro exemplo mostrado?!

<html> 
<head> 
<title>Título da Página</title> 
</head> 
<body> 
Esta é minha primeira página. <b>Este texto está em negrito</b>
</body> 
</html>

Esta parte abaixo é um elemento HTML:

<b>Este texto está em negrito</b>

Repare alguns aspectos do código acima:

Este elemento inicia com a tag: ;
O conteúdo do elemento é este: Este texto está em negrito;
O elemento termina com a tag final: .

O propósito da tag é colocar o conteúdo do elemento HTML em negrito (bold).

Um exemplo mais complexo

Este exemplo abaixo também é um elemento do HTML (mais complexo):

<body> 
Esta é minha primeira página. <b>Este texto está em negrito</b>
</body>

Este elemento HTML inicia com tag <body> e termina com a tag </body>.

O propósito da tag <body> é definir o conteúdo principal, o corpo do documento.

2. Atributos das tags

Tag é um código usado para marcar o início e, onde for requerido, o fim de um elemento HTML. Há, como exposto acima, tags de abertura e de fechamento. Uma tag de abertura é representada por sinal de menor (<), um nome de elemento HTML, e um sinal de maior (>) (exemplo: ) e deve ser colocada imediatamente antes do início do conteúdo do elemento. Uma tag de fechamento se diferencia de uma tag de abertura apenas por uma barra (/) antes do nome do elemento (exemplo: ) e deve ser colocada imediatamente após o fim do conteúdo do elemento.

Os Atributos servem para definir uma propriedade de um elemento HTML. Os atributos HTML devem ser colocados sempre na tag de abertura, logo após o nome do elemento, precedido de um espaço e é composto de um nome de atributo, um sinal de igual (=) e um valor de atributo, cercado por aspas duplas (") ou simples (‘).

A tag <body> define o corpo (body) de uma página HTML. No exemplo seguinte adicionei o atributo bgcolor (que significa "background color", ou cor de fundo) para indicarmos que queremos que a página fique com uma cor vermelha em seu plano de fundo.

<html> 
<body bgcolor="red"> 
Esta é a minha primeira página da web. 
<b>Este texto está em negrito</b> 
</body> 
</html>

Vamos considerar agora a tag <table>, que define um elemento de uma tabela. Ao juntarmos o atributo border (que significa borda) com o valor apresentado a seguir, estamos dizendo ao navegador para não colocar as bordas da tabela (<table border="0"> indica uma espessura nula para a linha de contorno da tabela):

<html>
<body> 
<table border="0"> 
<tr> 
<td> 
Esta é a minha primeira tabela. 
</td> 
</tr> 
</table> 
</body> 
</html>

Já no exemplo abaixo estamos dizendo ao navegador para desenhar uma linha de contorno com espessura 2 (border="2"):

<html> 
<body> 
<table border="2"> 
<tr> 
<td> 
Esta é a minha segunda tabela. 
</td> 
</tr> 
</table> 
</body> 
</html>

Os atributos sempre entram em pares nome/valor (name/value), assim: name="value".

Nota 1: Os atributos só podem aparecer nas tags de início. É proibido colocar atributos nas tags de fechamento.

Nota 2: Para garantir a compatibilidade com a linguagem XHTML, utilize letras minúsculas para escrever o nome dos atributos, e sempre coloque os valores entre aspas.

2.1. Atributos podem ser aplicados à maioria das tags

Você normalmente usará atributos com mais freqüência em algumas tags, tais como a tag body e raramente usará em outras, como por exemplo, a tag br que é um comando para pular de linha e não precisa de nenhuma informação adicional.

Assim como existem muitas tags, também existem muitos atributos. Alguns atributos são empregados em tags específicas enquanto outros servem para várias tags. E vice-versa: algumas tags podem conter somente um tipo de atributo, enquanto outras podem conter vários tipos.

Isto pode parecer um pouco confuso, mas à medida que você for praticando vai constatar que tudo é fácil e lógico, bem como vai verificar as inúmeras possibilidades que os atributos oferecem.

3. Devemos usar aspas ou plicas/apóstrofos (escrevemos "texto" ou 'texto')?

Acabamos de ver que os valores dos atributos devem ser sempre colocados entre aspas. Normalmente utilizamos as aspas normais ("), mas os apóstrofos (') também são permitidos.

Em alguns casos, o valor do atributo contém o próprio caractere aspas. Numa situação dessas, devemos usar apóstrofos (que aqui funcionam como aspas simples) para colocar em torno do valor do atributo, assim:

alt='Ele disse: "Não!"'

4. Notas rápidas

As Tags HTML são utilizadas para marcar elementos HTML. Elas estão cercadas pelos dois caracteres < (menor que) e > (maior que);
As tags normalmente aparecem em pares, como e ;
A primeira tag em um par é sempre a tag de início, a segunda tag do par é a tag de fim;
O texto entre o começo e o fim da tag é o conteúdo do elemento;
HTML não é sensitive, ou seja, é a mesma coisa que ;
Se por acaso você escreveu os códigos HTML errado - por exemplo >b> invés de - não se desespere, pois o máximo que pode acontecer é o seu navegador interpretar sua página de forma diferente do esperado e desenhá-la de um jeito maluco.

Enviado por xKuRt em 19/01/2009 às 11:35