Artigos

HTML5 Diff

Um resumo do que mudou no HTML5 em comparação com o HTML4.

Por Diego Eis

• 14 comentários
• Tweet

O W3C mantém um documento que compara o HTML4 com as novidades do HTML5. São inúmeras mudanças em elementos mais conhecidos e também em outros elementos mais específicos, utilizados em aplicações e sistemas mais complexos. Sugiro que você leia este documento e o guarde como referência.

O HTML5 ainda é um rascunho. Ele está sendo discutido entre o WHATWG e o W3C. Diversos pontos podem ser modificados ainda, por isso é interessante que você entenda e fique por dentro das discussões para que você atualize seu código quando necessário.

Um dos grandes objetivos do HTML5 é que ele seja retrocompatível. Isso evita o retrabalho de código e faz com que a web retome o rumo da semântica e do código enxuto. Vamos às mudanças:

O elemento B passa a ter o mesmo nível semântico que um SPAN, mas ainda mantém o estilo de negrito no texto. Contudo, ele não dá nenhuma importância para o text marcado com ele.

O elemento I também passa a ser um SPAN. O texto continua sendo itálico e para usuários de leitores de tela, a voz utilizada é modificada para indicar ênfase. Isso pode ser útil para marcar frases em outros idiomas, termos técnicos e etc.

O interessante é que nestes dois casos houve apenas uma mudança semântica. Provavelmente você não precisará modificar códigos onde estes dois elementos são utilizados.

Voce utilizará o SMALL para fazer literalmente os “letras miúdas” de um documento legal, comentários gerais ou até mesmo aqueles pequenos comentários e dicas que colocamos em campos de formulários e etc.

O HR virou um parágrafo de quebra. Ou seja, ele passa a ter a mesma importância do parágrafo, mas em um nível temático para quebra de linha.

Os elementos abaixo foram descontinuados por que seus efeitos são apenas visuais:

• basefont
• big
• center
• font
• s
• strike
• tt
• u

Como já era conhecido por alguns, os inputs ganharam novos valores no atributo TYPE. Estes novos valores permitem que browsers e outros user-agents melhorem a experiência do usuário, mostrando calendários e permitindo integração com agenda de contatos e etc. Permite também que os dados possam ser submetidos para o servidor com um formato específico. Valores como TEL, URL e EMAIL já tem efeitos em smartphones como iPhone:

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

Os elementos abaixo não foram incluídos na especificação porque não tiveram uso entre os desenvolvedores ou porque sua função foi substituída por outro elemento:

• 1

  acronym

  não foi incluído porque criou um bocado de confusão entre os desenvolvedores que preferiram utilizar a tag

  1

  abbr

  .

• 1

  applet

  ficou obsoleto em favor da tag

  1

  object

  .

• 1

  isindex

  foi substituído pelo uso de form controls.

• 1

  dir

  ficou obsoleto em favor da tag

  1

  ul

  .

Este atributos foram descontinuados porque modificam a formatação do elemento e suas funções são melhores controladas pelo CSS:

• 1

  align

  como atributo da tag

  1

  caption

  ,

  1

  iframe

  ,

  1

  img

  ,

  1

  input

  ,

  1

  object

  ,

  1

  legend

  ,

  1

  table

  ,

  1

  hr

  ,

  1

  div

  ,

  1

  h1

  ,

  1

  h2

  ,

  1

  h3

  ,

  1

  h4

  ,

  1

  h5

  ,

  1

  h6

  ,

  1

  p

  ,

  1

  col

  ,

  1

  colgroup

  ,

  1

  tbody

  ,

  1

  td

  ,

  1

  tfoot

  ,

  1

  th

  ,

  1

  thead

  e

  1

  tr

  .

• 1

  alink

  ,

  1

  link

  ,

  1

  text

  e

  1

  vlink

  como atributos da tag

  1

  body

  .

• 1	background

  como atributo da tag

  1

  body

  .

• 1

  bgcolor

  como atributo da tag

  1

  table

  ,

  1

  tr

  ,

  1

  td

  ,

  1

  th

  e

  1

  body

  .

• 1

  border

  como atributo da tag

  1

  table

  e

  1

  object

  .

• 1	cellpadding

  e

  1	cellspacing

  como atributos da tag

  1

  table

  .

• 1

  char

  e

  1

  charoff

  como atributos da tag

  1

  col

  ,

  1

  colgroup

  ,

  1

  tbody

  ,

  1

  td

  ,

  1

  tfoot

  ,

  1

  th

  ,

  1

  thead

  e

  1

  tr

  .

• 1

  clear

  como atributo da tag

  1

  br

  .

• 1

  compact

  como atributo da tag

  1

  dl

  ,

  1

  menu

  ,

  1

  ol

  e

  1

  ul

  .

• 1

  frame

  como atributo da tag

  1

  table

  .

• 1	frameborder

  como atributo da tag

  1

  iframe

  .

• 1

  height

  como atributo da tag

  1

  td

  e

  1

  th

  .

• 1

  hspace

  e

  1

  vspace

  como atributos da tag

  1

  img

  e

  1

  object

  .

• 1	marginheight

  e

  1	marginwidth

  como atributos da tag

  1

  iframe

  .

• 1

  noshade

  como atributo da tag

  1

  hr

  .

• 1

  nowrap

  como atributo da tag

  1

  td

  e

  1

  th

  .

• 1

  rules

  como atributo da tag

  1

  table

  .

• 1

  scrolling

  como atributo da tag

  1

  iframe

  .

• 1

  size

  como atributo da tag

  1

  hr

  .

• 1

  type

  como atributo da tag

  1

  li

  ,

  1

  ol

  e

  1

  ul

  .

• 1

  valign

  como atributo da tag

  1

  col

  ,

  1

  colgroup

  ,

  1

  tbody

  ,

  1

  td

  ,

  1

  tfoot

  ,

  1

  th

  ,

  1

  thead

  e

  1

  tr

  .

• 1

  width

  como atributo da tag

  1

  hr

  ,

  1

  table

  ,

  1

  td

  ,

  1

  th

  ,

  1

  col

  ,

  1

  colgroup

  e

  1

  pre

  .

Alguns atributos do HTML4 não são mais permitidos no HTML5. Se eles tiverem algum impacto negativo na compatibilidade de algum user-agent eles serão discutidos.

• 1

  rev

  e

  1

  charset

  como atributos da tag

  1

  link

  e

  1

  a

  .

• 1

  shape

  e

  1

  coords

  como atributos da tag

  1

  a

  .

• 1

  longdesc

  como atributo da tag

  1

  img

  and

  1

  iframe

  .

• 1

  target

  como atributo da tag

  1

  link

  .

• 1

  nohref

  como atributo da tag

  1

  area

  .

• 1

  profile

  como atributo da tag

  1

  head

  .

• 1

  version

  como atributo da tag

  1

  html

  .

• 1

  name

  como atributo da tag

  1

  img

  (use

  1

  id

  instead).

• 1

  scheme

  como atributo da tag

  1

  meta

  .

• 1

  archive

  ,

  1

  classid

  ,

  1

  codebase

  ,

  1

  codetype

  ,

  1

  declare

  e

  1

  standby

  como atributos da tag

  1

  object

  .

• 1

  valuetype

  e

  1

  type

  como atributos da tag

  1

  param

  .

• 1

  axis

  e

  1

  abbr

  como atributos da tag

  1

  td

  e

  1

  th

  .

• 1

  scope

  como atributo da tag

  1

  td

  .

Há outras mudanças mais profundas, por isso sugiro que você leia esse documento inteiro: W3C HTML5 Diff.

Estes artigos também podem ajudar:

• Conteúdo, Flash e HTML
• Processos de Adoção e Padrões
• HTML5 – Mudanças na estrutura e Semântica
• Ah! O maravilhoso mundo real

• 14 comentários

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de Diego Eis