Elementos HTML que você talvez não conheça

Desde que criei uma biblioteca de compoentes chamada Taslonic, venho descobrindo o quanto o HTML é nativamente mais poderoso do que eu imaginava. O quanto é versátil. O quanto é intrisicamente integrado ao sistema operacional de qualquer dispositivo. Em breves palavras, o quanto essa tecnologia, não raro menosprezada, pode alavancar a nossa produtividade nos poupando de escrever centenas de linhas de código.

Veja a seguir alguns elementos nativos do HTML aos quais você talvez não tenha sido apresentado ainda.

Details

Revela informações ou controles adicionais.

<details>
  <summary>
    Detalhes da Transação
  </summary>
  <dl>
    <dt>Descrição:</dt>
    <dd>
      Licença vitalícia | 
      <a
        href="https://typenik.compilorama.com/" 
        rel="noreferrer noopener"
        target="_blank"
      >
        Typenik
      </a>
    </dd>
    <dt>Data:</dt>
    <dd>29 de Abril de 2023</dd>
    <dt>Preço:</dt>
    <dd>$9</dd>
  </dl>
</details>

Edite esse código. Documentação do Details.

Dialog

Representa o estado transitório de um aplicação, na forma de uma pequena janela (caixa de diálogo), com a qual o usuário interaje a fim de executar uma tarefa simples ou obter alguma informação. Uma vez que a tarefa é concluída ou a informação é obtida, o elemento pode ser fechado automaticamente pela aplicação, ou fechado manualmente pelo usuário.

<button onclick="nativeDialog.showModal()">
  Abrir Dialog
</button>
<dialog id="nativeDialog">
  <p>Diálogo HTML Nativo</p>
  <form method="dialog">
    <button type="submit">Fechar</button>
  </form>
</dialog>

Edite esse código. Documentação do Dialog.

Math

Usado para expressar notações matemáticas e peenchido com um conjunto específico de elementos de marcação especificados pela MathML (Mathematical Markup Language).

<math>
  <mi>x</mi>
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mo>-</mo>
      <mi>b</mi>
      <mo>±</mo>
      <msqrt>
        <msup>
          <mrow>
            <mi>b</mi>
          </mrow>
          <mn>2</mn>
        </msup>
        <mo>-</mo>
        <mi>4</mi>
        <mi>a</mi>
        <mi>c</mi>
      </msqrt>
    </mrow>
    <mrow>
      <mi>2</mi>
      <mi>a</mi>
    </mrow>
  </mfrac>
</math>

Edite esse código. Documentação do Math.

Meter

Representa a medida corrente dentro de uma variação de valores pré determinados. Por exemplo, consumo de armazenamento, intervalo de confiança estatística, desempenho, entre outros casos.

<label for="fuel">
  Nível de Combustível
</label>
<meter
  id="fuel"
  min="0"
  max="100"
  low="10"
  high="80"
  optimum="85"
  value="50"
>
  em 50/100
</meter>

Edite esse código. Documentação do Meter.

Progress

Representa o estado atual relacionado ao progresso de uma atividade.

<label for="reviewedArticles">
  Artigos revisados
</label>
<progress
  id="reviewedArticles"
  min="0"
  max="100"
  value="70"
>
  70%
</progress>

Edite esse código. Documentação do Progress.

HTML é uma tecnologia envolvente, tem evoluído rapidamente e, acima de tudo, tem me mostrado que já pode estar disponível há um bom tempo, aquele componente que eu pensaria em construir do zero.