DEV Community

Cover image for Tags HTML que você precisa conhecer e Dicas do VS Code.
Douglas Toledo
Douglas Toledo

Posted on

6 2

Tags HTML que você precisa conhecer e Dicas do VS Code.

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>
Enter fullscreen mode Exit fullscreen mode

O resultado é um Menu que ao clicarmos exibe 3 links (Google, Bing e DuckDuckGo):

Alt Text

Se tivermos um conteúdo logo abaixo, ele será "empurrado" ou "puxado" quando clicarmos no Menu, veja um exemplo:

Alt Text


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>
Enter fullscreen mode Exit fullscreen mode

O resultado é:
Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

O resultado é um player de vídeo:
Alt Text

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>
Enter fullscreen mode Exit fullscreen mode
*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.

Alt Text

O resultado é:

Alt Text


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">
Enter fullscreen mode Exit fullscreen mode

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 é:

Alt Text


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)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay