novos elementos do HTML5

novos elementos no HTML5

A seguir está listado os novos elementos do HTML5, juntamente com suas descrições.

novos elementos semânticos/estruturais

Os novos elementos do HTML5 permitem construir uma estrutura de documento melhor:

Etiqueta Descrição
<article> definir artigo dentro do documento.
<aside> definir conteúdo fora do conteúdo da página.
<bdi> definir direção do texto diferente de outros textos.
<details> definir detalhes adicionais visíveis ou ocultáveis pelo usuário.
<dialog> definir diálogo ou janela.
<figcaption> definir título do elemento <figure>.
<figure> definir conteúdo autocontido, como ilustrações, gráficos, fotos, listas de código, etc.
<footer> definir rodapé do documento ou seção.
<header> definir cabeçalho do documento ou seção.
<main> definir conteúdo principal do documento.
<mark> definir conteúdo importante ou em destaque.
<menuitem> definir comando/menú item que o usuário pode chamar a partir de um menu suspenso.
<meter> definir medição escalar dentro de um intervalo conhecido (escala).
<nav> definir link de navegação dentro do documento.
<progress> definir progresso de tarefa.
<rp> definir o que será exibido em navegadores que não suportam comentários ruby.
<rt> definir explicação/leitura do caractere (usado em fontes asiáticas).
<ruby> definir comentário ruby (usado em fontes asiáticas).
<section> definir seção no documento.
<summary> definir título visível do elemento <details>.
<time> definir data/hora.
<wbr> definir possível quebra de linha (line-break).

Leia mais sobre semântica HTML5do conteúdo.

novo elemento de formulário

Etiqueta Descrição
<datalist> definir opções pré-definidas para o controle de entrada.
<keygen> definir campo gerador de chave (usado em formulários).
<output> definir o resultado da contagem.

Leia mais sobre Elementos de Formulário HTMLnovos elementos antigos e novos.

novo tipo de entrada

novo tipo de entrada novo atributo de entrada
  • cor
  • data
  • datetime
  • datetime-local
  • email
  • mês
  • número
  • espanhamento
  • pesquisa
  • tel
  • tempo
  • url
  • semana
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • largura e altura
  • list
  • min e max
  • múltiplo
  • padrão (regexp)
  • placeholder
  • obrigatório
  • passo

Aprender Tipos de Entrada do HTMLde todos os novos e antigos tipos de entrada.

Aprender Atributos de Entrada HTMLde todos os atributos de entrada.

Novo gramática de atributo do HTML5

O HTML5 permite quatro diferentes gramáticas de atributos.

Este exemplo demonstra os diferentes gramáticos usados no etiqueta <input>.

Etiqueta Descrição
Vazio <input type="text" value="Bill Gates" desabilitado>
Sem citação <input type="text" value=Bill>
Citação dupla <input type="text" value="Bill Gates">
Citação simples <input type="text" value='Bill Gates'>

No HTML5, dependendo das necessidades das propriedades, pode ser usado todos esses quatro gramáticos.

Imagem do HTML5

Etiqueta Descrição
<canvas> Definir o desenho de imagem usando JavaScript.
<svg> Definir o desenho de imagem usando SVG.

Leia mais sobre Canvas HTML5 do conteúdo.

Leia mais sobre SVG do HTML5 do conteúdo.

Novos elementos de mídia

Etiqueta Descrição
<audio> Definir o conteúdo de som ou música.
<embed> Definir o contêiner de aplicativos externos (por exemplo, plug-ins).
<source> Definir as fontes do <video> e <audio>.
<track> Definir as trilhas do <video> e <audio>.
<video> Definir o conteúdo de vídeo ou filme.

Leia mais sobre Video do HTML5do conteúdo.

Leia mais sobre Áudio do HTML5do conteúdo.