Tags HTML

publicado 2010artigo por Marcus

Tabela de tags html que você precisa conhecer. Somente as html tags mais usadas e que fazem a diferença na criação de um site.

Para usar esta tabela de tags em html, basta copiar o exemplo de código e colar na sua webpage. A primeira coluna mostra como a tag deve ser escrita, a segunda diz o nome da tag, a terceira coluna o código. A quarta coluna mostra como as tags html são exibidas pelo navegador ( internet explorer, firefox etc).

tags html

Lista tags html


Tag

Nome

Exemplo de código

Como é visto no browser
<!-- comentário <!--somente no código fonte da página html--> Não aparece nada
<a - anchor <a href="http://www.criarsite.net.br">
criar site</a>		 criar site
<b> bold <b>Example</b> Examplo
<body> corpo do documento HTML <body>todo o conteúdo do site fica entre elas</body> todo o conteúdo do site fica entre elas
<br> quebra de linha Conteúdo da página<br>Conteúdo da página Conteúdo da página
Conteúdo da página
<center> center <center>centraliza o conteúdo</center>

centraliza o conteúdo
<em> ênfase Este é um <em>Examplo</em> da tag ênfase Este é um Examplo da tag ênfase
<font> font <font face="Times New Roman">Examplo</font> Examplo
<font> font <font face="Times New Roman" size="3" color="#ff0000">Examplo</font> Exemplo
<form> form <form action="mailto:voce@seudominio.com">
Name: <input name="Name" value="" size="10"><br>
Email: <input name="Email" value="" size="10"><br>
<center><input type="submit"></center>
</form>
Nome:
Email:
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>		 heading 1
heading 2
heading 3
heading 4
heading 5
heading 6		 <h1>Heading 1 Examplo</h1>
<h2>Heading 2 Examplo</h2>
<h3>Heading 3 Examplo</h3>
<h4>Heading 4 Examplo</h4>
<h5>Heading 5 Examplo</h5>
<h6>Heading 6 Examplo</h6>

<head> Cabeçalho do documento HTML <head>elementos que descrevem o documento</head> Não aparece nada
<hr> Linha horizontal <hr /> conteúdo
conteúdo
<html> hypertext markup language <html>
<head>
<meta>
<title>título da página</title>
</head>
<body>corpo do documento html
</body>
</html>		 corpo do documento html
<i> itálico <i>Examplo</i> Examplo
<img> imagem <img src="terra.gif" width="41" height="41" border="0" alt="texto descrevendo a imagem" /> texto descrevendo a imagem
<input> input field Examplo 1:

<form method=post action="/cgi-bin/example.cgi">
<input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
Examplo 1:

<input> input field Example 2:

<form method=post action="/cgi-bin/example.cgi">
Inserir comentários:<br>
<textarea wrap="virtual" name="Comments" rows=3 cols=20 maxlength=100></textarea><br>
<input type="Submit" value="Submit">
<input type="Reset" value="Clear">
</form>
Example 2:


<input> input field Examplo 3:

<form method=post action="/cgi-bin/example.cgi">
Selecione uma opção:<br>
<input type="radio" name="option"> Option 1
<input type="radio" name="option" checked> Option 2
<input type="radio" name="option"> Option 3
<br>
<br>
Selecione uma opção:<br>
<input type="checkbox" name="selection"> Selection 1
<input type="checkbox" name="selection" checked> Selection 2
<input type="checkbox" name="selection"> Selection 3
<input type="Submit" value="Submit">
</form>
Examplo 3:

Selecione uma opção:
Opção 1
Opção 2
Opção 3

Selecione uma opção:
Seleção 1
Seleção 2
Seleção 3
<li> lista ítems Examplo 1:

<menu>
<li type="disc">Lista de itens 1</li>
<li type="circle">Lista de itens 2</li>
<li type="square">Lista de itens 3</li>
</MENU>

Examplo 2:

<ol type="i">
<li>Lista de itens 1</li>
<li>Lista de itens 2</li>
<li>Lista de itens 3</li>
<li>Lista de itens 4</li>
</ol>		 Examplo 1:
  • Lista de itens 1
  • Lista de itens 2
  • Lista de itens 3


Examplo 2:

  1. Lista de itens 1
  2. Lista de itens 2
  3. Lista de itens 3
  4. Lista de itens 4
<link> link <head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<meta> meta <meta name="Description" content="descrição do seu site">
<meta name="keywords" content="palavras chave">		 Não aparece nada
<ol> ordered list Numerado

<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>

Algarismos romanos

<ol type="I">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>

 Numerado
  1. item 1
  2. item 2
  3. item 3
  4. item 4

Algarismos romanos

  1. item 1
  2. item 2
  3. item 3
  4. item 4
<option> listbox option <form method=post action="/cgi-bin/example.cgi">
<center>
Selecione 1 opção:
<select>
<option>option 1</option>
<option selected>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>
Selecione 1 optição:

<p> parágrafo <p>Examplo</p>

Examplo
<strike> riscar texto <strike>Examplo</strike> Examplo
<strong> forte ênfase <strong>Examplo</strong> Examplo
<table> tabela <table cellpadding="2" cellspacing="2" width="100%">
<tr>
<td bgcolor="#cccccc">Coluna 1</td>
<td bgcolor="#cccccc">Coluna 2</td>
</tr>
<tr>
<td>fileira 1</td>
<td>fileira 2</td>
</tr>
</table>

Coluna 1 Coluna 2
fileira 1 fileira 2
<td> table data <table border="2" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
</tr>
</table>
Coluna 1 Coluna 2

<title> título do documento <title>Título da página em html</title> Visível na barra de título do browser
<tr> table row <table border="2" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
</tr>
</table>

Column 1 Column 2

<u> underline <u>Examplo</u> Examplo
<ul> unordered list Examplo 1:<br>
<br>
<ul>
<li>item 1</li>
<li> item 2</li>
</ul>
<br>
Examplo 2:<br>
<ul type="disc">
<li>item 1</li>
<li>item 2</li>
<ul type="circle">
<li> item 3</li>
<li> item 4</li>
</ul>
</ul>		 Examplo 1:

  • item 1
  • item 2


Examplo 2:

  • item 1
  • item 2
    • item 3
    • item 4
Categorias
Sites parceiros
Melhores da internet
criar site flash wix
Informações