Você está na página 1de 13

<TAG> Definição Aplicação

<a
href="https://www.mozilla.com
a Hiperlink ">
Mozilla
</a>
<p>Obama é presidente dos
abbr Abreviação <abbr title="Estados Unidos
da América">EUA</abbr></p>
<address>
Voce pode contatar o
autor em <a
href="http://www.somedomain.c
om/contact">www.somedomain.co
m</a>. <br>
Informações de
address Se encontrar qualquer
Contato
bug, por favor <a
href="mailto:webmaster@somedo
main.com">contate o
administrador do site</a>.
<br>
</address>
<mapa name="primary">
<area shape="circle"
coords="200,250,25"
Hiperlink de mapa de
area href="another.htm" />
imagem
<area shape="default"
nohref />
</map>
<article>
<h4>Um artigo realmente
impressionante</h4>
article Artigo
<p>Lotes de texto incrível.
</p>
</article> x
<aside>
<p>Algum conteudo
aside Conteúdo lateral relacionado a um
&lt;article&gt;</p>
</aside> x
<audio controls>
<source src="musica.ogg"
type="audio/ogg">
<source src="musica.mp3"
audio Arquivo de áudio
type="audio/mpeg">
Seu navegador não possui
suporte para áudio.
</audio> x
<p>
Este artigo descreve vários
<b>níveis de texto</b>. Ele
explica a utilização do
elemento em um documento
b Texto em negrito <b>HTML</b>.
</p>
Palavras-chave são exibidas
com o estilo padrão do
elemento <b>, provavelmente
em negrito.
<base
href="http://www.example.com/
">
base URL base
<base target="_blank"
href="http://www.example.com/
">
<blockquote
cite="http://developer.mozill
a.org">
<p>Esta é uma citação
blockquote Bloco para citações
tirada da
Mozilla Developer Center.
</p>
</blockquote>
body Corpo do documento
Mozilla Foundation<br>
1981 Landings Drive<br>
Building K<br>
br Quebra de linha
Mountain View, CA 94043-
0801<br>
USA
<button name="button">Click
button Botão
me</button>
<canvas id="canvas"
width="300" height="300">
Espaço reservado para Desculpe-me, seu navegador
canvas
gráficos dinâmicos não suporta o elemento
&lt;canvas&gt;.
</canvas>
caption {
caption-side: top;
align: right;
}
caption Legenda table {
border-collapse: collapse;
border-spacing: 0px;
}
table, th, td {
border: 1px solid black;
}
Mais informações podem ser
Usado para citações
cite encontradas em <cite>[ISO-
de trabalhos
0000] </cite>.
<p>A função <code>selectAll()
</code> destaca todo o texto
no
Reservado para
code campo de entrada então o
códigos
usuário pode, por exemplo,
copiar ou deletar o texto.
</p>
Please see the <table> page for
col Coluna da tabela
examples on <col>.
Grupo de coluna da Por favor, veja a página <table> para
colgroup
tabela exemplos em <colgroup>
command Comando x
<input list="browsers" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet
Opções predefinidas Explorer">
datalist
para outros controles <option value="Opera">
<option value="Safari">
</datalist>

x
Para exemplos, veja os exemplos de
dd Descrição ou valor
<dl>.
<p><del>This text has been
del Texto excluído
deleted</del></p>
<details>
Controle para <summary>Alguns
informações detalhes</summary>
details
adicionais sob <p>Mais informações sobre
demanda os detalhes.</p>
</details> x
<!-- Define "A Internet" -->
<p><dfn id="def-internet">A
Internet</dfn> é um sistema
global de redes
dfn Definindo instância interconectadas que usam o
Internet Protocol Suite
(TCP/IP) para servir bilhões
de usuários no mundo todo.
</p>
<div>
<p>Qualquer tipo de
conteúdo aqui. Como
div Bloco genérico
&lt;p&gt;, &lt;table&gt;.
Você dá o nome!</p>
</div>
<dl>
<dt>Firefox</dt>
<dd>A free, open source,
cross-platform, graphical web
browser
developed by the
dl Lista de descrições
Mozilla Corporation and
hundreds of volunteers.</dd>

<!-- other terms and


