HTML5 New Elements
Desde 1999, HTML 4.01 mudou muito. Hoje, vários do HTML 4.01 foram reprovados, e estes elementos foram excluídos ou redefinidos em HTML5.
A fim de melhor lidar com aplicações de Internet de hoje, HTML5 acrescenta uma série de novos elementos e características, tais como: renderização de gráficos, conteúdo multimídia, melhor estrutura da página, melhor forma de processamento, e vários api arrastar e soltar elementos, posicionamento, incluindo a aplicação web caching, armazenamento, trabalhador web, e assim por diante.
Os novos elementos HTML5
Abaixo está uma lista dos novos elementos HTML5, e uma descrição do que eles são usados para.
New Semântica / Elementos Estruturais
HTML5 oferece novos elementos para uma melhor estrutura do documento:
| etiqueta | Descrição |
|---|---|
| <article> | Define um artigo no documento |
| <aside> | Define o conteúdo, além do conteúdo da página |
| <bdi> | Define uma parte de texto que pode ser formatado em uma direção diferente de outros textos |
| <details> | Define detalhes adicionais que o usuário pode exibir ou ocultar |
| <dialog> | Define uma caixa de diálogo ou janela |
| <figcaption> | Define uma legenda para um <figure> elemento |
| <figure> | Define o conteúdo auto-suficiente, como ilustrações, diagramas, fotos, listas de código, etc. |
| <footer> | Define um rodapé para o documento ou uma seção |
| <header> | Define um cabeçalho para o documento ou uma seção |
| <main> | Define o conteúdo principal de um documento |
| <mark> | Define marcados ou texto destacado |
| <menuitem> | Define um item de comando / menu que o usuário pode chamar a partir de um menu pop-up |
| <meter> | Define uma medição escalar dentro de um intervalo conhecido (a gauge) |
| <nav> | Define links de navegação no documento |
| <progress> | Define o progresso de uma tarefa |
| <rp> | Define o que mostrar em navegadores que não suportam ruby anotações |
| <rt> | Define uma explicação / pronúncia de caracteres (para a tipografia da Ásia Oriental) |
| <ruby> | Define um ruby anotação (for East Asian typography) |
| <section> | Define uma seção no documento |
| <summary> | Define um título visível por um <details> elemento |
| <time> | Define uma data / hora |
| <wbr> | Define uma possível quebra de linha |
Leia mais sobre HTML5 Semântica .
New Elements Form
| etiqueta | Descrição |
|---|---|
| <datalist> | Define opções pré-definidas para controles de entrada |
| <keygen> | Define um campo de gerador de chave-par (for forms) |
| <output> | Define o resultado de um cálculo |
Leia tudo sobre elementos de formulário antigos e novos em Formulário Elementos HTML .
Novos tipos de entrada
| Novos tipos de entrada | Novos atributos de entrada |
|---|---|
|
|
Saiba tudo sobre os tipos de entrada antigos e novos em Tipos de entrada HTML .
Saiba tudo sobre atributos de entrada na entrada Atributos HTML .
HTML5 - Nova Sintaxe de atributo
HTML5 permite que quatro sintaxes diferentes para atributos.
Este exemplo demonstra os diferentes sintaxes usadas em um <input> tag:
| Tipo | Exemplo |
|---|---|
| Vazio | <input type="text" value="John" disabled > |
| não cotado | <input type="text" value=John > |
| Entre aspas | <input type="text" value="John Doe" > |
| Single-citado | <input type="text" value='John Doe' > |
Em HTML5, podem ser utilizados todos os quatro sintaxes, dependendo do que é necessário para o atributo.
Gráficos HTML5
| etiqueta | Descrição |
|---|---|
| <canvas> | Define desenho gráfico usando JavaScript |
| <svg> | Define desenho gráfico usando SVG |
Leia mais sobre tela em HTML5 .
Leia mais sobre HTML5 SVG .
New Elementos de Mídia
| etiqueta | Descrição |
|---|---|
| <audio> | Define som ou música de conteúdo |
| <embed> | Define recipientes para aplicações externas (like plug-ins) |
| <source> | Define fontes para <video> e <audio> |
| <track> | Define faixas para <video> e <audio> |
| <video> | Define o conteúdo de vídeo ou filme |
Leia mais sobre HTML5 Vídeo .
Leia mais sobre HTML5 áudio .