Este é mais um blog da sequencia de informações bacanas sobre html5!
A primeira parte do artigo você pode encontrar aqui.
Sem mais delongas, vamos à segunda parte!
1. A Semântica de Cabeçalho e Rodapé
Já se foram os dias de:
<div id=”header”>
…
</div>
<div id=”footer”>
…
</div>
Divs, por natureza, não têm estrutura semântica – mesmo depois de um ID é aplicada. Agora, com HTML5, temos acesso aos elementos <header> e <footer>. O mark-up acima pode agora ser substituído por:
<header>
…
</header>
<footer>
…
</footer>
Tente não confundir estes elementos com o header e footer do seu site. Você pode ter vários headers para N elementos em seu site, de acordo com o recipiente. É claro que na maioria das vezes não faz sentido isto, mas não é uma proibição também.
2. Validação de formulários
Validar formularios ficou muito mais intuitivo, simples e rápido! Por sorte eu já fiz um post exclusivo disso aqui.
3. Utilização de hgroup*
* Desde a primeira publicação deste artigo, o elemento hgroup tornou-se inteiramente obsoleto e não deve mais ser usado.
4. O atributo Required
Este já não é grande novidade a todos, mas foi algo que revolucionou a vida de muita gente!
Formulários permitem um novo atributo obrigatório, que especifica, naturalmente, se uma entrada específica é necessária. Depende de sua preferência de codificação, você pode declarar este atributo em uma de duas maneiras:
<input type=”text” name=”someInput” required>
ou
<input type=”text” name=”someInput” required=”required”>
5. O atributo autofocus
Mais uma vez, HTML5 elimina a necessidade de soluções em JavaScript. Se uma determinada entrada deve ser “selecionada”, ou focalizada, por padrão, podemos agora utilizar o atributo autofocus.
<input type=”text” name=”someInput” placeholder=”CodigoSimples” required autofocus>
6. Suporte a áudio
Já não temos que confiar em plugins de terceiros para renderizar áudio. HTML5 oferece agora o elemento <audio>. Bem, pelo menos, em casos comuns, você não terá que se preocupar com esses plugins. Por enquanto, apenas o mais recentes navegadores oferecem suporte para áudio com HTML5 nativo, porém para os tipos de áudios comuns você agora não irá precisar se preocupar.
<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” />
<source src=”file.mp3″ />
<a>Download file.</a>
</audio>
7. Suporte a vídeo
Muito parecido com o elemento <audio>, também, é claro o HTML5 oferece ao suporte nativo ao player de vídeo novos navegadores. A compatibilidade entre codecs, formatos e navegadores ainda é pequena, mas você já consegue rodar arquivos comuns como mp4 com facilidade.
<video controls preload>
<source src=”cohagenPhoneCall.ogv” type=”video/ogg; codecs=’vorbis, theora'” />
<source src=”cohagenPhoneCall.mp4″ type=”video/mp4; ‘codecs=’avc1.42E01E, mp4a.40.2′” />
<p> Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a> </p>
</video>
8 Suportes adicionais a vídeo
O HTML5 ainda possui duas funcionalidades bastante legais quando o assunto é execução de vídeos. Você tem a opçao de utilizar a tag “preload” que simplesmente pré carrega o vídeo ao término do load da página, isso assume que se um vídeo está mais no final da página o usuário já estará carregando o vídeo para assisti-lo. A utilização é bem simples:
<video preload>
Outra funcionalidade legal, são os controles de display. Que habilitam no vídeo uma espécie de “controles” para o usuário fazer controle de volume, adiantar ou atrasar o vídeo,etc. A utilização também é bem tranquila:
<video preload controls>
Por hoje é só! No próximo e último post vamos continuar falando sobre HTML5 e todos os seus recursos que você deveria aprender.
Um grande abraço!
