Sejam todos muito bem-vindos a primeira aula do curso básico de HTML5! Nesta aula o web designer Matheus Beck faz uma introdução sobre a nova versão da Hypertext Markup Language.
OBS: A qualidade do vídeo está ruim porque eu aumentei o tamanho do vídeo para se encaixar com o tamanho da página do meu site.
A linguagem HyperText Markup Language 4 (HTML4) está no mercado digital desde 1999. Neste período, linguagens como XML (Extensible Markup Language) foram ganhando a atenção dos desenvolvedores WEB, que se focaram também na melhoria dos navegadores. Recentemente, organizações como Mozilla Foundation, Opera e Apple se uniram para atualizar o HTML e implementar novos e interessantes recursos.
Neste artigo, veremos algumas novidades que o HTML5 nos traz. Para quem está se familiarizando agora com o HTML, sem preocupações: os elementos tradicionais continuam os mesmos, já que o HTML5 foi planejado considerando também compatibilidade com estas funcionalidades.
Vários novos elementos foram introduzidos no HTML5, todos com a finalidade de facilitar a compreensão e a manutenção do código. Alguns são uma evolução natural do elemento < div > com foco na semântica; outros surgiram da necessidade de padronizar a maneira de se publicar conteúdo, como acontece hoje com as imagens. Os principais elementos dessa nova versão são:
< header > - cabeçalho da página ou de uma seção (não confundir com a tag < head >);
< section > - cada seção do conteúdo;
< article > - um item do conteúdo dentro da página ou da seção;
< footer > - o rodapé da página ou de uma seção;
< nav > - o conjunto de links que formam a navegação, seja o menu principal do site ou links relacionados ao conteúdo da página;
< aside > - conteúdo relacionado ao artigo (como arquivos e posts relacionados em um blog, por exemplo).
< figure > - usado para associar uma legenda a uma imagem, vídeo, arquivo de áudio, objeto ou iframe.
< canvas > - por meio de uma API gráfica, renderiza imagens 2D dinâmicas que poderão ser usadas em jogos, gráficos, etc;
< audio > e < video > - usados para streaming (transmissão pela internet) de áudio e vídeo. É uma tentativa de criar um padrão em todos os navegadores como acontece hoje com as imagens.
< dialog > - junto com as tags < dt > e < dd > criado para formatar um diálogo.
< time > - representa data e/ou hora;
< meter > - utilizado para representar medidas, que podem ser de distância, de armazenagem em disco, etc.
Apesar de serem considerados antigos, < b > e < i > ainda serão reconhecidos e renderizados para fins de formatação, mas devem ser substituídos sempre que possível pelos elementos < strong > e < em >, respectivamente.
Também foram retirados alguns atributos, seja porque caíram em desuso ou porque podem ser substituídos semanticamente por declarações no CSS para definir o visual dos elementos. Os principais atributos retirados são: 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 >.
Com o HTML5 usaremos apenas uma declaração doctype: < !DOCTYPE html >
Além de única, ela é curta e fácil de lembrar - hoje em dia praticamente todos os desenvolvedores copiam e colam o longo e complicado doctype de algum lugar na hora de começar um novo documento HTML.
A semelhança entre o HTML5 e seus antecessores, HTML 4.01 e XHTML 1.0, é muito grande. Quem está familiarizado com as versões anteriores não sentirá nenhuma dificuldade na transição, e para quem ainda vai aprender a linguagem, os novos elementos deixarão o processo mais simples.
A sintaxe dos elementos é como no HTML 4.01, que não exigia que elementos como < img > e < input > fossem "fechados": < input type="text" id="nome">
Porém, para aqueles que estão migrando do XHTML, a barra que fecha um elemento continuará sendo aceita: < input type="text" id="nome" />
Atualmente, praticamente todos os navegadores mais utilizados do mercado oferecem suporte à maior parte dos elementos do HTML5. No entanto, alguns desenvolvedores defendem a ideia de esperar um pouco mais para que esta nova especificação comece a ser utilizada pra valer, afinal, muitos acessos a sites ainda são feitos com versões de browsers que não trabalham com HTML5.
Outros acreditam que toda nova tecnologia deve ser colocada em prática o quanto antes, e já começaram a utilizar o HTML5 junto com scripts que fazem os navegadores mais antigos reconhecerem as novas tags (como, por exemplo, este script do desenvolvedor Remy Sharp).
A resistência sempre vai existir (infelizmente, hoje ainda encontramos sites diagramados como se estivéssemos em 1990!). A versão 6 do Internet Explorer, por exemplo, permaneceu em uso durante mais de uma década e precisou da ação de grandes companhias como o Google, que deixou de dar suporte a esta edição para tentar diminuir a quantidade de usuários com um navegador incrivelmente antigo. Não é por menos que muitos desenvolvedores se preocupam em criar páginas que funcionam em navegadores atuais e também nos mais antigos, afinal, ninguém quer perder visitantes.
Por esta razão, o jeito mais fácil de tomar a decisão sobre migrar ou não para o HTML5 é estudando o público-alvo do site para saber quais os navegadores mais utilizados por ele, e pensar se o tempo gasto com a adaptação para browsers antigos valerá a pena. Talvez seja mais interessante, por exemplo, redesenhar seu blog pessoal em HTML5, mas manter o portfólio em XHTML. Cada caso é um caso e planejamento, como em qualquer projeto, é essencial.
Decididamente, o HTML5 inaugura uma nova era no desenvolvimento de páginas para a internet, onde a mobilidade do usuário é a palavra-chave. Mudanças foram implementadas a partir das necessidades dos desenvolvedores, baseadas em erros e acertos. A partir de agora, teremos aplicações Web mais ricas e com maior integração entre conteúdo on-line e off-line.
Para informações técnicas mais detalhadas sobre o HTML5, consulte a documentação oficial do W3C e a listagem de diferenças entre o HTML5 e sua versão anterior.
Erika Sarti foi quem produziu este artigo, ela não têm nada a ver com esse site, apenas achei interessante o artigo dela e coloquei no meu site e estou disponibilizando os créditos.