ATENÇÃO: este tutorial foi publicado originalmente em 2002; algumas informações podem estar desatualizadas
Os tags apresentados aqui formam uma compilação das definições oficiais da linguagem mais as extensões introduzidas por empresas como Netscape e Microsoft. Observações em itálico indicam quais navegadores (e a partir de qual versão) aceitam determinado
tag, atributo ou opção. Quando nenhuma observação estiver presente, significa que aquele elemento é aceito por todos os navegadores.
A tabela mostra os tags com a descrição de suas funções, atributos e as respectivas opções. Os atributos e as opções devem ser colocados dentro do tag, como no exemplo abaixo.
<BR CLEAR=ALL> Onde BR é o tag, seguido do atributo CLEAR e sua opção, ALL. Pode-se colocar mais de um atributo dentro do mesmo tag.
<FONT SIZE=4 COLOR=BLUE> Tags básicos
<HTML> e <HTML>
Marca o início e o fim de um documento HTML.
Exemplo: <HTML>
<HEAD><TITLE>Título da página</TITLE></HEAD>
<BODY>
Conteúdo da página<P>
</BODY>
</HTML>
Aceito por: todos os navegadores
<HEAD> e </HEAD>
Marca o início e o fim do cabeçalho.
Exemplo: <HTML>
<HEAD><TITLE>Título da página</TITLE></HEAD>
<BODY>
Conteúdo da página<P>
</BODY>
</HTML>
Aceito por: todos os navegadores
<TITLE> e </TITLE>
Marca o início e o fim do título do documento.
Exemplo: <HTML>
<HEAD><TITLE>Título da página</TITLE></HEAD>
<BODY>
Conteúdo da página<P>
</BODY>
</HTML>
Aceito por: todos os navegadores
<BODY> e </BODY>
Marca o início e o fim do conteúdo do documento.
Exemplo: <HTML>
<HEAD><TITLE>Título da página</TITLE></HEAD>
<BODY>
Conteúdo da página<P>
</BODY>
</HTML>
Aceito por: todos os navegadores
Atributos
BGCOLOR=#nnnnnn: modifica a cor do fundo da página (o Apêndice C mostra os valores possíveis de n).
Exemplo: <BODY BGCOLOR=#FFFFFF> ou <BODY BGCOLOR=#WHITE>O fundo desta página é branco</body>
Aceito por: Netscape 1.1 e Internet Explorer BACKGROUND=imagem.gif: coloca uma imagem como fundo da página.
Exemplo: <BODY BACKGROUND=imagem.gif>Esta página tem uma imagem no fundo.</BODY>
Aceito por: Netscape, Internet Explorer e NCSA Mosaic 2.0
BGPROPERTIES=FIXED: Mantém fixa a imagem de fundo quando a página é rolada, criando um efeito de marca d'água.
Exemplo: <BODY BACKGROUND=imagem.gif BGPROPERTIES=FIXED>A imagem desta página não rola junto com o texto.</BODY> LEFTMARGIN=n: define a largura da margem esquerda da página (sendo que n é o valor em pixels da margem).
Exemplo: <BODY LEFTMARGIN=10>A margem esquerda desta página é de 10 pixels.</BODY>
Aceito por: Internet Explorer
TOPMARGIN=n: define a altura da margem superior (sendo que n é o valor em pixels da margem).
Exemplo: <BODY TOPMARGIN=10>A margem superior desta página é de 10 pixels.</BODY>
Aceito por: Internet Explorer
TEXT=#nnnnnn: modifica a cor do texto (o Apêndice C mostra os valores possíveis de n).
Exemplo: <BODY TEXT=#FF0000>O texto desta página está em vermelho.</BODY>
Aceito por: Netscape 1.1 e Internet Explorer
LINK=#nnnnnn: modifica a cor dos links não visitados.
Exemplo: <BODY LINK=#FF0000>Os links não visitados desta página aparecem em vermelho.</BODY>
Aceito por: Netscape 1.1 e Internet Explorer
ALINK=#nnnnnn: modifica a cor dos links já visitados.
Exemplo: <BODY ALINK=#FF0000>Os links ativos desta página aparecem em vermelho.</BODY>
Aceito por: Netscape 1.1 e Internet Explorer
VLINK=#nnnnnn: modifica a cor dos links já visitados.
Exemplo: <BODY VLINK=#FF0000>Os links visitados desta página aparecem em vermelho.</BODY>
Links <A> e </A>
Marca o início e o fim de um link.
Atributos
HREF=URL: indica para onde o link levará (sendo URL o endereço para onde o link está apontando).
Exemplo: <A HREF=http://www.xyz.com>Site da XYZ</A> (leva para uma página em outro computador, <HREF=texto.htm>Texto</A> (leva para uma outra página no mesmo computador), <A HREF=#capitulo1>Capítulo 1</A> (leva para uma outra parte do mesmo documento) ou <A HREF=texto.htm#capitulo1>Capítulo 1 do texto</A> (leva para uma parte determinada de outro documento)
Aceito por: todos os navegadores
NAME=nome: identifica o alvo de um link no meio de um documento (sendo que nome é o nome dado ao alvo de um link).
Exemplo: <A HREF=#capitulo1>Capítulo 1</A>...<A NAME=capitulo1>Capítulo 1</A>
Aceito por: todos os navegadores
TARGET=WINDOW: abre uma nova janela do navegador com o resultado de um link.
Exemplo: <A HREF=http://www.xyz.com target=window>Site da XYZ</A> (O página principal do site da XYZ é aberta em uma segunda janela do navegador).
Texto e alinhamento
<BASEFONT>
Modifica a formatação padrão do texto.
Atributos
SIZE=n: modifica o tamanho padrão do texto. Sendo que n pode valer de 1 a 7. O tamanho padrão do texto é 3.
Exemplo: <BASEFONT SIZE=5>Texto (coloca o texto de toda a página em um tamanho maior).
Aceito por: Netscape 1.1 e Internet Explorer
<FONT> e </FONT>
Modifica a formatação de determinada parte do texto.
Atributos
SIZE=n: modifica o tamanho de determinada parte do texto. Sendo que n é um valor de 1 a 7. O valor pode ser de -7 a +7 para aumentar o texto em relação ao tamanho definido no tag <BASEFONT SIZE=n>.
Exemplo: <A FONT SIZE=5>Texto</FONT> (define o texto no tamanho 5), <BASEFONT SIZE=5><FONT SIZE=+1>Texto</FONT> (define o texto no tamanho equivalente ao 6)
Aceito por: Netscape 1.1 e Internet Explorer
COLOR=#nnnnnn: modifica a cor de um trecho de texto.
Exemplo: <FONT COLOR=#nnnnnn>Texto</A> ou <FONT COLOR=white>Texto</A> (coloca o texto na cor branca)
Aceito por: Netscape 2.0 e Internet Explorer
FACE=fonte: modifica o tipo do texto. Sendo que fonte é o nome da fonte. A fonte definida precisa estar instalada no computador do usuário.
Exemplo: <FONT FACE=ARIAL>Texto</FONT> (coloca o texto na fonte Arial.
Aceito por: Internet Explorer
<B> e </B>
Coloca o texto em negrito.
Exemplo: <B>Texto</B>
Aceito por: todos os navegadores
<I> e </I>
Coloca o texto em itálico.
Exemplo: <I>Texto</I>
Aceito por: todos os navegadores
<TT> e </TT>
Coloca o texto em uma fonte monoespaçada (Courier, por exemplo).
Exemplo: <TT>Texto</TT>
Aceito por: todos os navegadores
<P> e </P>
Marca um parágrafo e acrescenta uma linha em branco depois de cada um. É utilizado aos pares (<P> e </P>) se for necessária a colocação de atributo.
Exemplo: <P>Parágrafo</P> ou Parágrafo<P>
Aceito por: todos os navegadores
Atributo
ALIGN=CENTER, LEFT ou RIGHT: alinha o parágrafo ao centro (ALIGN=CENTER), à esquerda (ALIGN=LEFT) ou à direita (ALIGN=RIGHT).
Exemplo: <P ALIGN=CENTER>Parágrafo</P>
Aceito por: Netscape 1.1, Internet Explorer e NCSA Mosaic 2.0.0
<CENTER> e </CENTER>
Alinha o trecho (texto, imagem ou tabela) ao centro.
Exemplo: <CENTER>Texto</CENTER> Aceito por: Netscape e Internet Explorer
<BR>
Insere uma quebra de linha.
Exemplo: Linha 1<BR>Linha2
Atributo
CLEAR=ALL: joga o texto para a próxima margem livre após a imagem.
Exemplo: <IMG SRC=imagem.gif>Texto<BR CLEAR=ALL>Texto
Aceito por: Netscape e Internet Explorer
<PRE> e </PRE>
Marca um trecho formatado com fonte monoespaçada. A formatação com espaços e entradas de parágrafos passa a ser respeitada.
Exemplo: <PRE>T e x t o</PRE>
Aceito por: Netscape, NCSA Mosaic e Internet Explorer (a versão Macintosh do Internet Explorer não respeita formatação com espaços e entradas de parágrafos.
<BLOCKQUOTE> e </BLOCKQUOTE>
Adiciona uma margem de cerca de um centímetro.
Exemplo: <BLOCKQUOTE>Texto</BLOCKQUOTE>
<Hn> e </Hn>
Marca um título. Sendo que n pode ser um valor de 1 a 6.
Exemplo: <H1>Título</H1>
Aceito por: todos os navegadores
Atributo
ALIGN=CENTER, RIGHT ou LEFT: modifica o alinhamento do título. ALIGN=CENTER alinha o título ao centro. ALIGN=RIGHT, alinha o título ao à direita. ALIGN=LEFT alinha o título à esquerda.
Exemplo: <H1 ALIGN=CENTER>Título centralizado</H1>
Aceito por: Netscape, Internet Explorer e NCSA Mosaic 2.0.0
Linhas <HR>
Inclui uma linha horizontal.
Exemplo: Texto<hr>Texto
Aceito por: todos os navegadores
Atributos
SIZE=n: define a altura da linha. Sendo que n pode ser um valor de 1 a 100.
Exemplo: <HR SIZE=10>
Aceito por: Netscape e Internet Explorer
WIDTH=n: define a largura da linha horizontal. Sendo que n pode ser um número qualquer ou um percentual da largura da página.
Exemplo: <HR WIDTH=200> ou <HR WIDTH=50%>
Aceito por: Netscape e Internet Explorer
NOSHADE:
desenha a linha horizontal sem a sombra para dar o efeito de três dimensões.
Exemplo: <HR NOSHADE>
Aceito por: Netscape e Internet Explorer
ALIGN=LEFT, RIGHT ou CENTER: modifica o alinhamento da linha horizontal.
Exemplo <HR ALIGN=CENTER>
Aceito por: Netscape e Internet Explorer
Listas <DL> e </DL>
Marcam o início e o fim de uma lista de definição. Devem ser usados com os tags <DT> e <DD>.
Exemplo:
<DL>
<DT>Título</DT>
<DD>Texto</DD>
<DT>Título</DT>
<DD>Texto</DD>
</DL>
Aceito por: todos os navegadores
<DT> e </DT>
Marcam os títulos de uma lista de definição. Devem ser usados junto com os tags <DL> e <DD>.
Exemplo:
<DL>
<DT>Título</DT>
<DD>Texto</DD>
<DT>Título</DT>
<DD>Texto</DD>
</DL>
Aceito por: todos os navegadores
<DD> e </DD>
Marcam o início e o fim do texto de uma lista de definição. Devem ser usados junto com os tags <DL> e <DT>.
Exemplo:
<DL>
<DT>Título</DT>
<DD>Texto</DD>
<DT>Título</DT>
<DD>Texto</DD>
</DL>
Aceito por: todos os navegadores
<UL> e </UL>
Marcam o início e o fim de uma lista não ordenada. Deve ser usado junto com o tag <LI>. Os itens da lista recebem marcas gráficas na primeira linha conhecidas como bullets.
Exemplo:
<UL>
<LI>Item 1
<LI>Item 2
</UL>
Aceito por: todos os navegadores
<OL> e </OL>
Marcam o início e o fim de uma lista ordenada. Os itens da lista são colocados em ordem e recebem na primeira linha um número ou letra. Devem ser usados junto com o tag <LI>.
Exemplo:
<OL>
<LI>Item 1
<LI>Iem 2
</OL>
Aceito por: todos os navegadores
Atributo
START=n: especifica o número a partir do qual os itens da lista começam a ser contados. Sendo que n pode ser um número ou uma letra. Também podem ser utilizados números romanos.
Exemplo:
<OL START=3>
<LI>Item 1
<LI>Item 2
</OL>
Aceito por: Internet Explorer e Netscape 1.1
<DIR> e </DIR>
Marcam o início e o fim de uma lista. Devem ser usados junto com o tag <LI>.
Exemplo:
<DIR>
<LI>Item 1
<LI>Item 2
</DIR>
Aceito por: todos os navegadores
<MENU> e </MENU>
Marcam o início e o fim de uma lista. Devem ser usados junto com o tag <LI>.
Exemplo:
<MENU>
<LI>Item 1
<LI>Item 2
</MENU>
Aceito por: todos os navegadores
<LI>
Marca um item de lista. Pode ser usado com os tags <DL>, <UL>, <OL>, <DIR> e <MENU>.
Exemplo:
<UL>
<LI>Item 1
<LI>Item 2
</UL>
Aceito por: todos os navegadores
Atributos
TYPE=n: modifica o tipo de marca que será colocada antes de cada item da lista. Quando utilizado em uma lista ordenada (<OL>), pode modificar o tipo de marca para um círculo ou um quadrado.
TYPE=CIRCLE coloca um círculo vazio (uma falha no Netscape 2.0 para Windows faz com que a mesma opção produza um quadrado vazio).
TYPE=DISC coloca um círculo cheio.
TYPE=SQUARE coloca um quadrado cheio. Quando utilizado em uma lista não ordenada, modifica o tipo de caractere que é utilizado para a contagem.
TYPE=A ou TYPE=a coloca marcas em ordem alfabética (A, B, C ou a, b, c).
TYPE=1 marca os itens em ordem numérica.
TYPE=I ou TYPE=i marca os itens com números romanos (I, II, III ou i, ii, iii).
Exemplo:
<UL>
<LI TYPE=square>Item 1
<LI>
</UL>
ou
<OL>
<LI TYPE=a>Item 1
<LI>Item 2
</OL>
Aceito por: Netscape 1.1 e Internet Explorer
Imagens <IMG>
Insere uma imagem.
Atributos
SRC=imagem.gif: indica o arquivo de imagem a ser carregado. Sendo que imagem.gif é o nome do arquivo de imagem a ser usado.
Exemplo: <IMG SRC=imagem.gif>
Aceito por: todos os navegadores
DYNSRC=video.gif: indica o arquivo de vídeo a ser carregado.
Exemplo: <IMG SRC=imagem.gif DYNSRC=video.gif> (o atributo SRC=imagem.gif deve ser colocado para que os navegadores que não aceitam o atributo DYNSRC possam mostrar uma imagem)
Aceito por: Internet Explorer
CONTROLS: inclui um conjunto de botões para controlar a execução do arquivo de vídeo. Deve ser utilizado junto com o atributo DYNSRC.
Exemplo: <IMG SRC=imagem.gif DYNSRC=video.gif CONTROLS>
Aceito por: Internet Explorer
LOOP=n ou INFINITE: define quantas vezes o arquivo de vídeo será executado. Sendo que n é o número de vezes que o arquivo será executado. LOOP=INFINITE executa o arquivo indefinidamente, até que o usuário mude de página. Deve ser utilizado junto com o atributo DYNSRC.
Exemplo: <IMG SRC=imagem.gif DYNSRC=video.gif LOOP=5>
Aceito por: Internet Explorer
START=FILEOPEN e/ou MOUSEOVER: define quando o arquivo de vídeo começará a ser executado. START=FILEOPEN executa o arquivo quando assim que for carregado. START=MOUSEOVER executa o arquivo quando o mouse for colocado sobre a imagem. START=FILEOPEN,MOUSEOVER executa o arquivo quando for carregado e nas demais vezes em que o mouse for colocado sobre a imagem. Deve ser usado com o atributo DYNSRC.
Exemplo: <IMG SRC=imagem.gif DYNSRC=video.gif LOOP=5 START=MOUSEOVER>
Aceito por: Internet Explorer
ALIGN=n:modifica o alinhamento da imagem em relação ao texto. Sendo que n é uma das opções a seguir. ALIGN=LEFT faz a imagem “flutuar” à esquerda, enquanto o texto circunda a imagem pela direita. ALIGN=RIGHT faz a imagem “flutuar” à direita, enquanto o texto circunda a imagem pela esquerda. ALIGN=TOP alinha o topo da imagem com o topo do elemento mais alto da linha, que pode ser uma outra imagem. ALIGN=MIDDLE alinha a base do texto com o centro da imagem. ALIGN=BOTTOM alinha a imagem com a base dos outros elementos da linha.
Exemplo: <IMG SRC=imagem.gif ALIGN=LEFT>Texto
Aceito por: Netscape 1.1, Internet Explorer e NCSA Mosaic
ALIGN=TEXTTOP: alinha o topo da imagem com o topo do texto, ALIGN=ABSMIDDLE alinha o centro do texto com o centro da imagem. ALIGN=BASELINE e ALIGN=ABSBOTTOM alinham a imagem com a base dos outros elementos da linha Netscape 1.1.
Exemplo: <IMG SRC=imagem.gif ALIGN=BASELINE>Texto
Aceito por: Netscape 1.1
VSPACE=n: insere espaço acima e abaixo da imagem. Sendo que n é o valor em pixels do espaço a ser adicionado.
Exemplo: <IMG SRC=imagem.gif VSPACE=10>
Aceito por: Netscape 1.1 e Internet Explorer
HSPACE=n: insere espaço à esquerda e à direita da imagem. Sendo que n é um valor em pixels do espaço a ser adicionado.
Exemplo: <IMG SRC=imagem.gif HSPACE=10>
Aceito por: Netscape 1.1 e Internet Explorer
ALT=n: indica o texto para ser colocado quando o navegador não mostra a imagem. Sendo que n é um título que identifique a imagem.
Exemplo: <IMG SRC=imagem.gif ALT=Imagem>
Aceito por: todos os navegadores
WIDTH=n: determina a largura da imagem e reserva o espaço no navegador. Sendo que e n é o valor em pixels da largura da imagem. Deve ser usado junto com o atributo HEIGHT=n.
Exemplo: <IMG SRC=imagem.gif WIDTH=344 HEIGHT=233>
Aceito por: Netscape 1.1, Internet Explorer e NCSA Mosaic
HEIGHT=n: determina a altura da imagem e reserva o espaço no navegador. Sendo que n é o valor em pixels da altura da imagem. Deve ser usado junto com o atributo WIDTH=n.
Exemplo: <IMG SRC=imagem.gif WIDTH=344 HEIGHT=233>
Aceito por: Netscape 1.1, Internet Explorer e NCSA Mosaic
BORDER=n: insere uma borda em torno da imagem. Sendo que n é um valor em pixels da espessura da borda.
Exemplo: <IMG SRC=imagem.gif BORDER=1>
Aceito por: Netscape 1.1 e Internet Explorer
ISMAP: indica que a imagem é um mapa clicável processado no servidor. Deve ser usado junto com uma referência a um arquivo que contenha as informações do mapa.
Exemplo: <A HREF=arquivo.map><IMG SRC=imagem.gif ISMAP></A>
Aceito por: todos os navegadores.
USEMAP=MAPA: indica que a imagem é um mapa clicável processado no cliente. Sendo que MAPA é o nome dado ao mapa processado no cliente. Deve ser usado junto com os tags <MAP> e <AREA>, que definem as regiões sensíveis da imagem dentro da página Web. Pode ser usado junto com o atributo ISMAP e a referência a um mapa processado no servidor.
Exemplo:
<MAP NAME=MAPA>
<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=CIRCULO.HTM>
<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=QUADRADO.HTM>
<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27 HREF=TRIANGUL.HTM>
</MAP>
<IMG SRC=mapa.gif USEMAP=#mapa>
ou
<MAP NAME=MAPA>
<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=CIRCULO.HTM>
<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=QUADRADO.HTM>
<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27 HREF=TRIANGUL.HTM>
</MAP>
<A HREF=/cgi-bin/imagemap/mapa.map>
<IMG SRC=mapa.gif USEMAP=#mapa ISMAP></A>
Aceito por: Netscape 2.0 e Internet Explorer
<MAP> e </MAP>
Indicam a marcação de um mapa processado no cliente. Deve ser usado junto com o tag <AREA> e o atributo de imagem USEMAP=#n.
Exemplo:
<MAP NAME=MAPA>
<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=CIRCULO.HTM>
<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=QUADRADO.HTM>
<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27 HREF=TRIANGUL.HTM>
</MAP>
<IMG SRC=mapa.gif USEMAP=#mapa>
Aceito por: Netscape 2.0 e Internet Explorer
Atributos
NAME=MAPA: sendo que MAPA é o nome do mapa processado no cliente.
Exemplo:
<MAP NAME=MAPA>
<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=CIRCULO.HTM>
<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=QUADRADO.HTM>
<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27 HREF=TRIANGUL.HTM>
</MAP>
<IMG SRC=mapa.gif USEMAP=#mapa>
Aceito por: Netscape 2.0 e Internet Explorer
<AREA>
Define uma área sensível do mapa clicável processado no cliente. Deve ser usado junto com o tag <MAP> e o atributo de imagem USEMAP=#mapa.
Exemplo:
<MAP NAME=MAPA>
<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=CIRCULO.HTM>
<AREA SHAPE=RECT COORDS=270,123,179,32 HREF=QUADRADO.HTM>
<AREA SHAPE=POLY COORDS=375,27,428,124,321,124,375,27 HREF=TRIANGUL.HTM>
</MAP>
<IMG SRC=mapa.gif USEMAP=#mapa>
Aceito por: Netscape 2.0 e Internet Explorer
Atributos
SHAPE=formato: define o formato da região sensível do mapa processado no cliente. Sendo que formato é uma das opções a seguir. SHAPE=RECT indica que a região é um retângulo. SHAPE=CIRCLE indica que a região é um círculo. SHAPE=POLY indica que a região é um polígono.
Exemplo:
<MAP NAME=MAPA>
<AREA SHAPE=CIRC COORDS=74,76,96,121 HREF=CIRCULO.HTM>
IMPRIMIR
ENVIAR POR EMAIL
COMUNICAR ERRO