As novas tags que vem no HTML 5

  • <article>: Define um artigo.
  • <aside>: Define algum conteúdo relacionado ao artigo.
  • <audio>: Define um streaming de áudio em um documento HTML
  • <canvas>: Define a criação de gráficos em uma página web
  • <command>: Define um botão de comando, como um radiobutton, uma caixa de seleção ou um botão.
  • <datagrid>: Define uma lista de dados selecionáveis. O datagrid é exibido como uma árvore.
  • <datalist>: Define uma lista de dados selecionáveis. Utilize esse elemento juntamente com o elemento input, para fazer uma lista suspensa para um valor de entrada.
  • <datatemplate>: Define um recipiente para o modelo de dados. Deve conter elementos filho que são <rule> para definir um modelo.
  • <details>: define os detalhes de um elemento, no qual o usuário pode ver, e clicar para ocultar.
  • <embed>: Utilizado para incorporar conteúdo no HTML, atuando como um plugin.
  • <eventsource>: Define um destino para eventos enviados por um servidor.
  • <figure>: Especifica ilustrações, imagens, fotos, associado juntamente com alguma legenda.
  • <footer>: Define o rodapé de uma seção ou documento. Normalmente, contém o nome do autor, data em que o documento foi escrito e / ou informações de contato.
  • <header>: Define o cabeçalho de uma seção ou documento.
  • <mark>: Define texto marcado. Utilize a tag <mark> se você quiser destacar partes do seu texto
  • <meter>: Define uma medição. Usado apenas para medições com conhecimento de um valor mínimo e um valor máximo.
  • <nav>: Define uma seção de links de navegação.
  • <nest>: Define o ponto de incício para criação de elementos em um <datatemplate>, utilizado em conjunto com o elemento <rule>.
  • <output>: Define a saída de diferentes tipos de dados, por exemplo, o cálculo efetuado por algum script.
  • <progress>: Define o progresso de uma tarefa de qualquer tipo.
  • <rule>: Define as regras para atualização de um datatemplate. Usado em conjunto com os elementos <datatemplate> e <nest>.
  • <section>: Define as seções em um documento. Tal como capítulos, cabeçalhos, rodapés, ou quaisquer outras seções do documento.
  • <source>: Define recursos para elementos de mídia, como <audio> e <video>.
  • <time>: Define tempo ou data, ou ambos.
  • <video>: Define vídeo, como um clipe de filme ou vídeo de outros fluxos.
  •  

    TAGS PARA CONSTRUIR O LAYOUT NO HTML 5

     

  • <nav>: Define o local do menu
  • <section>: Define uma sessão de conteúdo da página
  • <article>: Define o conteúdo (artigo, textos, postagens, etc)
  • <header>: Define o cabeçalho (topo) de algum elemento (body, section, nav, etc)
  • <footer>: Define o rodapé de algum elemento (body, section, nav, etc)
  • <aside>: Define o local da barra lateral (como um layout em 3 colunas)
  • Lembrando que nada é mágico e nem deve ser, tudo precisa e continua necessitando de estilização com CSS.

    No próximo artigo, irei mostrar alguns exemplos e formas de utilizar essas novas tags.

    Abraços!

    Sobre o HTML 5

    HTML 5 No início de 2009, o W3C anunciou a primeira especificação do HTML5.

    A versão atual do HTML é a 4.0.1, e a versão final do HTML está prometida para 2012.

    Foram feitas grandes alterações que favorecem a semântica, que incluem:

    • novas API’s
    • Elemento <canvas> para desenhos dinâmicos;
    • Network status (online/offline);
    • Utilização de um plugin gratuito de áudio e vídeo via tags;
    • contentEditable – Editor rico de conteúdo;
    • Drag and Drop de elementos;
    • Cross-document e cross-domain messages;
    • Histórico de navegação em Ajax;
    • Geolocation API;
    • Maior controle de dados sobre formulários;
    • Armazenamento de dados no cliente;
    • Web worker threads;
    • Melhoria na depuração de erros;
    • Entre outros avanços.

    Esta evolução da linguagem padrão para web pode eliminar a necessidade de plug-ins para aplicações multimídia em navegadores. Diversos críticos consideram a tecnologia como um forte concorrente ao Flash do Adobe, Silverlight, da Microsoft, e o recente JavaFX, da Sun.

    Recentemente, Shantanu Narayen, diretor executivo do Adobe, disse que o Flash não irá perder mercado, porem a versão 5 do HTML já está sendo chamado de “Flash-killer”. Estas tecnologias precisarão se adaptar rapidamente para conseguir manter-se no mercado, tão popular quanto hoje.

    Na avaliação do co-diretor de ferramentas da Mozilla, Ben Galbraith, as tecnologias viabilizadas pelo HTML 5 como o Canvas para desenhos 2D e o armazenamento de conteúdos no desktop, permitirão que “usemos mais o browser do que nunca”.

    Após dez anos sem atualizações, a forma como se escreve páginas na Internet passa por uma boa transformação. O HTML 5 oferece uma experiência web totalmente diferente para usuários e embora exista um longo caminho para ser finalizado, os navegadores mais importantes, como o Opera, Google Chrome, Safari 4, o novo Firefox 3.5 e o Internet Explorer 8 já implementaram partes da linguagem, incluindo tags de vídeo e suporte à tecnologia Canvas.

    Na versão 4 do HTML, a atual, o navegador não distingue o que é topo, conteúdo, rodapé e menu, mas com o HTML 5 isso irá mudar, veja:

    Estrutura de código com o HTML 4:

    <body>
      <div id="topo">...</div>
       <div id="menu">...</div>
       <div class="content">...</div>
       <div id="barralateral">...</div>
       <div id="rodape">...</div>
      </div>
    </body>

     

    html5_estrutura Estrutura de código com o HTML 5:

    <body>
      <header>...</header>
      <nav>...</nav>
      <section>
        <header>...</header>
        <article>...</article>
        <footer>...</footer>
      </section>
      <aside>...</aside>
      <footer>...</footer>
    </body>

    Ou seja, agora o navegador terá um conhecimento real de como o layout está sendo renderizado, o que é o rodapé, o conteúdo, a barra lateral da direita e etc. E claro, isto irá auxiliar muito os mecânismos de busca a filtrar informações úteis ou não. Talvez o que está em “header” não interesse muito, talvez o mais importante será o que está dentro de “article”, e por ai vai as possibilidades de mudanças que a nova tecnologia nos dará.

    Repare pela imagem representando o layout que os elementos header e footer não são exclusivos da página, mas pode ser usado para representar o topo e o rodapé de qualquer conteúdo (ou article).

    Bom, não vamos extender muito o tópico, resumi bem e de forma simples o que é o novo HTML.

    Nos próximos artigos sobre o HTML 5 eu vou mostrar detalhadamente sobre as novas TAGs e atributos e quais são suas funcionalidades. Também irei mostrar um exemplo prático de como desenvolver o HTML 5.

    Abraços!