Aqui no início do tutorial, gostaria de salientar mais uma vez que não deve esperar milagres dos elementos apresentados. Visualmente, eles ainda não são muito atraentes. No entanto, são interessantes no sentido de que permitem estruturar seus documentos de forma lógica e semântica.
Áreas de navegação
Através do elemento nav, é possível marcar semanticamente barras de navegação ou outras áreas para elementos adicionais. Este elemento é principalmente destinado a marcar hiperlinks para outras páginas ou informações complementares.
Um exemplo:
<nav> <a href="index.html">Página inicial</a> <a href="html5.html">Aprender HTML5</a> <a href="css.html">CSS</a> <a href="cms.html">Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>
Dentro do nav, você pode usar elementos variados. Portanto, é possível definir a navegação através de listas. No entanto, outros elementos também podem ser facilmente inseridos dentro de nav. O elemento nav também pode aparecer várias vezes dentro de um documento.
Especificar detalhes
Outro elemento interessante é o details. Através dele, é possível fornecer informações adicionais sobre um conteúdo - como o próprio nome do elemento sugere. Note que o elemento details só se torna realmente interessante quando combinado com o elemento summary. Mais sobre este elemento será abordado a seguir.
Primeiramente, um exemplo de uso do details:
<article>
<details>
<summary>Referências do artigo...</summary>
<ul>
<li><a href="referencia1.html">Link 1</a></li>
<li><a href="referencia2.html">Link 2</a></li>
<li><a href="referencia3.html">Link 3</a></li>
</ul>
</details>
<details>
<summary>Fontes do artigo ...</summary>
<ul>
<li><a href="fonte1.html">Link 4</a></li>
<li><a href="fonte2.html">Link 5</a></li>
<li><a href="fonte3.html">Link 6</a></li>
</ul>
</details>
</article>
O conteúdo do elemento details permanece oculto para o visitante até que ele clique no elemento summary contido dentro do details.
Isso pode ser interessante, por exemplo, no contexto de um reprodutor de vídeo. Também aqui vai um exemplo:
<video id="filme" width="320" height="180" autoplay>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
<details open>
<summary>Mostrar/Ocultar controles do reprodutor de vídeo</summary>
<p>
<button id="start" onClick="iniciar()">Iniciar/Pausar</button>
<button id="mudo" onClick="mudo()">Mudo</button>
<button id="aumentar" onClick="aumentar()">Aumentar volume</button>
<button id="diminuir" onClick="diminuir()">Diminuir volume</button>
</p>
</details>
Quando a página é carregada, inicialmente só é possível ver a janela do player.
No entanto, se um visitante clicar no link para mostrar/ocultar, os conteúdos definidos dentro de summary serão exibidos.
De acordo com a especificação, se um elemento summary não for encontrado, os navegadores devem mostrar um conteúdo padrão.
Além disso, o atributo open para details é interessante.
<details open> … </details>
Quando este atributo é definido, o conteúdo do elemento summary é exibido diretamente ao carregar a página.
Sumários
Agora, vamos dar uma olhada mais detalhada no elemento summary.
<article>
<details>
<summary>Referências do artigo...</summary>
<ul>
<li><a href="referencia1.html">Link 1</a></li>
<li><a href="referencia2.html">Link 2</a></li>
<li><a href="referencia3.html">Link 3</a></li>
</ul>
</details>
<details>
<summary>Fontes do artigo ...</summary>
<ul>
<li><a href="fonte1.html">Link 4</a></li>
<li><a href="fonte2.html">Link 5</a></li>
<li><a href="fonte3.html">Link 6</a></li>
</ul>
</details>
</article>
Dentro de summary, o conteúdo não aberto é definido em conexão com details. Graças ao summary, é possível incorporar informações adicionais que só serão exibidas quando necessário.
É claro que também seria possível implementar áreas expansíveis e retráteis facilmente com JavaScript. No entanto, se o JavaScript estiver desativado no navegador, a aplicação não funcionará. Portanto, é desejável um amplo suporte rápido para os elementos details e summary.
Áreas marginais e marginalias
Informações adicionais, marginalias, referências cruzadas, etc., podem ser designadas em HTML5 com o elemento aside. O conteúdo assim designado está contextualizado com todo o documento, mas não é diretamente relacionado a ele.
Por favor, observe que na especificação do HTML5 não está definida qual dimensão deve ser usada para uma área designada com aside. Portanto, o conteúdo do aside poderia ser exibido, por exemplo, como marginalia ou como barra lateral.
O exemplo abaixo mostra a definição de uma área aside.
<body>
<header>
<h1>PSD-Tutorials.de</h1>
</header>
<article>
<h2>Criando Web Apps (Parte 10): jQuery mobile (2)</h2>
<p>>Neste tutorial, a primeira página jQM real é criada. A premissa para isso é a estrutura HTML básica que vocês já conhecem.</p>
<aside>
<h3>>Leituras adicionais</h3>
<ul>
<li><a href="#/fn1">>Saiba mais informações...</a></li>
</ul>
</aside>
</article>
<aside>
<nav>
<h2>Navegação</h2>
<ul>
<li><a href="#">Página inicial</a></li>
<li><a href="# ">Contato</a></li>
</ul>
</nav>
</aside>
</body>Adicionando horários
Horários podem ser destacados usando o novo elemento time. A peculiaridade deste elemento é que os horários são legíveis tanto por humanos quanto por máquinas.
Os horários são inseridos no elemento time para os humanos. Para dar aos navegadores a chance de também interpretar as informações de tempo, é utilizado o atributo datetime no elemento time.
<p>Nos encontramos em <time datetime="2014-04-15 19:00">15 de abril às 19h</time>. </p>
Neste ponto, reforçamos que nos navegadores atuais isso não terá inicialmente nenhum impacto visual, mas é exclusivamente destinado a tornar as informações de tempo legíveis para máquinas.
Destacando textos
Com o elemento mark, é possível destacar palavras ou passagens de texto. Na especificação do HTML5, é enfatizado que o elemento deve ser usado apenas em textos. Além disso, é necessário que esteja em uma relação específica com o contexto.
Um exemplo:
<p>Neste tutorial, a primeira página jQM real é criada. A premissa para isso é a estrutura HTML básica que vocês já conhecem.</p>
Como o destaque será implementado pelos navegadores não é especificado.
O Google Chrome e o Firefox usam um fundo amarelo para isso, no entanto.
Designando diálogos
O HTML5 também contempla a marcação de diálogos. Para isso, existe o elemento dialog. Atualmente, o elemento dialog é suportado apenas pelo Safari e pelo Google Canary, ou seja, a versão de desenvolvedor do navegador.
Aqui está um exemplo:
<dialog id="dialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p>Este é o conteúdo da caixa.</p>
<button id="hide">Fechar</button>
</dialog>
<button id="show">Mostrar conteúdo</button>
</div>
<script type="text/JavaScript">
(function() {
var dialog = document.getElementById('dialog');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('hide').onclick = function() {
dialog.close();
};
})();
</script>
Ao clicar no botão, o diálogo será exibido. Para que isso funcione, no exemplo anterior foi utilizada uma combinação de HTML5, CSS e JavaScript.
