HTML elements you might not know

Since I created a component library called Taslonic, I have been discovering how native HTML is more powerful than I imagined. How versatile it is. How harmonious is its integration to the operating system of any device. In brief words, how much this technology, often underestimated, can leverage our productivity by saving us from writing hundreds of lines of code.

See below some native HTML elements which you might not have been introduced to yet.

Details

It disclosures additional information or form controls.

<details>
  <summary>Transaction details</summary>
  <dl>
    <dt>Descriptions:</dt>
    <dd>
      Lifetime license | 
      <a href="https://typenik.compilorama.com/" rel="noreferrer noopener" target="_blank">
        Typenik
      </a>
    </dd>
    <dt>Date:</dt> <dd>Apr 29, 2023</dd>
    <dt>Price:</dt> <dd>$9</dd>
  </dl>
</details>

Edit this code. Docs for Details.

Dialog

It is a temporary component of an application which users interact with to carry out a specific task or obtain information. When the user is finished, the dialog box can either be automatically closed by the application or manually closed by the user.

<button onclick="nativeDialog.showModal()">
  Open Dialog
</button>
<dialog id="nativeDialog">
  <p>Native HTML Dialog</p>
  <form method="dialog">
    <button type="submit">Dismiss</button>
  </form>
</dialog>

Edit this code. Docs for Dialog.

Math

It is used to express mathematical notations and is filled with a set of especific elements specified by the 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>

Edit this code. Docs for Math.

Meter

It represents the current measure within a known range. For example, storage usage, statistical confidence interval, performance, among other cases.

<label for="fuel">Fuel level</label>
<meter
  id="fuel"
  min="0"
  max="100"
  low="10"
  high="80"
  optimum="85"
  value="50"
>
  at 50/100
</meter>

Edit this code. Docs for Meter.

Progress

It represents the completion progress of a task.

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

Edit this code. Docs for Progress.

HTML is an involving technology, evolves rapidly and, above all, it has shown me that may be already available some component I'd start to implement from scratch.