Tags html – Lista de html tags mais usadas

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 e a terceira coluna o código. A quarta coluna mostra como elas são exibidas pelo navegador ( internet explorer, firefox etc).

Lista de 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 linhaConteúdo da página<br>Conteúdo da páginaConteúdo da página
Conteúdo da página
<center>center<center>centraliza o conteúdo</center>

centraliza o conteúdo

<em>ênfaseEste é um <em>Examplo</em> da tag ênfaseEste é 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 fieldExamplo 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 fieldExample 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 fieldExamplo 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 ítemsExamplo 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 listNumerado

<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 1Coluna 2
fileira 1fileira 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 1Coluna 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 1Column 2
<u>underline<u>Examplo</u>Examplo
<ul>unordered listExamplo 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

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *