Novos elementos do HTML5

O HTML5 é uma linguagem para estruturação e apresentação de conteúdo para a Web.

Nesta página, vamos mostrar quais são os novos elementos do HTML5 e em quais situações utilizar.

Novos elementos semânticos e estruturais

HTML5 oferece novos elementos para melhorar a estrutura do documento do HTML. Veja alguns exemplos

  • <article> Define um artigo dentro de um documento
  • <aside> Define o conteúdo de uma página
  • <bdi> Isola uma parte do texto
  • <dialog> Define uma caixa de diálogo ou mensagem
  • <footer> Define o rodapé de uma sessão ou documento
  • <header> Defines o cabeçalho de um documento ou sessão.
  • <main> Define o conteúdo principal de um documento
  • <mark> Define uma marcação e destaque de um texto
  • <menuitem> Define um item no menu que o usuário pode acessar de um menu popup
  • <nav> Defines links de navegação
  • <progress> Representa o progresso de uma tarefa
  • <rp> Define o que será mostrado para o navegador que não suporta anotações ruby
  • <rt> Define pronunciação de caracteres
  • <ruby> Define uma anotação ruby
  • <section> Define uma sessão dentro de um documento
  • <summary>Define um sumário dentro de um elemento <details>
  • <time> Define hora e data.
  • <wbr> Define uma quebra de linha

Novos elementos de formulário

  • <datalist> Especifica uma lista pre-definida de opções
  • <output> Define o resultado de um cálculo

Novos tipos de entrada de dados

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Novos atributos

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

Novas tags de Gráfico

  • <canvas> Desenha gráficos por script, normalmente por JavaScript
  • <svg> Desenha vetores

Tags de Áudio

  • <audio> Define o conteúdo de som
  • <embed> Define um conteúdo externo ao HTML.
  • <source> Define múltiplas origens multimídias.
  • <track> Define textos
  • <video> Defines vídeo ou filme