Anda di halaman 1dari 5

<!DOCTYPE html> <!

-- Informa a
versão do doc. como html5 -->
<html> <!-- Tag de
abertura html -->
<head> <!-- Metadatas
do doc. html -->
<title>Titulo</title> <!-- Titulo do
html, mostrado na aba/navegador -->
<meta charset="utf-8"> <!--
Codificação de caracteres utf-8 - SEO-->
<meta name="author" content="Chris Mills"> <!-- Metadata
custimizado com informações - SEO-->
<meta name="description" content="A Área de Aprendizagem do
MDN tem como objetivo proporcionar novatos completos à Web
com tudo o que eles precisam saber para começar a desenvolver
sites e aplicativos."> <!-- Metadata
custimizado com informações - SEO-->
<meta property="og:image" content="https://site.net/og.png"> <!-- Open
Graph Protocol - várias propertys -->
<meta property="og:description" content="description here"> <!-- og =
metadados para redes sociais -->
<meta property="og:title" content="Mozilla Developer Network"> <!--
Apresentados no compart. em redes sociais -->
<link rel="shortcut icon" href="fav.ico" type="image/x-icon"> <!-- Favicon
mostrado ao lado do titulo do html -->
<link rel="stylesheet" href="my-css-file.css"> <!-- Aplica
CSS ao html -->
<script src="my-js-file.js"></script> <!-- Aplica
javascript ao html -->
<html lang="pt-BR"> <!-- Define
idioma do html - SEO-->
<base href="http://www.exemplo.com/news/removido.html"> <!-- Url base
para links relativos e forms -->
<base href="link" target="_blank"> <!-- Link
usando o baseurl abrem em nova aba -->
</head>
<body> <!-- Corpo
html -->
<h1>Texto</h1> <!-- Titulo -
SEO -->
...
<h6>Texto</h6> <!-- Ultimo
nivel hierarquico de titulos - SEO -->

<p>Texto</p> <!-- Parágrafo


-->

<ol> <!-- Lista


ordenada-->
<li>Item lista</li> <!-- Item da
lista -->
<li>Item lista</li> <!-- Item da
lista -->
</ol>

<ul> <!-- Lista


desordenada -->
<li>Item lista</li> <!-- Item da
lista -->
<li>Item lista</li> <!-- Item da
lista -->
</ul>

<a> <!-- links


-->
<a href="http://endereco_link.com">Texto link</a> <!-- Link
para Url -->
<a href="sobre.html">Texto link</a> <!-- Link
para relative path -->
<a href="#top">Texto link</a> <!-- Link
para tag com id = top -->
<a href="sobre.html#top">Texto link</a> <!-- Link
relative path = sobre.html, e id =top -->
<a href="mailto:endereco@dominio.com">Enviar email</a> <!-- Abre
MTA para envio de email-->
<a href="arquivo.pdf" download>Texto link</a> <!-- Força
download do link-->
<a href="link" target="_blank">Texto link</a> <!-- Abre
link em uma nova aba -->
<a href="link" hreflang="es">Texto link</a> <!--
Especifíca a linguagem do link -->
<a href="link" title="Texto tooltip">Texto link</a> <!--
Apresenta um tooltip do link - SEO -->
</a>

<caption>Texto aqui</caption> <!-- Descrição


da tabela -->
<table> <!-- Cria
estrutura de tabela -->
<colgroup> <!-- Grupo de
colunas -->
<col> <!-- Equivale
a primeira coluna -->
<col span="3"> <!-- Conta 3
colunas a partir da anterior -->
</colgroup>
<thead> <!-- Informa
cabeçalho da tabela -- >
<tr> <!-- Cria
linha na tabela-->
<th>Texto</th> <!-- Cria
coluna(cabeçalho) na tabela -->
<td>Texto</td> <!-- Cria
coluna na tabela -->
</tr>
</thead>
<tbody> <!-- Informa
corpo da tabela -- >
<tr>
<th colspan="3">Texto</th> <!-- Texto
ocupará 3 colunas na linha-->
<td rowspan="2">Texto</td> <!-- Texto
ocupará 2 linhas na coluna -->
</tr>
</tbody>
<tfoot> <!-- Informa
rodapé da tabela -- >
<tr>
<th>Texto</th>
<td>Texto</td>
</tr>
</tfoot>
</table>

<dl> <!-- Lista de


definição-->
<dt>Texto</dt> <!-- Titulo
definição-->
<dd>Texto</dd> <!--
Definição-->
<dt>Texto</dt>
<dd>Texto</dd>
</dl>

<figure>
<img src="imagem" alt="descrição"/> <!-- Add.
imagem ao doc. html -->
<figcaption>Texto</figcaption>
</figure>

<!-- TAGS de formulário-->


<div id="formulario">
<form action="destino_infos.html" method="POST"> <!-- Envia
infos para "action" com metodo POST -->
<label for="usuario">Rótulo</label> <!-- Rótulo
para input com name=usuario -->
<input type="text" name="usuario"> <!-- Input
para texto curto -->
<input type="text" name="usuario" required> <!-- Define
campo como requirido -->
<input type="text" name="BO" minlength="20" maxlength="100"><!-- Define
tamanho max e min do input -->
<input type="text" name="BO" pattern="[a-zA-Z0-9]+"> <!-- Define
padrão(regex) do input -->
<input type="password" id="password_user"> <!-- Input
para password -->
<input type="number" value="5" step="2"> <!-- Input para número,
valor padrão 5, altera de 2 em 2 -->
<input type="range" min="0" max="5" step="0.5"> <!-- Input para
range, renderiza um slider no html-->

<label for="id1">Checkbox1</label>
<input type="checkbox" id="id1" name="group" value="item1"> <!-- Input
tipo checkbox -->
<label for="id2">Checkbox2</label>
<input type="checkbox" id="id2" name="group" value="item2"> <!-- Input
tipo checkbox, agrupa "group" -->

<label for="rd1">Radio1</label>
<input type="radio" id="rd1" name="rgroup" value="yes"> <!-- Input
tipo radio-->
<label for="rd2">Radio2</label>
<input type="radio" id="rd2" name="rgroup" value="no">

<label for="lunch">What's for lunch?</label>


<select id="lanche" name="lanche"> <!-- Input
tipo dropdown -->
<option value="pizza">Pizza</option> <!-- Opções do
dropdown -->
<option value="salada">Salada</option>
<option value="tacos">Tacos</option>
</select>

<input list="temperos" id="tempero"> <!-- Input


tipo datalist-->
<datalist id="temperos">
<option value="ketchup">Ketchup</option> <!-- Opções do
datalist-->
<option value="mostarda">Mostarda</option>
<option value="oregano">Oregano</option>
</datalist>

<label for="blog">TextArea </label>


<textarea id="blog" name="blog" rows="5" cols="30"> <!-- Input
tipo Textarea -->
</textarea>

<input type="submit" name="texto_botao"> <!-- Input


tipo botão -->

</form>
</div>

<!-- TAGS de formatação -->


<div id="formatacao">
Texto <small>diminuido</small> <!-- Diminui
parte do texto -->
Texto com parte <em>enfatizada</em> <!--
Enfatiza(itálico) parte do texto <em> -->
Texto com parte <strong>destacada</strong> <!--
Destaca(negrito) parte do texto <strong> -->
<abbr title="Significado da abreviação">Abreviação</abbr> <!--
Abreviação de um termo -->
40<sup>o</sup> graus <!-- Chars.
elevados, graus(°), cubo(³), etc -->
H<sub>2</sub>O <!-- Chars.
abaixo do nível, fórmulas(H²0), etc-->
<code>Texto</code> <!--
Formatação de código -->
<pre>Texto</pre> <!--
Formatação como escrito no html -->
<var>Texto</var> <!--
Formatação para variáveis -->
<kbd>Texto</kbd> <!--
Formatação para atalhos de teclado -->
<samp>Texto</samp> <!--
Formatação para console(PC) -->
<br> <!-- Quebra de
linha -->
<hr> <!-- Linha
horizontal -->
<details open> <!-- Cont.
minimizado, clicavel para max. -->
<summary>Texto</summary> <!-- Texto
apresentado para clicar -->
<p>Conteudo</p>
</details>
<fieldset disabled name="nome" form="associa_ao_form"> <!-- Agrupa
forms,(form) associa a um form -->
<legend>Texto</legend> <!-- Caption
do fieldset-->
<input type="" name="">
</fieldset>
</div>

<!-- TAGS de Organização de Conteúdo -->


<div id="conteudo">
<address>Texto</address> <!-- Contem
informações de contato/Rede Social -->
<article>Texto</article> <!-- Contem
post, artigo, textos diversos-->
<aside>Texto</aside> <!-- Contem
inf. apresentadas na barra laretal -->
<footer>Texto</footer> <!-- Contem
inf. rodapé -->
<header>Texto</header> <!-- Contem
cabeçalho(introdução) do doc. html-->
<hgroup><h1>Texto</h1><h2>Texto</h2></hgroup> <!-- Contem
tags de título -->
<main>Texto</main> <!-- Contem
inf. principais do doc html -->
<nav>Texto</nav> <!-- Contem
inf. de navegação, menus, indices-->
<section>Texto</section> <!-- Contem
inf. diversas -->
<blockquote>Texto</blockquote> <!-- Citação
longa -->
<cite>Texto</cite> <!-- Citação
curta, + utilizada no blockquote-->
<div>Texto</div> <!-- Agrupador
genérico -->
<figure><img src="imagem" /></figure> <!-- Contem
elementos de imagem <img> -->
<figcaption>Texto</figcaption> <!-- Caption
para imagem em <figure> -->
</div>
</body>
</html>