Ele ainda está em faze de teste, mas os navegadores mais atuais já tem suporte ao HTML5, portanto, na hora de criar algum site já podemos ir o utilizando.
Por isso vou mostrar algumas novidades; novas tag's, além de formas de usa-las. E em um outro post mostrarei a sua estrutura semântica.
Vou mostrar algumas das novas tag's e como usa-las.
- <audio> Define um player de áudio. São tres formatos de audio suportando pela tag: Mp3, Wav e Ogg. Porém apenas o Chrome tem suporte para os três. Portando seria necessário colocar mais de um formato para que rode em outros navegadores.
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> </audio>
- <canvas> Com essa nova tag podemos desenhar graficos. Na verdade ela é o espaço para desenhar, pois o desenho será gerado por script(geralmente é usando o JavaScript).
<canvas id="myCanvas" width="200" height="200" style="background:#ff0000">
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
</script>
- <meter> Possível criar uma barra de medida com essa tag.
Obs: Não é suportada pelo IE.
<meter value="2" min="0" max="10">2 de 10</meter><br> <meter value="0.6">60%</meter>
- <progress> Cria uma progressbar, sendo possível especificar o valor e o valor máximo.
Obs: Não é suportada pelo IE.
<progress value="22" max="100"></progress>
- <output> Representa o resultado de um cálculo (como uma realizada por um script).
Obs: Não é suportada pelo IE.
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form>
- <video> Está tag especifica um vídeo. Suporta os formatos: MP4, WebM, e Ogg.
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video>
- <track> Essa tag epecifica faixas de texto para as tags de audio e video. Usado para definir legendas.
<video width="320" height="240" controls> <source src="forrest_gump.mp4" type="video/mp4"> <source src="forrest_gump.ogg" type="video/ogg"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> </video>
Aqui, quis trazer apenas algumas tags, as que achei interessante e que poderiam ser bem usadas.
Em algum outro post, como já disse, irei mostrar a estrutura semântica usando o HTML5, que mudou, na minha opinião, para melhor. E fará os buscadores entenderem melhor seu site, e assim, mostrar com maior relevância caso tenha algo relacionado ao assunto pesquisado.
É possível testar todas as tag's usando o navegador Chrome, então mãos à massa.
Blogger Comment
Facebook Comment