HTML 5

O documento introduz o HTML 5, descrevendo sua evolução a partir do HTML 4 e as novas funcionalidades, elementos e remoções implementadas nesta nova versão. Alguns dos principais novos elementos são os elementos de estrutura como <header>, <nav> e <article>, além dos elementos de conteúdo como <video>, <audio> e <canvas>. O HTML 5 também simplificou o doctype e a sintaxe.

Enviado por

Eude Saturnino

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

98 visualizações

HTML 5

Enviado por

Eude Saturnino

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 9

Introduo ao HTML 5

Desde 1999, o desenvolvimento da linguagem HTML (HyperText Markup Language) ficou estacionado na verso 4. De l pra c, a W3C esteve focada em linguagens como XML (Extensible Markup Language) e SVG (Scalable Vector Graphics - o uso de grficos vetoriais em navegadores). Enquanto isso, os navegadores estiveram preocupados em desenvolver suas funcionalidades, como exibir pginas em abas e oferecer a integrao com leitores de RSS. Porm, recentemente organizaes como Mozilla Foundation, Opera e Apple se uniram para atualizar o HTML e implementar nele novas funcionalidades. Neste artigo veremos as novidades que o HTML 5 traz. Para quem est se familiarizando agora com o HTML, sem preocupaes: os elementos tradicionais continuam os mesmos, j que o HTML 5 foi desenvolvido pensando tambm em todos os usurios que no utilizam os navegadores mais recentes do mercado.

Novos elementos
Vrios novos elementos foram introduzidos no HTML 5, todos com a finalidade de facilitar a compreenso e a manuteno do cdigo. Alguns so uma evoluo natural do elemento <div> com foco na semntica; outros surgiram da necessidade de padronizar a maneira de se publicar contedo, como acontece hoje com as imagens. Os principais elementos dessa nova verso so:

Elementos de estrutura
<header> - cabealho da pgina ou de uma seo (no confundir com a tag <head>); <section> - cada seo do contedo; <article> - um item do contedo dentro da pgina ou da seo; <footer> - o rodap da pgina ou de uma seo; <nav> - o conjunto de links que formam a navegao, seja o menu principal do site ou links relacionados ao contedo da pgina; <aside> - contedo relacionado ao artigo (como arquivos e posts relacionados em um blog, por exemplo).

Elementos de contedo
<figure> - usado para associar uma legenda a uma imagem, vdeo, arquivo de udio, objeto ou iframe: <figure id="figura01"> <legend>Figura 1. Esquema de uma pgina em HTML 5</legend> <img src="html5.png" border="0" width="200" height="300" alt="Como fica a estrutura de uma pgina escrita com os novos elementos do HTML 5" /> </figure> <canvas> - atravs de uma API grfica, ir renderizar imagens 2D dinmicas que podero ser usadas em jogos, grficos, etc; <audio> e <video> - usados para streaming (transmisso pela internet) de udio e vdeo. uma tentativa de criar um padro em todos os navegadores como acontece hoje com as imagens: <audio src="musica.mp3" autoplay="autoplay" loop="20000" /> <video src="video.mov" width="400" height="360" /> <dialog> - junto com as tags <dt> e <dd> ser usado para formatar um dilogo: <dialog> <dt> Michael, you never told me your family knew Johnny Fontane! <dd> Oh sure, you want to meet him? <dt> Yeah! <dd> You know, my father helped Johnny in his career. <dt> Really? How? <dd> ...Let's listen to this song. </dialog> <time> - representa data e/ou hora; <meter> - usada para representar medidas, que podem ser de distncia, de armazenagem em disco, etc.

Elementos retirados do HTML 5

Alguns elementos no existiro mais no HTML 5. Alguns foram retirados porque sua funo puramente visual, e devem ser substitudos por uma declarao no CSS (Cascading Style Sheets), como: <basefont>, <big>, <center>, <font>, <s>,<strike>, <tt> e <u>. Outros foram retirados porque afetam negativamente a acessibilidade do site: <frame>, <frameset> e<noframes>. Apesar de serem considerados antigos, <b> e <i> ainda sero reconhecidos e renderizados para fins de formatao, mas devem ser substitudos sempre que possvel pelos elementos <strong> e <em>, respectivamente. Tambm foram retirados alguns atributos, seja porque caram em desuso ou porque podem ser substitudos semanticamente por declaraes no CSS para definir o visual dos elementos. Os principais atributos retirados so:

target no elemento <a>; align nos elementos <table> e demais tags de tabelas, <iframe>, <img>, <input>, <hr>, <div>, <p>, entre outros; background em <body>; bgcolor nos elementos de tabela e no <body>; border em <table> e <object>; cellpadding e cellspacing em <table>; height em <td> e <th>; width nos elementos <hr>, <table>, <td>, <th> e <pre>; hspace e vspace em <img> e <object>; noshade e size em <hr>.

Doctype
Com o HTML 5 usaremos apenas uma declarao doctype: <!DOCTYPE html> Alm de nica, ela curta e fcil de lembrar - hoje em dia praticamente todos os desenvolvedores copiam e colam o longo e complicado doctype de algum lugar na hora de comear um novo documento HTML.

Transio do XHTML
A semelhana entre o HTML 5 e seus antecessores, HTML 4.01 e XHTML 1.0, muito grande. Quem est familiarizado com as verses anteriores no sentir nenhuma dificuldade na transio, e para quem ainda vai aprender a linguagem, os novos elementos deixaro o processo mais simples. A sintaxe dos elementos como no HTML 4.01, que no exigia que elementos como <img> e <input> fossem "fechados": <input type="text" id="nome"> Porm, para aqueles que esto migrando do XHTML, a barra que fecha um elemento continuar sendo aceita: <input type="text" id="nome" />

hora de usar o HTML 5?

Essa pergunta ainda gera um extenso debate entre os desenvolvedores. H quem diga que, como a maioria dos navegadores usados hoje em dia ainda no tem suporte a HTML 5, e nem todas as novas tags esto completamente definidas, ainda no hora de gastar energia e tempo desenvolvendo um site para os

navegadores mais recentes para depois ter que "corrigir" o cdigo pensando nos navegadores antigos. Alm disso, a prpria W3C admite que asespecificaes atuais ainda no so definitivas e podem sofrer revises. Por outro lado, algumas pessoas defendem que toda tecnologia nova deve ser colocada em prtica para evoluir, encontrar erros e estabelecer melhorias. A resistncia sempre vai existir, como aconteceu com os padres web: ainda hoje muita gente utiliza tabelas para estruturar os layouts como se estivssemos nos anos 1990, apesar do extenso material sobre layouts tableless disponvel. De qualquer maneira, o jeito mais fcil de se tomar a deciso de migrar ou no para o HTML 5 estudando o pblico alvo do site para saber quais os navegadores mais utilizados por ele, e pensar se o tempo gasto com a correo para navegadores antigos vai valer a pena. Talvez seja mais interessante, por exemplo, redesenhar seu blog pessoal em HTML 5, mas manter o portfolio em XHTML. Cada caso um caso, e planejamento, como em qualquer projeto, essencial. Decididamente o HTML 5 inaugura uma nova era no desenvolvimento de pginas para a internet, onde a mobilidade do usurio a palavra chave. Mudanas foram implementadas a partir das necessidades dos desenvolvedores, baseadas em erros e acertos. A partir de agora teremos em breve aplicaes web mais ricas e com maior integrao entre contedo on-line e off-line. Para informaes tcnicas mais detalhadas sobre o HTML 5, consulte a documentao oficial do W3C e a listagem de diferenas entre o HTML 5 e sua verso anterior

Abaixo est uma lista completa de tags HTML 5, na prximas semanas o nosso site ir fornecer-lhe uma lista de tag para download assim que voc pode aprender HTML 5. Como voc vai notar o HTML 5 tags abaixo h vrias incluses de novos cdigos.

4 * O elemento definido no HTML 4 + 5 * O elemento definido no HTML 5 Etiqueta Descrio <comment> <tipodoc> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> Define um comentrio Define o tipo de documento Define um hiperlink Define uma abreviao No h suporte. Define um acrnimo Define um elemento de endereo No h suporte. Define um applet Define uma rea dentro de um mapa de imagem Define um artigo Define o contedo, alm do contedo da pgina Define o contedo de som Define o texto em negrito Define um URL base para todos os links em uma pgina No h suporte. Use CSS instead Define a direo da exibio do texto No h suporte. grande texto define Define uma citao longa Define o elemento do corpo Insere quebra de uma nica linha Define um boto Define grficos Define uma legenda da tabela No h suporte. Define texto centrado

