Vamos percorrer uma lista de 20 tags HTML5, umas bem conhecidas, outras muito menos, com a respetiva compatibilidade com os navegadores Chrome, Firefox, Safari e Internet Explorer.
8 tags de estrutura
Em geral, estas tags servem sobretudo para facilitar a leitura do teu site pelos motores de busca.
<article>– Define o lugar de um artigo, de um comentário de blogue ou de fórum, costuma ser composto por um título e um parágrafo.<section>– Define uma secção que representa um tema. Um<article>pode ser composto por vários temas (<section>), e o inverso também é verdade. Também é composta por um título e uma introdução, e pode receber uma etiqueta através do atributoaria-label.<aside>– Define uma secção que fica ao lado do conteúdo principal, ideal para colocar as sidebars ou os blocos de publicidade.<figure>– Figure é um contentor que funciona com a tag<figcaption>: figure mostra uma imagem ou um vídeo seguidos de uma legenda (<figcaption>).<footer>– Define o lugar do rodapé da página.<header>– Define o lugar do cabeçalho da página.<hgroup>– Uma tag que permite agrupar vários títulos (<h1> a <h6>).<nav>– Representa uma secção com ligações. É usada com frequência no<header>para o menu principal, ou no<footer>para as menções legais, etc.
4 tags de media
<video>– Mostra um leitor de vídeo em HTML5, a origem do vídeo indica-se com o atributosrc.<audio>– O mesmo que a tag anterior, mas apenas para um ficheiro de áudio.<picture>– A menos conhecida, porque em alguns navegadores ainda é experimental. A tag<picture>permite declarar várias<source>destinadas a um elemento<img>, o navegador escolhe depois a imagem mais adequada em função da resolução.<source>– Define diferentes origens de ficheiros de media, usa-se com<video>,<audio>e<picture>.
8 tags funcionais
<details>– Anda a par com<summary>, esta tag define um conteúdo que se abre e fecha.
Alguns detalhes
Mais informação sobre os detalhes.
<dialog>– Dialog é uma janela modal nativa em HTML5.Exemplo da Mozilla –
<embed>– A tag embed serve de contentor para mostrar recursos externos. Foi muito usada para mostrar Flash e também SVG, ainda que hoje se prefiram outros métodos.<mark>– Permite destacar texto.<meter>– Representa um medidor entre dois valores fixos.Exemplo da Mozilla –
por Damien Flandrin (@dam62500) no CodePen. <progress>– Semelhante a<meter>, mas representa uma percentagem de progresso.Exemplo da Mozilla – por Damien Flandrin (@dam62500) no CodePen.
<time>– Representa uma data de forma semântica e aceita o atributodatetime.html<p>Le concert a eu lieu le<time datetime="2001-05-15T19:00">15 Mai</time>.</p><wbr>– Uma das tags menos conhecidas do HTML5, mas útil:<wbr>indica ao navegador que pode quebrar a linha nesse ponto se for preciso.
···
Estas tags partem do princípio de que as bases da linguagem já estão adquiridas.
