Glossário HTML5

Créditos: Este documento é uma tradução do original em http://html5doctor.com/glossary/

Criamos este glossário para ser uma referência para os novos elementos e elementos redefinidos da HTML5. Iremos gradativamente adicionando conteúdos ao glossário com a finalidade de torná-lo o mais completo possível.

  1. A
  2. B
  3. C
  4. D
  5. E
  6. F
  7. G
  8. H
  9. I
  10. J
  11. K
  12. L
  13. M
  14. N
  15. O
  16. P
  17. Q
  18. R
  19. S
  20. T
  21. U
  22. V
  23. W
  24. X
  25. Y
  26. Z

A

abbr

Destina-se a marcar abreviações e acrônimos. O atributo opcional title pode ser usado para esclarecer o significado da abreviação. Se for usado, o atributo title, ele deverá simplesmente "traduzir textualmente" a abreviação e nada mais.

http://www.w3.org/TR/html5/text-level-semantics.html#the-abbr-element[ Ver exemplo ]


O <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> começou a trabalhar na HTML5 em 2004.
address (Ver matéria no site
HTML5 Doctor)

Destina-se a marcar informações de contato para a seção onde o elemento for inserido. Se este elemento for filho de body então as informações de contato se referem ao documento como um todo.

http://www.w3.org/TR/html5/semantics.html#the-address-element[ Ver exemplo ]


<address>
    
Jack Osborne

</address>
article

Destina-se a marcar uma seção da página cujo conteúdo é uma parte independente do documento, página ou site. O conteúdo pode ser um post, um artigo, uma entrada de blog, um comentário do usuário ou qualquer outro conteúdo independente.

http://www.w3.org/TR/html5/semantics.html#the-article-element[ Ver exemplo ]

<article>
  <header>
    <h4><a href="#comment-2" rel="bookmark">Comentário #2</a> por <a href="http://example.com/">Jack Osborne</a>
	</h4>
    <time datetime="2007-08-29T13:58Z">29 de agosto de 2007 às 13:58</time>
  </header>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
</article>
aside (Ver matéria no site
HTML5 Doctor)

Destina-se a marcar uma seção da página cujo conteúdo seja relacionado e separado do conteúdo que envolve o elemento aside. Tais conteúdos podem ser comparados, em geral, às chamadas "sidebars" em tipografia para impressão.

http://www.w3.org/TR/html5/semantics.html#the-aside-element[ Ver exemplo ]


<aside>
  <h2>Blogroll</h2>
      <ul>
        <li><a href="/2007/09/">Blog um</a></li>
        <li><a href="/2007/08/">Blog dois</a></li>
        <li><a href="/2007/07/">Blog três</a></li>
      </ul>
</aside>
audio (Ver matéria no site
HTML5 Doctor)

Destina-se a marcar um stream de som ou áudio.

Conteúdo alternativo pode ser aninhado dentro do elemento audio. Os agentes de usuário não deverem mostrar este conteúdo para o usuário. Os autores devem utilizar este conteúdo para forçar os navegadores mais antigos a usar um plugin de vídeo ou para informar o usuário sobre como acessar o conteúdo de vídeo.

Suporte para áudio codecs:

  • Chrome 3+ suporta .ogg e .wav
  • Firefox 3.5+ suporta .ogg e .wav
  • Opera 10+ suporta .wav
  • Safari 4+ suporta .mp3 e .wav

http://www.w3.org/TR/html5/video.html#audio[ Ver exemplo ]


<audio src="music.oga" controls>
    <a href="music.oga">Download do som</a>
</audio>

B

b

Destina-se a marcar um fragmento de texto estilisticamente diferenciado do restante do texto, mas sem qualquer outra enfâse ou importância. Por exemplo: palavras-chave em um documento de resumo, nome dos produtos em um documento de revisão de produtos e outros trechos de texto que normalmente seriam marcados em negrito em apresentação tipográfica.

