HTMLはウェブページを構築するための基盤で、一般的に使われるタグはよく知られています。しかし、実際にはあまり注目されていないけれど、便利で強力なタグもたくさんあります。今回は、あまり知名度のないけれど知っておくと便利なHTMLタグを紹介し、その使い方とメリットを解説します。

1. <details> と <summary>

使い方： これらのタグは、ユーザーがクリックして詳細情報を表示/非表示にできるインタラクティブな要素を作成するために使用します。

<details>
  <summary>詳細情報</summary>
  <p>ここに詳細な内容を入れます。クリックで表示されます。</p>
</details>

サンプル：

メリット： - 簡単なインタラクションを実現できるため、ユーザー体験が向上します。
- JavaScript不要で詳細情報を隠す/表示することができ、軽量で効率的です。

2. <mark>

使い方： <mark>タグはテキストの一部をハイライト表示（強調）するためのタグです。特に検索結果などで目立たせたい部分に使います。

<p>このページの中で <mark>重要なキーワード</mark> をハイライトしています。</p>

サンプル：このページの中で 重要なキーワード をハイライトしています。

メリット： - SEOに効果的: 強調した部分は検索エンジンにとって重要な情報と認識されやすくなります。
- ユーザーが注目すべき部分を視覚的に強調できます。

3. <progress>

使い方： <progress>タグは、進行状況を示すプログレスバーを表示するために使用します。特にファイルアップロードや長時間処理を伴う操作に便利です。

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

サンプル：70%

メリット： - ユーザーに進捗状況を視覚的に表示でき、操作中のストレスを軽減します。
- JavaScriptなしで簡単に進捗バーを表示できます。

4. <samp>

使い方： <samp>タグは、コンピュータプログラムの出力結果を表示するために使用されます。プログラムの実行結果やコマンド出力に使います。

<p>プログラムの結果は <samp>Success</samp> でした。</p>

サンプル：プログラムの結果は Success でした。

メリット： - コードやプログラム出力を明確に区別できるので、技術的なコンテンツを作成する際に便利です。

5. <dfn>

使い方： <dfn>タグは、用語や概念の定義を示すためのタグです。特に定義が必要な技術的な用語や新しい用語に使います。

<p><dfn>HTML</dfn> はウェブページを作成するためのマークアップ言語です。</p>

サンプル：HTML はウェブページを作成するためのマークアップ言語です。

メリット： - 用語の定義を明示的に示せるため、検索エンジンがそのページのコンテンツを正しく解釈します。

6. <var>

使い方： <var>タグは、数式やプログラム内の変数を示すためのタグです。数式やコマンド内で変数を表現する際に使用します。

<p>次の数式の変数 <var>x</var> の値を求めなさい。</p>

サンプル：次の数式の変数 x の値を求めなさい。

メリット： - 数式やプログラム内で変数を明示的に表示でき、内容がより理解しやすくなります。

7. <code>

使い方： <code>タグは、コンピュータコードを表示するために使います。プログラミング関連の記事やチュートリアルでよく使用されます。

<p>以下のコードを実行してみてください: <code>console.log('Hello, World!');</code></p>

サンプル：以下のコードを実行してみてください: console.log('Hello, World!');

メリット： - プログラムコードを正しく表示できるため、技術的な解説が必要な場合に非常に便利です。

8. <kbd>

使い方： <kbd>タグは、ユーザーが入力するキーボード操作を示すために使用します。ショートカットキーやコマンド入力を示す際に使います。

<p>ファイルを保存するには <kbd>Ctrl</kbd> + <kbd>S</kbd> を押してください。</p>

サンプル：ファイルを保存するには Ctrl + S を押してください。

メリット： - キーボード操作を視覚的に強調できるため、ユーザーにとって直感的に理解しやすくなります。

9. <s>

使い方： <s>タグは、取り消し線を表示するためのタグです。価格変更や訂正を示す際に便利です。

<p>価格: <s>1000円</s> 800円</p>

サンプル：価格: 1000円 800円

メリット： - 変更履歴や修正内容を表示する際に役立ちます。例えば、値段が変更された場合などに便利です。

10. <bdi>

使い方： <bdi>タグは、異なる方向のテキストを適切に表示するために使用します。特に右から左（RTL）の言語と左から右（LTR）の言語が混在する場合に役立ちます。

<p>商品番号: <bdi>12345</bdi></p>

サンプル：商品番号: 12345

メリット： - 方向性が異なるテキストが含まれている場合でも、正しく表示できるため、国際化対応が向上します。

終わりに

HTMLは日々進化しており、知名度が低いものの非常に便利なタグがたくさんあります。これらのタグを活用することで、アクセシビリティが向上したり、SEOに効果的だったり、ユーザー体験を改善したりすることができます。ぜひ、次回のプロジェクトでこれ