4 5 4 5 4 5 4 5 4 5 4 4 5 4 4 5 5 5 5 4 5 4 5 4 4 5 4 4 5 4 5 4 5 4 5 5 4 5 4

Define uma citao Define o texto do cdigo de computador Define atributos para colunas da tabela Define os grupos de colunas da tabela Define um boto de comando Define os dados em uma rvore de lista Define uma lista suspensa Define um modelo de dados Define uma descrio definio Define o texto suprimido Define detalhes de um elemento Define uma caixa de dilogo (conversao) No h suporte. Define uma lista de diretrios Define uma seo em um documento Define um termo de definio Define uma lista de definio Define um termo de definio Define o texto enfatizado Define o contedo interativo ou plugin externo Define um alvo para os eventos enviados por um servidor Define um fieldset Define um grupo de contedo de mdia, e sua legenda Deprecado. font texto define, tamanho e cor Define um rodap de uma seo ou pgina Define um formulrio No h suporte. define uma janela de sub (a armao) No h suporte. Define um conjunto de quadros Define o cabealho de um cabealho de 6 Define informaes sobre o documento

4 5 4 5 4 5 4 5 5 5 5 5 4 5 4 5 5 5 4 4 5 4 5 4 5 4 5 4 5 5 5 4 5 5 4 5 4 5 4 4 4 5 4 5

<header> <hr> <html> <i> <iframe> <img> <input> <INS> <isindex>

Define um cabealho para uma seo ou pgina Define uma regra horizontal Define um documento HTML Define o texto em itlico Define uma janela de sub inline (frame) Define uma imagem Define um campo de entrada Define o texto inserido No h suporte. define uma linha nica campo de entrada Define o texto do teclado Define um rtulo para uma forma de controle Define um ttulo em um fieldset Define um item de lista Define uma referncia de recurso Define o texto marcado Define um mapa de imagem Define uma lista de menu Define informaes meta Define a medio dentro de um intervalo pr-definido Define links de navegao Define um nestingpoint em datatemplate No h suporte. Define uma seo noframe Define uma seo noscript Define um objeto embutido Define uma lista ordenada Define um grupo de opo de Define uma opo em uma lista drop-down Define alguns tipos de sada Define um pargrafo 4

5 4 5 4 5 4 5 4 5 4 5 4 5 4 5 4

4 5 4 5 4 5 4 5 4 5 5 4 5 4 5 4 5 5 5 5

4 5 4 5 4 5 4 5 4 5 5 4 5

Define um parmetro para um objeto Define o texto pr-formatado Define o progresso de uma tarefa de qualquer tipo Define uma citao curta Define as regras para atualizao de um modelo No h suporte. define o texto tachado Define o cdigo de computador amostra Define um script Define uma seo Define uma lista selecionvel Define texto pequeno Define meios de comunicao social Define uma seo em um documento No h suporte. define o texto tachado Define texto forte Define uma definio de estilo Define subscrita texto Define o texto sobrescrito Define uma tabela Define o corpo de uma tabela Define uma clula de tabela Define uma rea de texto Define o rodap de uma tabela Define o cabealho de uma tabela Define o cabealho de uma tabela Define uma data / horrio Define o ttulo do documento Define uma linha da tabela No h suporte. define o texto teletype No h suporte. define o texto sublinhado

4 5 4 5 5 4 5 5 4 4 5 4 5 5 4 5 4 5 5 4 5 4 4 5 4 5 4 5 4 5 4 5 4 5 4 5 4 5 4 5 4 5 4 5 5 4 5 4 5 4 4

<ul> <var> <video> <xmp>

Define uma lista no ordenada Define uma varivel Define um vdeo No h suporte. Define o texto pr-formatado

4 5 4 5 5 4

HTML 5

Enviado por

HTML 5

Enviado por

Introduo ao HTML 5

Elementos retirados do HTML 5

hora de usar o HTML 5?

<header> <hr> <html> <i> <iframe> <img> <input> <INS> <isindex>

<ul> <var> <video> <xmp>

Você também pode gostar