definitions -->
</dl>
dt Termo ou nome
<p>
Em HTML 5, o que
anteriormente era chamado de
conteúdo
em Ênfase (itálico)
<em>block-level</em> agora
é chamado de conteúdo
<em>flow</em> .
</p>
<embed type="video/quicktime"
Ponto de integração
embed src="movie.mov" width="640"
para plug-ins
height="480"> x
<form action="test.php"
method="post">
<fieldset>
Conjunto de controles <legend>Title</legend>
fieldset de formulário <input type="radio"
relacionados id="radio"> <label
for="radio">Click me</label>
</fieldset>
</form>
<!-- Apenas uma imagem -->
<figure>
<img src="favicon-
192x192.png" alt="O lindo
Legenda de uma logotipo do MDN." />
figcaption
figura </figure>

<!-- Imagem com legenda -->


<figure>
<img src="favicon-
192x192.png" alt="O lindo
logotipo do MDN." />
<figcaption>Logotipo
MDN</figcaption>
</figure>
Figura com legenda
figure
opcional
<footer>
Algumas informações de
Rodapé (parte inferior copyright ou talvez alguma
footer
da página) informação do autor de um
<article>?
</footer x
<!-- Form que envia uma
requisição GET -->
<form action="" method="get">
<label for="GET-
name">Name:</label>
<input id="GET-name"
type="text" name="name">
<input type="submit"
value="Save">
</form>

<!-- Simple form which will


send a POST request -->
<form action=""
method="post">
<label for="POST-
name">Name:</label>
form Formulário <input id="POST-name"
type="text" name="name">
<input type="submit"
value="Save">
</form>

<!-- Form with fieldset,


legend, and label -->
<form action=""
method="post">
<fieldset>
<legend>Title</legend>
<input type="radio"
name="radio" id="radio">
<label for="radio">Click
me</label>
</fieldset>
</form>
<h1>Cabeçalho nível 1</h1>
<h2>Cabeçalho nível 2</h2>
<h3>Cabeçalho nível 3</h3>
h1, h2, h3, h4, h5, h6 Título
<h4>Cabeçalho nível 4</h4>
<h5>Cabeçalho nível 5</h5>
<h6>Cabeçalho nível 6</h6>
<html>
<head>
Armazena metadados <title>Document
head
de documento title</title>
</head>
</html>
<header>
<h1>Título da Página
Cabeçalho exibido na Principal</h1>
header
página <img src="mdn-logo-sm.png"
alt="MDN logo">
</header> x
hgroup Grupo de título x
hr Linha horizontal
html Elemento raiz
Itálico (atribui
i
importância ao item)
<iframe
Permite que outras src="https://www.homehost.com
páginas sejam .br">
iframe
embutidas dentro de <p>Seu navegador não possui
uma página. suporte para iFrames.</p>
</iframe>
<img
src="imagens/imagem1.jpg"
img Imagem
alt="imagem 1 da minha
página">
<!-- Um campo básico -->
<input type="text"
input Controle de entrada
name="input" value="Digite
aqui">
<ins>This text has been
ins Texto inserido
inserted</ins>
<label>Click me <input
Legenda para itens de
label type="text" id="User"
formulários
name="Name" /></label>
Título ou legenda
legend
explicativa
<ol>
<li>primeiro item</li>
li Item da lista <li>segundo item</li>
<li>terceiro item</li>
</ol>
Permite
<link href="style.css"
link relacionamentos entre
rel="stylesheet">
documentos
<map>
<area shape="circle"
Definição de mapa de coords="200,250,25"
map
imagem href="another.htm" />
<area shape="default" />
</map>
<p>O elemento &lt;mark&gt; é
Texto marcado usado para
mark
(destacado) <mark>destacar</mark> partes
do texto</p> x
Permite a inserção de
menu
itens
<!-- In HTML5 -->
<meta charset="utf-8">

<!-- redireciona a página


meta Metadados
depois de 3 segundos -->
<meta http-equiv="refresh"
content="3;url=https://www.mo
zilla.org">
<p>Aqueça o forno para <meter
min="200" max="500"
meter Medidor escalar
value="350">350
graus</meter>.</p> x
<nav>
<ul>
<li><a href="#">Página
inicial</a></li>
Grupo de links de <li><a
nav
navegação href="#">Sobre</a></li>
<li><a
href="#">Contato</a></li>
</ul>
</nav> x
<noscript>
<!-- referência a arquivo
Carrega um conteúdo externo -->
diferente caso o <a
noscript
navegador não href="http://www.mozilla.com/
suporte scripts ">Link Externo</a>
</noscript>
<p>Rocks!</p>
Conteúdo externo
object
genérico
<ol>
ol Lista ordenada
<li>primeiro item</li>
<li>segundo item</li>
<li>terceiro item</li>
</ol>
optgroup Grupo de opções
Opção de uma caixa
option
de seleção (select)
<form
oninput="result.value=parseIn
t(a.value)+parseInt(b.value)"
>
Resultado do 0<input type="range" name="b"
output processamento de um value="50" />100 +<input
formulário type="number" name="a"
value="10" /> =
<output
name="result"></output>
</form> x
<p>Este é o primeiro
parágrafo do texto. Este é o
primeiro parágrafo do texto.
Este é o primeiro parágrafo
do texto. Este é o primeiro
parágrafo do texto.</p>
p Parágrafo
<p>Este é o segundo parágrafo
do texto. Este é o segundo
parágrafo do texto.
Este é o segundo parágrafo
do texto. Este é o segundo
parágrafo do texto.</p>
Parâmetros de
param inicialização para plug-
ins
pre Texto pré-formatado
<progress value="70"
Indicador de max="100">70 %</progress>
progress
progresso
x
<p>According to Mozilla's
website,
<q

Pequena citação de cite="https://www.mozilla.org


q
outra fonte /pt-
BR/about/history/details/">Fi
refox 1.0
was released in 2004 and
became a big success.</q></p>
<s>Hoje é um dia especial:
Armazena conteúdos Salmon</s> ESGOTADO<br>
que não são mais <span style="text-
s relevantes para o decoration:line-
documento, sendo through;">Hoje é um dia
então eliminados especial:
Salmon</span> ESGOTADO
<!-- HTML4 and (x)HTML -->
<script
type="text/javascript"
Permite a adição de src="javascript.js"></script>
script
scripts
<!-- HTML5 -->
<script
src="javascript.js"></script>
<div>
<h1>Cabeçalho</h1>
Bloco reservado para
section <p>Um monte de conteúdo
representar seções
incrível</p>
</div> x
<!-- O segundo valor estará
selecionado inicialmente -->
<select name="select">
<option
value="valor1">Valor
Caixa de seleção de 1</option>
select
um formulário <option value="valor2"
selected>Valor 2</option>
<option
value="valor3">Valor
3</option>
</select>
var worldString = 'Olá, mundo';