O elemento b deve ser usado como último recurso, quando não houver um elemento mais apropriado. Em particular, quando apropriado, elementos h1 até h6 devem ser usados, ênfase deve ser marcada com o elemento em, importância deve ser marcada com o elemento strong e texto que deva ser destacado deve ser marcado com o elemento mark.

http://dev.w3.org/html5/spec/Overview.html#the-b-element[ Ver exemplo ]


Aqui está um exemplo de uso do <b>elemento</b> b.

C

canvas

Destina-se a marcar uma área para inserção de bitmap na qual pode ser renderizado uma imagem, um game gráfico ou outra imagem qualquer.

Não se deve usar o elemento canvas quando houver um elemento mais apropriado. Por exemplo: não é apropriado usar o elemento canvas para renderizar o cabeçalho de uma página. Se você pretende apresentar um cabeçalho gráfico, ele deve ser marcado com o elemento apropriado (tipicamente h1) e estilizado com CSS e tecnologias de suporte como XBL.

O uso do elemento canvas deve ser associado ao fornecimento de conteúdo alternativo que forneça ao usuário as mesmas funções ou propósitos do gráfico inserido. Tal conteúdo deve ser aninhado no elemento canvas e ser apresentado caso falte suporte para o elemento.

http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element[ Ver exemplo ]


<canvas id="myCanvas" width="300" height="150">
Conteúdo alternativo para navegadores que não suportam Canvas.
</canvas>

D

details

Destina-se a marcar informação adicional.

http://www.w3.org/TR/html5/interactive-elements.html#the-details-element

dl

Destina-se a marcar uma lista descritiva com zero ou mais grupos nome/valor. Cada grupo consiste de um mais nomes (elementos dt) seguidos por um mais valores (elementos dd).

O grupo nome/valor pode ser um termo e suas definições, metadados tipo tópicos e valores, ou qualquer outro grupo de dados tipo nome/valor. Os valores de um grupo são alternativos; vários parágrafos formando um valor devem estar contidos em um único elemento dd.

http://www.w3.org/TR/html5/semantics.html#the-dl-element[ Ver exemplo ]


<dl>
<dt>address</dt>
<dd>O elemento address destina-se a marcar informações de contato para a seção onde o elemento for inserido. Se este elemento for filho de body então as informações de contato se referem ao documento como um todo.
</dd>
</dl>
<dl>
<dt>article</dt>
<dd>O elemento article destina-se a marcar uma seção da página cujo conteúdo é uma parte independente do documento, página ou site. O conteúdo pode ser um post, um artigo, uma entrada de blog, um comentário do usuário ou qualquer outro conteúdo independente.</dd>
</dl>

E

embed

Destina-se a marcar um ponto de integração com uma aplicação externa (tipicamente não HTML) ou um conteúdo interativo.

O atributo opcional src aponta para a URL do conteúdo a ser incorporado.

O atributo opcional type especifica o MIME type do plugin a instanciar. Seu valor deve ser um MIME type válido e conter opcionalmente parâmetros. Se ambos os atributos type e src forem especificados, então o atributo type deve especificar o mesmo MIME type explícito no matadado Content-Type do conteúdo para onde aponta o atributo src.

http://www.w3.org/TR/html5/embedded-content-0.html#the-embed-element[ Ver exemplo ]


<embed src="movieclip.mov">

F

figure

Destina-se a marcar um conteúdo específico no fluxo do documento que admita opcionalmente uma legenda e que possa ser removido do fluxo normal do documento sem afetar o seu significado.

O elemento figure pode ser usado para marcar ilustrações, diagramas, fotos, lista de códigos, etc referenciados ao conteúdo principal do documento, mas que não afetam o significado daquele conteúdo se forem removidos do fluxo — por exemplo: remover para a parte lateral da página ou para outra página dedicada ou ainda para um apêndice.

http://www.w3.org/TR/html5/embedded-content-0.html#the-figure-element[ Ver exemplo ]


