Referência rápida de HTML
Comentários
<!-- Comentários -->
Tags Básicas
<html></html> <!-- Abrir e fechar HTML -->
<head></head> <!-- Cabeçalho -->
<title></title> <!-- Título -->
<body></body> <!-- Corpo da página -->
<h1></h1> <!-- Heading 1 -->
<h2></h2> <!-- Heading 2 -->
<h3></h3> <!-- Heading 3 -->
<h4></h4> <!-- Heading 4 -->
<h5></h5> <!-- Heading 5 -->
<h6></h6> <!-- Heading 6 -->
<p></p> <!-- Parágrafo -->
<br> <!-- Quebra de linha -->
<hr> <!-- Linha horizontal -->
<table></table> <!-- Tabela -->
<tr></tr> <!-- Linha de uma tabela -->
<td></td> <!-- Coluna de uma tabela -->
<a href="pagina.html" > <!-- Hiperligação -->
<form></form> <!-- Formulário -->
<input> <!-- Input -->
<textarea></textarea> <!-- Área de texto -->
<label></label> <!-- " Legenda " -->
<fieldset></fieldset> <!-- " Legenda " -->
<legend></legend> <!-- Legenda -->
<select></select> <!-- Conjunto de opções -->
<optgroup></optgroup> <!-- Grupos de opções -->
<option></option> <!-- Opção -->
Atributos
<p align="center"> <!-- Alinhar parágrafo ao centro -->
<p align="justify"> <!-- Alinhar parágrafo justificado -->
<p align="left"> <!-- Alinhar parágrafo à esquerda -->
<p align="right"> <!-- Alinhar parágrafo à direita -->
<table style=""> <!-- Usar para colocar Tag's CSS -->
<table class=""> <!-- Classe de um CSS -->
<table background="url_da_imagem.extensão"> <!-- Definir uma imagem de fundo -->
<table bgcolor=""> <!-- Definir uma cor de fundo -->
<table border=""> <!-- Definir a borda -->
<table bordercolor=""> <!-- Definir a cor da borda -->
<table cellpadding=""> <!-- Definir o espaço entre o texto e as bordas das <td>'s -->
<table cellspacing=""> <!-- Definir o espaçamento entre células -->
<table width=""> <!-- Definir a largura -->
<table height=""> <!-- Definir a altura -->
<td colspan=""> <!-- Unir colunas -->
<td rowspan=""> <!-- Unir linhas -->
<form enctype="application/x-www-form-urlencoded"> <!-- Método padrão -->
<form enctype="multipart/form-data"> <!-- Usado para upload -->
<form enctype="text/plain"> <!-- -->
<form method="get"> <!-- Envia os valores dos inputs pelo url -->
<form method="post"> <!-- Envia os valores ao servidor em um bloco de dados -->
<form name=""> <!-- Nome do formulário -->
<input type="button"> <!-- Botão -->
<input type="checkbox"> <!-- Escolher várias opções -->
<input type="file"> <!-- Procurar um arquivo (usado normalmente para uploads) -->
<input type="hidden"> <!-- Input escondido -->
<input type="password"> <!-- Mostrar símbolos ao escrever, ao invés das letras/números/outros -->
<input type="radio"> <!-- Várias opções das quais só podemos escolher uma -->
<input type="reset"> <!-- Limpar o formulário -->
<input type="submit"> <!-- Enviar o formulário -->
<input type="text"> <!-- Input de texto -->
<label for=""> <!-- " Legenda " para 'nome_do_input' -->
<option value=""> <!-- Valor da opção -->
<img src="http://example.com/img.jpg" alt="descrição alternativa da imagem"> <!-- Imagem -->
Formatação de texto
<b></b> <!-- Negrito -->
<i></i> <!-- Itálico -->
<small></small> <!-- Pequeno -->
<big></big> <!-- Grande -->
Atributos de hiperligações
<!-- Abrir links em... -->
<a href="pagina.html" target="_blank"> <!-- novo separador/janela -->
<a href="pagina.html" target="_parent"> <!-- frame-mãe -->
<a href="pagina.html" target="_self"> <!-- frame onde originou o click -->
<a href="pagina.html" target="_top"> <!-- frame "de topo" (ou seja, a janela) -->
<a href="pagina.html" target="nome"> <!-- frame de nome "nome" -->
<a name="nome"> <!-- Nome da âncora (pode ser acedida com um link que aponte para #nome) -->
<a title=""> <!-- Com o rato em cima da Hiperligação, mostra o que estiver entre aspas -->
<a accesskey=""> <!-- Atalho para a hiperligação -->
<a href="mailto:mail@mail.com?subject=Assunto%20do%20email"> <!-- Abrir Cliente de email com o campo "assunto" preenchido -->
Listas
<ol> <!-- Define uma lista ordenada -->
<ul> <!-- Define uma lista não ordenada -->
<li> <!-- Define um item da lista -->
<dl> <!-- Define uma lista de termos -->
<dt> <!-- Define um termo -->
<dd> <!-- Define uma descrição de um termo -->
Atributos e características de elementos de formulários
<input accesskey="" /> <!-- Atalho para input -->
<input class=""> <!-- Classe de um CSS -->
<input maxlength=""> <!-- Máximo número de caracteres -->
<input height=""> <!-- Altura -->
<input id=""> <!-- Id -->
<input name=""> <!-- Nome -->
<input readonly="readonly"> <!-- Apenas ler, isto é, o utilizador não pode mudar o seu valor -->
<input size=""> <!-- Tamanho -->
<input value=""> <!-- Valor por defeito -->
<input type="text" disabled="disabled"> <!-- Desabilitado. Semelhante ao " readonly ", mas não dá para ler -->
<input type="radio" checked="checked"> <!-- Valor selecionado pro defeito -->
<input type="checkbox" checked="checked"> <!-- Valor selecionado pro defeito -->
<textarea cols=""> <!-- Largura -->
<textarea rows=""> <!-- Altura -->
Atributos de imagens
<img alt=""> <!-- Descrição -->
<img height=""> <!-- Altura -->
<img width=""> <!-- Largura -->
<img title=""> <!-- Título -->
Exemplos
Documento Básico HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Título da página</title>
</head>
<body>
Texto
</body>
</html>
Documento Básico XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Título da página</title>
</head>
<body>
Texto
</body>
</html>
Documento Básico XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Título da página</title>
</head>
<body>
Texto
</body>
</html>
Documento Básico XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Título da página</title>
</head>
<body>
Texto
</body>
</html>
Documento Básico HTML 5
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
Texto
</body>
</html>
Elementos Heading
<h1>A a a - Grande</h1>
<h2>A a a</h2>
<h3>A a a</h3>
<h4>A a a</h4>
<h5>A a a</h5>
<h6>A a a - Pequeno</h6>
Elemento de Texto
<p>Parágrafo</p>
<br>Quebra de linha
<hr>Linha horizontal
Estilos Lógicos
<em>Ênfase</em>
<strong>Ênfase forte</strong>
Ideia: Mais detalhes sobre a diferença entre b
, strong
, i
e em
aqui.
Estilos Físicos
<b>Negrito</b>
<i>Itálico</i>
Hiperligações
<a href="http://www.exemplo.com/">Hiperligação</a>
<a href="http://www.exemplo.com/"><img src="URL_DA_IMAGEM" alt="Texto alternativo"></a>
<a href="mailto:mail@mail.com">Enviar e-mail</a>
Hiperligações na mesma página
<a name="nome">Clica</a>
<a href="#nome">Vieste para aqui por teres clicado em "Clica"</a>
Lista Não Ordenada
<ul>
<li>Uma coisa</li>
<li>Outra coisa</li>
</ul>
Lista Ordenada
<ol>
<li>Um</li>
<li>Dois</li>
</ol>
Lista de Definições
<dl>
<dt>Termo um</dt>
<dd>Definição</dd>
<dt>Termo dois</dt>
<dd>Definição</dd>
</dl>
Tabelas
<table border="1">
<tr>
<td colspan="2">Junção de duas colunas</td>
</tr>
<tr>
<td>Coluna um</td>
<td>Coluna dois</td>
</tr>
</table>
Formulários
<form action="pagina.ext" method="post/get">
<input type="text" name="Nome" value="Luis" size="30" maxlength="50">
<input type="password" name="Senha">
<input type="checkbox" checked="checked" name="Checkbox" value="check1">
<input type="checkbox" name="Checkbox" value="check2">
<input type="radio" checked="checked" name="Radio" value="rad1">
<input type="radio" checked="checked" name="Radio" value="rad2">
<select name="Select">
<optgroup label="Sumos">
<option>Coca-cola</option>
<option>Sumol</option>
</optgroup>
<optgroup label="Vinhos">
<option selected>Casal Garcia</option>
<option>Gazela</option>
</optgroup>
</select>
<textarea name="Comentario" rows="60" cols="20"></textarea>
<input type="reset">
<input type="submit" name="enviar" value="Enviar formulário">
</form>