はじめに

こんにちは。
最近、初めて使った<dl>: 説明リスト要素タグが個人的に万能すぎる！と思ったので、この記事ではそのタグの使い方を紹介したいと思います。

タグの説明は省かせていただきます。
代わりに参考となるリンクを以下に貼りましたので、興味のある方はご覧になってください。

<dl> は HTML の要素で、説明リストを表します。この要素は、一連の用語（<dt> 要素を使用して指定）と説明（<dd> 要素によって提供）をリスト化したものです。一般的な使用例として、用語集の作成やメタデータ（キーと値のペアのリスト）の表示が挙げられます。
引用：MDN

`<dl>`タグを使う場面

<dl>タグは説明リスト要素であるため、用語の説明や情報を伝える場面で使うのがベストだと思います。
例えばWebサイトだと以下のようなシーンが考えられます。

料金表
プロフィール
製品、サービスの仕様
用語集

`<dl>`タグ活用法

それでは実際に<dl>タグを使って料金表を作ってみます。
<dl>タグは、CSSでカスタマイズもできるので、簡単に表を作ることができます。

以下の例は縦軸の料金表になります。
とてもシンプルで見やすく表現できていると思います。
ちなみに<dl> <dt> <dd>タグはブロック要素であるため、縦に並んでいきます。

See the Pen <dl>タグ：料金表1 by 丸山悠希 (@iwdulmiq-the-builder) on CodePen.

※ "Result"ボタンを押すとプレビューが表示されます。

次の例では、料金表をdisplay:flexで横軸に表現してみました。
さらに疑似要素を加えたことで、推奨したいプランを強調しています。

See the Pen <dl>タグ：料金表2 by 丸山悠希 (@iwdulmiq-the-builder) on CodePen.

※ "Result"ボタンを押すとプレビューが表示されます。
※プレビュー画面を0.5xにすると適正に表示されます。

まとめ

<dl>タグを使った表はシンプルかつ柔軟性があります。CSSでカスタマイズすれば、強調したい要素を目立たせたり、アイコンを埋め込むこともできたりと非常に見やすくなります。
また、複雑な表を作りたい時はtableタグ、シンプルな表はdlタグと、必要に応じて使うのも良いアイディアかもしれません。皆さんも参考にしてみてください。
長々とありがとうございました。