Agora que você já viu [...]
- as principais tags e;
- tabelas e;
- formulários em HTML.
[...] chegou a hora daquelas tags pouco conhecidas, mas que você precisa conhecer!
Tag <details>
Quando usada com a tag <summary> faz com que um conteúdo escondido seja exibido ao clicar no elemento summary. Se clicar novamente, o conteúdo é escondido. E o melhor, sem precisar de JavaScript!
Podemos criar drop-menu com essa funcionalidade. Olha só que legal!
<details>
<summary>Menu</summary>
<a href="https://google.com/" target="_blank">Google</a><br>
<a href="https://bing.com/" target="_blank">Bing</a><br>
<a href="https://duckduckgo.com/" target="_blank">DuckDuckGo</a>
</details>
O resultado é um Menu que ao clicarmos exibe 3 links (Google, Bing e DuckDuckGo):
Se tivermos um conteúdo logo abaixo, ele será "empurrado" ou "puxado" quando clicarmos no Menu, veja um exemplo:
Tag <source> com a tag <audio>
Você sabia que cada navegador tem preferência por um determinado tipo de audio? O navegador Safari da maça por exemplo, adora o audio ogg!
Então vamos dar aos navegadores o que eles querem para evitar que seu conteúdo não fique disponível para o usuário, segue um exemplo:
<audio controls>
<source src="./sound.mp3" type="audio/mpeg">
<source src="./sound.ogg" type="audio/ogg">
Seu navegador não suporta a tag de audio.
</audio>
O resultado é:
O navegador irá mostrar a mensagem "Seu navegador não suporta a tag de audio." caso não consiga carregar nenhuma opção de arquivo de áudio.
Tag <source> com a tag <video>
Semelhante ao audio:
<video controls>
<source src="./video.mp4" type="video/mp4">
<source src="./video.mov" type="video/mov">
Seu navegador não suporta a tag de vídeo.
</video>
O resultado é um player de vídeo:
O navegador irá mostrar a mensagem "Seu navegador não suporta a tag de vídeo." caso não consiga carregar nenhuma opção de arquivo de vídeo.
Encontrei uma explicação mais detalhada sobre os formatos de audio e vídeos compatíveis nos navegadores, recomendo a leitura: MDN Web Docs - Formatos de mídia suportados por elementos HTML de áudio e vídeo
Tag <picture>
Você sabia que é possível deixar suas imagens mais responsivas* só com HTML e sem usar CSS? Usamos a tag picture da seguinte maneira:
<picture>
<source media="(min-width: 512px)" srcset="./512.jpg">
<source media="(min-width: 256px)" srcset="./256.jpg">
<img src="./150.jpg" alt="">
</picture>
*carregar uma imagem de menor resolução para telas menores e carregar uma imagem com resolução maior para telas maiores.
Explicando:
- se a tela é maior que 512px, o HTML irá carregar "512.jpg";
- se a tela é entre 256px e 512px, o HTML irá carregar "256.jpg";
- se a tela é menor que 256px, será carregado "150.jpg".
- a ordem é muito importante, sempre do maior tamanho de tela ao menor, caso contrário, não irá funcionar muito bem.
O resultado é:
Tag <dl>
Existem as listas ordenadas <ol> e as listas não ordenadas <ul>. Mas você sabia que existe uma lista de descrições <dl>? Geralmente essa lista é usada em glossários. Vamos ao exemplo de código:
<h2>Filmes do Harry Potter:</h2>
<dl>
<dt>Harry Potter e a Pedra Filosofal (2001)</dt>
<dd>Descrição do 1º filme.</dd>
<dt>Harry Potter e a Câmara Secreta (2002)</dt>
<dd>Descrição do 2º filme.</dd>
<dt>Harry Potter e o Prisioneiro de Azkaban (2004)</dt>
<dd>Descrição do 3º filme.</dd>
<dt>Harry Potter e o Cálice de Fogo (2005)</dt>
<dd>Descrição do 4º filme.</dd>
<dt>Harry Potter e a Ordem da Fênix (2007)</dt>
<dd>Descrição do 5º filme.</dd>
<dt>arry Potter e o Enigma do Príncipe (2009)</dt>
<dd>Descrição do 6º filme.</dd>
<dt>Harry Potter e as Relíquias da Morte: Parte 1 (2010)</dt>
<dd>Descrição do 7º filme.</dd>
<dt>Harry Potter e as Relíquias da Morte: Parte 2 (2011)</dt>
<dd>Descrição do 8º filme.</dd>
</dl>
<img src="./harry-potter-movies.png" alt="Capas de todos os filmes do Harry Potter">
No código acima, temos uma lista <dl> envolvendo todos os filmes do Harry Potter:
- cada título de filme está na tag <dt> description term;
- cada descrição do filme está na tag <dd> descriptions.
O resultado é:
O post já está ficando grande e ainda tenho tags interessantes para te mostrar! Então vamos chamar esse post de Parte 1 e vou fazer em breve a Parte 2 para vocês!
Parabéns!!!
Fico muito feliz que chegou até o final dessa publicação.
Espero que você tenha aprendido muito!
Quer aprender mais?
Te convido a visitar e seguir o meu canal lá na Twitch: https://www.twitch.tv/dwtoledo.
Lá a gente faz muitas lives de front-end e tem uma playlist muito legal sobre conceitos de HTML!
Top comments (0)