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

Lista tags html


Tag

bgcolor="#3f7fbb">

Nome

bgcolor="#3f7fbb">

Exemplo de código

bgcolor="#3f7fbb">

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 src="graphics/Earth.gif" />
<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=” onmouseout="nd(); return true;">#cccccc“>Coluna 1</td>
<td
bgcolor=” onmouseout="nd(); return true;">#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



Tutoriais relacionados

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Share