console.log(worldString.small()); //
<small>Olá, mundo</small>
small Letras pequenas
console.log(worldString.big()); //
<big>Olá, mundo</big>
console.log(worldString.fontsize(7)); //
<font size="7">Olá, mundo</fontsize>
html> <head> <title>Title of the
document</title> </head> <body>
<picture> <source media="(min-width:
650px)" alt="img_1"
Permite várias fontes srcset="/uploads/media/news_gallery/000
source
de áudio e vídeo 1/01/thumb_348_news_gallery_list.jpeg">
<source media="(min-width: 430px)"
alt="img_2"
srcset="/uploads/media/news_gallery/000
1/01/thumb_316_news_gallery_list.jpeg">
<img
src="/uploads/media/news_gallery/0001/0
1/thumb_366_news_gallery_list.jpeg"
alt="img" style="width:auto;"> </picture>
<p>Lorem Ipsum is simply dummy text of
the printing and typesetting industry.
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a type
specimen book. It has survived not only five
centuries, but also the leap into electronic
typesetting, remaining essentially
unchanged.</p> </body> </html>x
<p>My mother has <span
span Container para texto
style=”color:blue”>blue</span> eyes.</p>
Grande importância
strong <strong>This text is important!</strong>
(negrito)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 { color:#000099 }
Permite alterar o </style>
style
estilo </head>
<body>
<h1>The HTML style tag</h1>
</body>
</html>

<p>Almost every developer's favorite


molecule is
sub Subscrito C<sub>8</sub>H<sub>10</sub>N<sub>4</
sub>O<sub>2</sub>, also known as
"caffeine."</p>
details open>
<summary>Overview</summary> <ol>
Utilizado em sumários
summary <li>Cash on hand: $500.00</li>
e legendas
<li>Current invoice: $75.30</li> <li>Due
date: 5/6/19</li> </ol> </details>x
<p>
The ordinal number "fifth" can be
abbreviated in various languages as follows:
</p>
sup Sobrescrito
<ul>
<li>English: 5<sup>th</sup></li>
<li>French: 5<sup>ème</sup></li>
</ul>
<table>
table Tabela <tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
table {
border: 2px solid #555;
Grupo de linha de border-collapse: collapse;
tbody
uma tabela font: 16px "Lucida Grande", "Helvetica",
"Arial", sans-serif;
}
<table id="producttable">
<thead>
<tr>
<td>UPC_Code</td>
<td>Product_Name</td>
</tr>
</thead>
<tbody>
<!-- existing data could optionally be
td Célula de uma tabela included here -->
</tbody>
</table>

<template id="productrow">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
textarea name="textarea" rows="10"
Área para entrada de cols="50">Write something
textarea
texto here</textarea>
Copiar para área de transferência
table>
<tr>
<td>John</td>
<td>Doe</td>
Grupo de linha do </tr>
tfoot
rodapé de uma tabela <tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
tr>
<th>Lime</th>
Célula de cabeçalho
th <th>Lemon</th>
de uma tabela
<th>Orange</th>
</tr>
Grupo de título de
thead
uma tabela
<p>The concert starts at <time
time Data e/ou hora datetime="2018-07-
07T20:00:00">20:00</time>.</p>x
<title>Menu – Blue House Chinese Food –
title Título do documento
FoodYum: Online takeout today!</title>
<table>
<tr>
<th>Name</th>
<th>ID</th>
<th>Member Since</th>
<th>Balance</th>
</tr>
<tr>
<td>Margaret Nguyen</td>
<td>427311</td>
<td><time datetime="2010-06-03">June
3, 2010</time></td>
<td>0.00</td>
</tr>
<tr>
tr Linha de uma tabela
<td>Edvard Galinski</td>
<td>533175</td>
<td><time datetime="2011-01-
13">January 13, 2011</time></td>
<td>37.00</td>
</tr>
<tr>
<td>Hoshi Nakamura</td>
<td>601942</td>
<td><time datetime="2012-07-23">July
23, 2012</time></td>
<td>15.00</td>
</tr>
</table>

<video controls
poster=”/images/sample.gif”>
<source src=”sample.mp4”
type=”video/mp4” />
<source src=”sample.ogv”
type=”video/ogv” />
Faixa de mídia
track <track kind=”captions”
suplementar
src=”sampleCaptions.vtt” srclang=”em” />
<track kind=”descriptions”
src=”sampleDescriptions.vtt” srclang=”em”
/>
<track kind=”chapters”
src=”sampleChapters.vtt” srclang=”em” />
<track kind=”subtitles”
src=”sampleSubtitles_de.vtt” srclang=”de”
/>
<track kind=”subtitles”
src=”sampleSubtitles_en.vtt” srclang=”em”
/>
<track kind=”subtitles”
src=”sampleSubtitles_ja.vtt” srclang=”já” />
<track kind=”subtitles”
src=”sampleSubtitles_oz.vtt” srclang=”oz”
/>
<track kind=”metadata”
src=”keyStage1.vtt” srclang=”em”
label=”Key Stage 1” />
<track kind=”metadata”
src=”keyStage2.vtt” srclang=”em”
label=”Key Stage 2” />
<track kind=”metadata”
src=”keyStage3.vtt” srclang=”em”
label=”Key Stage 3” />
<!—Fallback →

</video>

<p>This paragraph includes a <u


Texto deslocado com
class="spelling">wrnogly</u> spelled
u estilo convencional
word.</p>
com um sublinhado
<ul>
<li>first item</li>
<li>second item</li>
ul Lista não ordenada
<li>third item</li>
</ul>

<p>A simple equation: <var>x</var> =


var Variável <var>y</var> + 2</p>

<video controls>
<source src="video.mp4"
type="video/mp4">
<source src="video.ogg"
video Vídeo
type="video/ogg">
Seu navegador não possui
suporte para Vídeos.
</video> x
Insere uma quebra de
wbr x
linha (se necessário)

Você também pode gostar