TIL: the <dl> HTML element

After many years being online and both consuming and creating websites in HTML roday I learned about the <dl> HTML element.

By using the <dt> - Description Term element and <dd> - Description Details element you provide a list of key-value pairs where the latter describes the former.

I used it in the "Current Setup" section in the sidebar. Here is a code snippet:

<h3><img src="/theme/img/desktop.svg" alt="Desktop" class="badge">Desktop:</h3>
<dl>
    <dt>CPU:</dt>
    <dd>AMD Ryzen 9 9950X3D</dd>
    <dt>Memory:</dt>
    <dd>64GB Kingston DDR5</dd>
    <dt>GPU:</dt>
    <dd>AMD Radeon RX 9070 XT</dd>
    <dt>Case:</dt>
    <dd>Fractal Design North</dd>
    <dt>Cooling:</dt>
    <dd>Noctua</dd>
</dl>

<h3><img src="/theme/img/server.svg" alt="Server" class="badge">Home Server:</h3>
<dl>
    <dt>CPU:</dt>
    <dd>AMD Ryzen 5 2600</dd>
    <dt>Memory:</dt>
    <dd>8GB Kingston DDR4</dd>
    <dt>GPU:</dt>
    <dd>Nvidia GeForce GTX 1050ti (offline)</dd>
    <dt>Case:</dt>
    <dd>Coolermaster</dd>
    <dt>Cooling:</dt>
    <dd>be quiet!</dd>
</dl>
TIL