Busca

Boas práticas de Desenvolvimento com Padrões Web


HTML5 Diff

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

13/07/2010 por Diego Eis
14 Comentários

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:

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:

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:

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

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.

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

Estes artigos também podem ajudar:

14 Comentários

Sua opinião:

Vamos elevar o nível de discussão. Exponha sua opinião, sua crítica.



RSS dos comentários deste post
URL para Trackback

14 Comentários

Tweets that mention HTML5 Diff | Boas práticas de Desenvolvimento com Padrões Web -- Topsy.com 13/07/2010 às 09:32

[...] This post was mentioned on Twitter by Pakua FeedCenter, Blogosphera and Web Feeds Brasil. Web Feeds Brasil said: HTML5 Diff http://bit.ly/9JwTpB [...]

Henrique C Pereira 13/07/2010 às 11:52

“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.”

Em outro trecho:

“Os elementos abaixo foram descontinuados por que seus efeitos são apenas visuais (…)”

Não estou criticando o seu texto e sim o próprio HTML5. Não entendo a razão de voltarem com o <b> depois que todo mundo parou de usar isso. Acho essas contradições do HTML5 um pouco desanimador. O que acha disso?

Diego Eis 13/07/2010 às 12:11

Grande Henrique!
Todo mundo parou de usar? Acho que não. O que eu mais escuto dos desenvolvedores quando eles me veem utilizando STRONG no lugar de B é: O B não se usa mais? Porque?

A ideia do HTML5 é que ele seja retrocompatível. Alguns elementos que foram descontinuados mas que ainda continuam sendo usados em sites antigos ou ainda por desenvolvedores tem agora sua função semântica reformulada, como no caso do elemento B.

Antes o B não tinha nenhuma função semântica, apenas visual. No HTML5 ele ganha a mesma função semântica que o SPAN, mas com a vantagem de deixar o texto marcado em negrito.

Acelio 13/07/2010 às 14:22

Legal que o tableless tornou a se ativar. Ou eu que não recebia mais o RSS, sei lá…

Estou vendo que a fonte do HTML5 vai ser aqui…

Também vejo que vou ter que estudar novamente. Vinha usando o XHTML há muitos anos e não o HTML4.

Agora vamos ter que setar mais tags via CSS e poluir mais o HTML com classes, para repor alguns comportamentos padrão, sejam eles visuais ou não, mas deixavam o HTML mais limpo e menos trabalho com CSS.
Pode ser que padronize mais a renderização dos navegadores.

Thiago Mendes 15/07/2010 às 15:07

Muito bom artigo!

qual os navegadores que suportam totalmente o html 5 ?

Heaven 15/07/2010 às 22:01

Por mim tirava a opção tel e adicionava a opcao mask, dando a referencia da mascara que quero que o input use, seria massa um text com suporte a mascara sem quer que apelar para javascript e css.

Ou melhor que tivesse um atributo css somente para trabalhar com mascaras, isso sim seria útil.

Rafael TM 16/07/2010 às 13:50

Excelente artigo.

Bom, tenho aqui o chrome 5 (acho), o FireFox 4 (lindo), o Opera 10.60 e Safari 5 que suportam o HTML5… não sei se totalmente, mas até agora tá indo bem.

O IE9 ainda não saiu mais tenho plataform preview 3 aqui e od esempenho para as coisinha de midia do HTML5 me espantam, deixam o resto bem pra traz. O Chrome foi o que perdeu mais feio. O Dos outros o FF fica em segundo com bom desempenho e o opera tb tá muito bem, junto ao safari.

Já em se tratandod e javascrip nos moldes antigos o PP3 ainda tá perdendo pro pessoal.

Agora tenho uma dúvida, vc poderiam fazer um artigo sobre os editores web que suportam ou suportarão HTML5? Instalei o CS5 por causa da atualização do Dreamweaver pra HTML5, mas sinceramente, detestei. A adobe não melhorou em nada a interface dele desde a era macromedia e o modo design (uso só pra ver mesmo não pra trabalhar) tem muita discrepência do resultado em tela.

Por hora fico com expression web.

Rafael TM 17/07/2010 às 10:32

Tiago.

Vc pode ir de:

safari 5
chrome 5 ou 6
FireFox 4 (to amando ele)
Opera 10.6 (outro que curti)

Internet explorer só o 9… tá demorando sair, mas pelo que tem sido mostrado nos plataform Previews ele vai ser muito robusto, mas muito mesmo.

Victor Brunner 18/07/2010 às 14:21

Thiago, só o IE que não suporta o html 5, os outros navegadores estão bem atualizados para as novas mudanças, variando pequenos detalhes de um para o outro.

Mas já existe um hack que permite que o IE “fique compatívle” com o html 5.

Também é preciso adicionar o atributo diplay block para alguma das novas tag.

header,footer,article,section,hgroup,nav,figure{
display:block;
}

Rafael TM 19/07/2010 às 00:18

opppaaaaaaaaaaaaaaaaa

Eu não entrava nesse site com o IE8 por ele não rodar ele com estilos e tudo mais, pelo fato do IE8 não dar suporte a quase nada (ou nada) do HTML5, já que esse site é feito em HTML5… porém hoje instalei um navegador chamado “the world” só pra testar e vi que ele roda… aí como ontem instalei uma nova versão do IE8, chamad versão pra redes sociais, pensei, vai que com essa atualização o IE8 roda… testei e rodou.

uhuuuuu… agora vai ficar mais maneiro migrar pro HTML5 já que quem usa só IE não tem desculpa.

Claro que não faço idéia de até onde vai esse suporte, mas só de rodar os recusos desse site já me anima muito.

Rafael TM 19/07/2010 às 00:20

PS: não consigo me decidir qual uso como padrão, se o FireFox 4 ou o opera 10.60… ambos excelentes.

se bem que uso todos toda hora mesmo, hehehe…

Thúlio Jardim 19/07/2010 às 08:52

Eu já tinha um conhecimento à respeito. O texto ajudou mais a entender o que faltava saber. Eu às vezes uso sim o elemento “B”. É mais breve, útil em mensagens não importantes, quando se quer apenas um efeito visual.

Rafael TM 20/07/2010 às 11:50

O site está tendo problemas pra registrar os posts ou o opera 10 e Firefox 4 tão deixando tudo offline mesmo?

Seyfertt 14/08/2010 às 17:54

O problema maior é a porcaria do IE no demais que venha o HTML5 de vez.