A linguagem HTML5 ainda não está na sua versão final, mas a cada dia que passa mais e mais websites começam a usá-la. A linguagem aproxima-se dos requisitos da Web e torna-se mais fácil publicar conteúdos Web 2.0. Quando HTML4 reinava, a Web2.0 nem sequer tinha sido pensada, sendo assim pouco compatíveis. Mas com HTML5, é expectável que seja diferente.

Embora seja previsível que quando HTML5 chegar à sua versão final, já exista Web 3.0, 4.0 ou quem sabe até mais, criando assim a necessidade de um update ao HTML5. As diferenças entre HTML4 e HTML5 não são muitas, mas há algumas que são importantes e que convém referir, confira em baixo!

SINTAXE SIMPLIFICADA

Esta é uma das diferenças mais notáveis entre HTML4 e HTML5, e que certamente irá fazer as delicias dos programadores Web. A sintaxe HTML5 é compativel com HTML4 mas há bastantes melhorias. A declaração doctype é muito mais curta (“<!doctype html>” ao invés de por ex. “<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>” ). Variações de doctypes já não são suportadas, é necessário sintaxe XHTML ou HTML em modo restricto.

NOVOS ELEMENTOS

Os novos elementos em HTML5 é a diferença mais notável, têm como propósito a simplificar o desenvolvimento do website, aproximar dos requisitos Web2.0, entre outros de entre uma lista enorme que pode ser consultada aqui.

Deixo agora alguns elementos aqui descritos:

  • <article> – Este atributo é usado para separar artigos, posts de blogs e outro conteúdo de texto. Com a crescente comunidade de bloggers e artigos de opinião, este elemento é certamente muito útil.
  • <header> e <footer> – Estes elementos são usados para o cabeçalho e rodapé da página e podem substituir os elementos <div> que usamos hoje para identificar vários elementos, incluindo o cabeçalho e rodapé. Uma vez que cabeçalho e rodapé estão presentes em quase todas as páginas, faz sentido que agora tenham um elemento só seu.
  • <nav> – Semelhente ao <header> e <footer>, na medida em que foi criado para dar um elemento à navegação de página.
  • <audio> e <video> – O conteúdo áudio e vídeo é tão comum de hoje em dia, alavancado pelas ligações à internet de alta velocidade, que era impossível não ter estes elementos disponíveis em HTML5, para facilitar a colocação destes conteúdos no website.

Além dos novos elementos introduzidos, foram também introduzidos novos atributos a elementos já existentes, mas a lista é ainda maior do que a lista dos elementos! De qualquer forma, antes de começar a programar em HTML5, dê uma olhadela na nova lista de atributos para elementos que usa frequentemente.

ELEMENTOS E ATRIBUTOS MODIFICADOS

Alguns dos atributos fundamentais de HTML como <a>, <b> ou <i> foram modificados. Poderá levar algum tempo e esforço até redecorar os novos significados. Deixo-lhe aqui algumas mudanças dignas de serem referenciadas:

  • <a> – Quando o elemento <a> é usado sem o atributo <href>, torna-se num link.
  • <b> – A nova função do elemento <b> ficou um bocadinho vaga. Não é negrito, mas continua a ser uma maneira de fazer sobressair texto. Pode ser usado por exemplo para palavras chave.
  • <hr> – O elemento <hr> agora é um novo tipo de quebra de linha, associado a quebra de parágrafo.
  • <i> – Diferencia texto, embora o seu uso seja diverso. Pode usar para nomes, termos técnicos ou mesmo idiomas. Isto é um pouco vago, pois se continuar a usar <b> e <i> da maneira que usava antes, será um erro. Se pretende ter negrito e texto itálico, será melhor opção meter na folha de estilos. Não chamaria conveniente a esta alteração, mas uma vez que lá está, teremos de nos habituar a ela. Talvez para SEO seja mais útil,pois é uma maneira de fazer sobressair texto sem usar negrito e itálico. Os elementos <mark> e <em> também podem ser usados para fazer sobressair texto.

ELEMENTOS E ATRIBUTOS ELIMINADOS

