Elementos HTML adicionais

Nas atividades anteriores, você aprendeu:

  • Noções básicas de tags e elementos HTML.
  • Como estruturar uma página da Web.
  • HTML semântico e práticas recomendadas

Com este artigo, você continuará a ampliar seus conhecimentos sobre HTML e abordar outros elementos HTML.

<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>

Esses elementos auxiliam a criação de conteúdo de texto e adicionam estrutura, estilo e significado. Há vários conteúdos de texto que podem incorporar os seguintes elementos.

O elemento de aspas

<blockquote cite="https://www.goodreads.com/quotes">
    <p>Be the change that you wish to see in the world.</p>
</blockquote>

Este exemplo mostra como usar o elemento <blockquote>, apresentando uma frase famosa de Mahatma Gandhi. Existem tantas citações incríveis por aí que fornecem conteúdo e significado memoráveis. Pense em algumas de suas figuras inspiradoras favoritas e suas citações.

Use o elemento <blockquote> ao usar aspas e referenciar informações de uma fonte. O elemento <blockquote> cria um recuo e um alinhamento exclusivos na apresentação e usa uma tag de abertura e fechamento. Uma <blockquote> é especialmente útil ao usar aspas mais longas que cobrem várias linhas de texto.

Também é possível usar vários elementos em um <blockquote>, como um cabeçalho, um parágrafo ou uma lista.

O elemento <details>

<details>
   <summary>Details</summary>
   Additional Information
</details>

Muitas vezes, uma página da web terá uma seção de perguntas frequentes e informações adicionais que estão disponíveis para o usuário. Há seções de perguntas frequentes que são comuns para informações de produtos, itinerários de viagem ou qualquer tipo de cenário de perguntas e respostas.

O elemento <details> é útil por usar um widget de divulgação que contém informações adicionais. O elemento inclui uma funcionalidade de alternância integrada, e o usuário pode abrir e fechar o botão. Quando o botão é aberto, o conteúdo com mais informações se expande e pode ser lido pelo usuário. Quando o botão é fechado, o conteúdo de informações adicionais fica oculto para o usuário. Para nomear o widget <details>, use o elemento <summary>.

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
     alt="Google logo">
  <figcaption>Google logo</figcaption>
</figure>

Este é o elemento <figure> em ação. Aqui, é possível observar que <figure>, usado com o elemento <figcaption>, pode ser usado para melhorar a experiência visual.

Você vê imagens por toda a Web, além de outros dados visuais úteis o tempo todo. Elementos visuais ajudam a chamar a atenção do visitante e criar uma ótima experiência do usuário. O elemento <figure> é uma maneira de rotular uma imagem, uma tabela, um gráfico etc. Ele cria um conteúdo independente em relação ao conteúdo principal.

O elemento <time>

<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>

O elemento <time> fornece significado e significado semântico, permitindo uma funcionalidade melhor com atividades como agendamento de um horário on-line, publicação de uma data e hora para um artigo do blog, arquivos etc. Alguns exemplos de sites que usam o elemento <time> incluem o uso do Google Agenda, a publicação de um artigo ativo em uma plataforma ou a leitura de arquivos históricos on-line em um site de biblioteca.

O elemento <time> faz referência ao tempo e pode representar a hora de um relógio de 24 horas ou uma data específica que pode ser ajustada para fuso horário e local. Esse elemento requer uma tag de abertura e fechamento, <time> e </time>. É possível adicionar o atributo datetime para que as datas possam ser lidas em um formato legível por máquina.

Metadados do documento

<title>Sarah's Favorite Food Recipes</title>

Sempre que você digita o URL de um site, há um nome <title> que pode ser lido na barra do navegador ou na guia da página da Web. É o nome do título dado a uma página da Web. Esse elemento é importante e é usado por um mecanismo de pesquisa para exibir uma lista de páginas da Web relacionadas nos resultados da pesquisa. O tamanho do título pode variar de curto e descritivo a mais longo e mais descritivo.

Cenário: você está pensando em uma página da Web, mas não consegue se lembrar do URL específico do site. Digite as palavras-chave em um mecanismo de pesquisa. O mecanismo de pesquisa ajuda a rastrear a página da Web que você está procurando e permite que o nome <title> apareça na pesquisa.

Elementos de conteúdo incorporados

Além do conteúdo de texto, há uma variedade de elementos de conteúdo adicionais a serem usados.

O elemento <iframe>

<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>

Quando você conclui as compras on-line e clica na opção de pagamento, como PayPal ou Apple Pay, esses recursos geralmente são adicionados a uma página da Web com um <iframe>. Ver um mapa on-line para pesquisar uma empresa local é outra experiência comum. Esses tipos de experiência do usuário em uma página da Web podem ser adicionados com um iframe. No exemplo acima, você vê o URL da Wikipédia dentro de um iframe, intitulado como "Wikipédia".

O elemento <iframe> permite inserir conteúdo de outra fonte e incorporar um frame em uma página da Web. Ele cria uma moldura retangular e exibe o conteúdo no navegador. Um frame permite a apresentação de um layout em formato de janela dentro de um elemento <iframe>. É uma maneira eficiente de adicionar conteúdo à sua página da Web para melhorar a experiência.

Elementos do formulário

<progress max="100" value="30"> 30% </progress>

Ter uma barra de progresso visual pode ajudar você a acompanhar seu progresso ao assistir a um vídeo mais longo, uma aula ou ao preencher uma inscrição extensa. O elemento <progress> é útil para esses tipos de cenários.

Esse elemento é representado por uma barra visual com uma cor de plano de fundo. A barra visual pode variar em tamanho e cor de fundo. Com a barra de progresso, você tem a opção de usar os atributos max e value. O atributo max define o número do ponto flutuante, e o value registra o progresso em uma tarefa.

Criação dos roteiros

<canvas id="canvas"></canvas>

Para poder desenhar gráficos e animações em tempo real, use o elemento <canvas>. Coloque o elemento <canvas> na sua página HTML da Web para criar uma tela. Este elemento requer código JavaScript para que a funcionalidade desenhe e crie gráficos.

Elementos do conteúdo da tabela

<table>
    <thead>
        <tr>
            <th colspan="2">Grocery List</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Broccoli</td>
            <td>Quantity: 2</td>
        </tr>
    </tbody>
</table>

O elemento <table>

O elemento <table> cria uma tabela. Este é o ponto de partida para adicionar outros elementos com linhas e colunas. As tabelas aparecem com frequência em páginas da Web, sendo uma forma útil de organizar e mostrar informações. Um caso de uso para usar o elemento <table> é apresentar informações tabulares ao usuário, como o tipo de informação que você pode encontrar em uma planilha.

O elemento <th>

O elemento <th> é o cabeçalho de um grupo de células.

O elemento <tr>

O elemento <tr> define uma linha de células em uma tabela. A partir daqui, você pode adicionar dados específicos da célula.

O elemento <td>

O elemento <td> cria a célula e adiciona o conteúdo necessário.

Conclusão

Neste artigo, você descobriu elementos HTML adicionais e desenvolveu suas habilidades de programação. Você aprendeu mais sobre conteúdo, texto inline, conteúdo incorporado e elementos de tabela. Agora você aprendeu mais sobre os elementos HTML adicionais. Continue fazendo um bom trabalho.