<figure>
    <legend>Figura 1. JavaScript Alert Box.</legend>
    <pre><code>alert('Alô Mundo!');</code></pre>
</figure>
footer (Ver matéria no site
HTML5 Doctor)

Destina-se a marcar o “rodape” de um documento ou uma seção do documento. Tipicamente o elemento footer contém metadados sobre a seção na qual está contido, tais como, quem escreveu a seção, links para documentos relacionados, dados de direitos autorais, etc. Informações de contato, para a seção, inseridas no elemento footer devem ser marcadas com uso do elemento address.

http://www.w3.org/TR/html5/semantics.html#the-footer-element[ Ver exemplo ]

H

header (Ver matéria no site
HTML5 Doctor)

Destina-se a marcar o “topo” de um documento ou de uma seção do documento. Tipicamente o elmento header é usado para agrupar um conjunto de elementos h1h6 que marcam o título da página e seus subtítulos. O elemento header pode, contudo, conter mais que títulos e sub-títulos — por exemplo: informações sobre histórica de versões ou datas de publicação.

http://www.w3.org/TR/html5/semantics.html#the-header-element[ Ver exemplo ]

hgroup

Destina-se a marcar os títulos de uma seção. O elemento hgroup é usado para agrupar um conjunto de elementos h1h6 quando existem múltiplos níveis de títulos.

http://www.w3.org/TR/html5/semantics.html#the-hgroup-element[ Ver exemplo ]


<hgroup>
    <h1>HTML5Doctor.com</h1>
    <h2>Ajudando a implementar o HTML5</h2>
</hgroup>
h1–h6

Marca títulos e sub-títulos. Estes elementos estabelencem o nível de importância de um título de acordo com um número de 1 a 6. O elemento h1 é para o título mais importante da página e o elemento h6 para o menos importante. Dois títulos marcados com o mesmo elemento têm igual importância.

http://www.w3.org/TR/html5/semantics.html#the-h1-h2-h3-h4-h5-and-h6-elements[ Ver exemplo ]


<h(n)>
  Título no documento
</h(n)>

M

mark (Ver matéria no site
HTML5 Doctor)

Destina-se a marcar um fragmento de texto do documento que deva ser destacado por sua relevância em outro contexto.

Quando usado em um bloco de texto de citação ou outro bloco de texto referenciado no documento indica um destaque que não está presente no documento original. — por exemplo: em uma publicação acadêmica, um trecho de texto destacando um detalhamento recente.

http://www.w3.org/TR/html5/text-level-semantics.html#the-mark-element[ Ver exemplo ]


Neste parágrafo usamos o elemento mark para destacar <mark>HTML5</mark>. Deu para perceber o seu uso?
meter (Ver matéria no site
HTML5 Doctor)

O conteúdo do elemento meter é renderizado em 'inline-box block' com um 'height' (altura) igual '1 em' e um 'width' (largura) de '5em', um 'vertical-align' de '-0.2em', e (o conteúdo) simulando um dispositivo indicador. Quando a largura do elemento é maior ou igual sua altura, a simulação do dispositivo indicador deverá ser na horizontal, com o valor mínimo á direita se a propriedade "direção" do elemento tem o valor de 'rtl' (right to left - escrita ocidental), e à esquerda caso contrário ('ltr'). Quando a altura do elemento é maior do que sua largura a simulação do dispositivo indicador deverá ser na vertical, com o valor mínimo na parte inferior.

hhttp://www.w3.org/TR/html5/the-xhtml-syntax.html#the-meter-element[ Ver exemplo ]


 A sua pontuação é: <meter> 2 em 10 possíveis </meter>

N

nav (Ver matéria no site
HTML5 Doctor)

Destina-se a marcar a navegação de documento. O elemento nav é uma seção que contém links para outros documentos ou para seções dentro do mesmo documento. Nem todos os grupos de links em uma página precisam ser marcados com o elemento nav— apenas grupos de links da navegação principal. Em particular, é comum o rodapé da página conter links para várias partes-chave de um site, mas nestes casos o elemento footer é mais adequado.

http://www.w3.org/TR/html5/semantics.html#the-nav-element[ Ver exemplo ]

O

output

Destina-se a marcar o resultado de um cálculo.

O atributo opcional for permite estabelecer um relacionamento explícito entre o resultado final e os valores envolvidos no cálculo. Quando especificado, o atributo for deve conter uma string formada por um conjunto de tokens, não ordenados, separados por espaços, sendo cada um deles o ID de um elemento contido no documento.

http://www.w3.org/TR/html5/forms.html#the-output-element

 <output> Av. Atlântica, 82.780 </output> 

P

progress

Destina-se a marcar o andamento (progresso) de uma tarefa. O andamento pode ser tanto indeterminado — significa que não é possível saber quanto falta para o término da tarefa (por exemplo: a tarefa está esperando por uma resposta do servidor remoto) — quanto determinado, e, neste caso, indicado por um valor númerico entre 0 e um dado valor máximo, sendo assim possível saber com exatidão quanto falta para o término da tarefa.

http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-progress-element[ Ver exemplo ]


<section>
 <p>Andamento: <progress> <span id="p">0</span>% </progress> </p>

<script>
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.textContent = newValue;
  }
</script>

</section>

S

section (Ver matéria no site
HTML5 Doctor)

Destina-se a marcar um documento genérico ou a seção de uma aplicação. Neste contexto, uma seção é um agrupamento de conteúdos, normalmente com um cabeçalho, possivelmente com um rodapé. Exemplos incluem capítulos em um livro, as diversas páginas com abas em uma caixa de diálogo com guias ou as seções numeradas de uma tese. Uma página poderia ser dividida em seções para introdução, notícias e informações de contato.

http://www.w3.org/TR/html5/semantics.html#the-section-element[ Ver exemplo ]


<section>
  <h1>Nível 1</h1>
    <section>
      <h1>Nível 2</h1>
        <section>
          <h1>Nível 3</h1>
        </section>
    </section>
</section>
small

Destina-se a marcar comentários secundários. Não se destina a apresentação. O elemento small não deve ser usado para marcar textos longos, com vários parágrafos, listas ou seções de texto. Destina-se apenas para pequenas porções de texto.

http://www.w3.org/TR/html5/text-level-semantics.html#the-small-element[ Ver exemplo ]


<footer>
 <address>
 Para mais detalhes favor contactar <a href="mailto:hello@html5doctor.com">HTML5 Doctor</a>.
 </address>

<small> © copyright HTML5 Doctor.</small>
</footer>

T

time

Destina-se a marcar uma data precisa e/ou hora no calendário gregoriano. O elemento time codifica o grupo data/hora em uma máquina, de forma legível, de modo que, por exemplo, os agentes de usuário poderiam oferecer para adicionar um evento ao calendário do usuário.

http://www.w3.org/TR/html5/text-level-semantics.html#the-time-element[ Ver exemplo ]


<time datetime="2007-08-29T13:58Z">
  29 de agosto de 2007 às 13:58
</time>

V

video (Ver matéria no site
HTML5 Doctor)

Destina-se a marcar um vídeo ou filme.

Um conteúdo alternativo pode ser aninhado dentro do elemento video. Os agentes de usuário não deverem mostrar este conteúdo para o usuário. Os autores devem utilizar este conteúdo para forçar os navegadores mais antigos a usar um plugin de vídeo ou para informar o usuário sobre como acessar o conteúdo de vídeo.

http://www.w3.org/TR/html5/video.html#video[ Ver exemplo ]


<video src="video.ogv" controls poster="poster.jpg" width="320" height="240">
<a href="video.ogv">Download do vídeo</a>
</video>

Topo ↑

Comente

   (abre em janela pop-up)