Além de novos elementos e atributos, também alguns destes foram apagados. Embora muitos deles não venham a fazer falta, porque muito raramente eram utilizados, alguns podiam ter ficado.

  • O primeiro grupo de elementos que foram utilizados e que serão melhor utilizados através de CSS são o <center>, <big> e <u>. Agora o seu lugar é na folha de estilos.
  • O segundo grupo tem a ver com as frames, <frame>, <frameset> e <noframes> eram tão antiquados que foi um alívio terem sido eliminados. Quando foram lançados, seriam espectaculares… mas com a evolução rapidamente passaram a antiquados.
  • O terceiro grupo pende em elementos raramente utilizados, que é o caso do <isindex>, <dir>, <applet> e <acronym>.

Como pode constatar, há de facto algumas diferenças entre o HTML5 e o HTML4, mas elas não são diferenças muito profundas. Quero com isto dizer que não terá de reaprender HTML da estaca zero. De qualquer das formas irá levar o seu tempo até se habituar ás novas regras, nomeadamente no que toca aos atributos e elementos alterados. A boa notícia é que o HTML5 veio para simplificar, e isto é o suficiente para justificar a actualização.

Ainda assim, deixamos uma relação das novas tags HTML5, as quais vêm mudar um pouco o contexto do novo HTML5, tome nota:

  • article: Bloco de artigo
  • aside: Conteúdo extra q tenha a ver com o site / artigo
  • audio: Conteúdo de som
  • canvas: Gráfico vetorial
  • command: Botão de comando
  • datagrid: Dados em uma lista ramificada
  • datalist: Lista dropdown
  • datatemplate: Template de dados
  • details: Detalhes de um elemento
  • dialog: Diálogo de uma conversa
  • embed: Interatividade com conteúdo externo ou um plugin (até que fim foi especificado!)
  • event-source: Alvo para eventos enviados por um servidor
  • figure: Grupo de conteúdo de mídia e sua legenda
  • footer: Bloco de rodapé
  • header: Bloco de cabeçalho
  • mark: Tag para marcação em textos
  • meter: Medição entre um valor mínimo e um valor máximo
  • nav: Bloco de navegação
  • nest: Próximo ponto para criação de elemento (trabalha junto com a tag datatemplate e rule)
  • output: Alguns tipos de saída de dados como em execução de scripts
  • progress: Progresso de uma tarefa de qualquer tipo
  • rule: Linha de um template (datatemplate)
  • selection: Seção do documento como capítulos ou alguma outra seção do documento
  • source: Recurso multimídia
  • time: Data / tempo
  • video: Um vídeo

Até Já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Leandro
    23 de setembro de 2010

    Faltou falar de um elemento que também irá ser muito usado, inclusive junto com o , o

    Até mais



    • Leandro
      23 de setembro de 2010

      ops, não foi se code: SECTION



      • Diogo Espinha
        27 de setembro de 2010

        Obrigado pela dica Leandro!



  2. Anderson Batata
    24 de setembro de 2010

    Legal! não tinha visto ainda um post completo e informativo assim, sobre HTML5! Valeu! Me tirou muitas duvidas!



    • Diogo Espinha
      27 de setembro de 2010

      Obrigado pelo comentário Anderson!

      Ainda bem que o artigo foi útil, espero poder continuar a contribuir para o seu desenvolvimento.

      Abraço



  3. Cristiano
    13 de fevereiro de 2011

    Olá Diogo,

    Será viável programar-se juntamente com HTML5 e CSS3?

    Tenho as minhas dúvidas se seria totalmente suportado por firefox, opera,IE, chrone e safari.

    Estes são obrigatoriamente os browsers que deveriam ser suportados.

    Cumprimentos,
    Cristiano Perdigão



  4. alexandre
    24 de fevereiro de 2011

    me mandaram colar meu twitter até na bunda, então lá vai:
    me siga no twitter: twitter.com/sxande



  5. Ed
    10 de julho de 2011

    Muito bom o artigo!
    Só uma correção ao invés de “selection” seria “section”;

    Valeu



  6. Marcos vinicios
    15 de maio de 2012

    Será criado um novo CSS para suporta o HTML5?



  7. Richard
    23 de setembro de 2012

    Muito bom seu artigo cara,consegui tirar algumas dúvidas,Obrigado.



  8. Ana Carolina
    3 de dezembro de 2012

    Gostei do artigo, o mais completo e didático que vi até agora! Valeu!


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz