【HTML】知っておくと表現が広がる！特殊・マイナーだけど便利なタグまとめ

HTMLには、普段あまり使わなくても、特定のシーンで抜群の便利さを発揮する「特殊なタグ」や「マイナーなタグ」が数多く存在します。これらを使うことで、JavaScriptに頼らずに機能を実装できたり、アクセシビリティを高めたりすることができます。

今回は、覚えておくとコーディングの幅が広がる便利な特殊タグを備忘録としてまとめました。

1. アコーディオン（開閉メニュー）を自作する <details> と <summary>

JavaScriptを使わずに、HTMLだけで「クリックすると詳細が開く」アコーディオンUIを実装できるタグです。

<details>
  <summary>よくある質問：送料はいくらですか？</summary>
  <p>全国一律で500円（税込）となります。5,000円以上のお買い上げで無料になります。</p>
</details>

<details>
  <summary>よくある質問：送料はいくらですか？</summary>
  <p>全国一律で500円（税込）となります。5,000円以上のお買い上げで無料になります。</p>
</details>

右の▲マークをクリックすると、詳細が表示される。

• <details>: 開閉するエリア全体を囲みます。open 属性を付与すると最初から開いた状態にできます。
• <summary>: 最初から表示しておく「見出し（タイトル）」を指定します。クリックすると直後のコンテンツが展開します。

2. 検索候補のリストを表示する <datalist>

input タグの入力欄に、検索候補（サジェスト）のドロップダウンリストを紐付けることができるタグです。

<label for="browser">使いのブラウザを選択：</label>
<input type="text" id="browser" list="browsers">

<datalist id="browsers">
  <option value="Google Chrome">
  <option value="Mozilla Firefox">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

<label for="browser">使いのブラウザを選択：</label>
<input type="text" id="browser" list="browsers">

<datalist id="browsers">
  <option value="Google Chrome">
  <option value="Mozilla Firefox">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

• ポイント: input の list 属性と、datalist の id 属性の値を一致させることで紐付けます。ユーザーが自由に入力することも、候補から選ぶこともできるため、非常にユーザーフレンドリーです。

3. レートや進捗を視覚化する <meter> と <progress>

どちらもバー（インジケーター）で数値を視覚的に表すタグですが、意味合いが異なります。

① <progress>（タスクの進捗状況）

ダウンロードの進行状況や、フォーム入力のステップなど「完了に向けた進捗」を表します。

<label for="file-progress">ファイルアップロード中：</label>
<progress id="file-progress" max="100" value="70">70%</progress>

<label for="file-progress">ファイルアップロード中：</label>
<progress id="file-progress" max="100" value="70">70%</progress>

② <meter>（特定の範囲内での割合・量）

ディスクの使用量、テストの点数、投票率など「ある範囲内における現在の値」を表します。

<label for="disk-usage">ディスク残り容量：</label>
<meter id="disk-usage" min="0" max="100" low="30" high="80" optimum="15" value="25">低い</meter>

<label for="disk-usage">ディスク残り容量：</label>
<meter id="disk-usage" min="0" max="100" low="30" high="80" optimum="15" value="25">低い</meter>

• ポイント: low（低いとみなす境界）や high（高いとみなす境界）を指定することで、値に応じてブラウザ標準のバーの色が緑・黄・赤などに変化します。

4. テキストに特殊な意味を持たせるセマンティックタグ

文章の一部分を囲むことで、ブラウザや検索エンジンに特殊な意味を伝えるインライン要素です。

① ルビ（ふりがな）を振る <ruby>

日本語の難読漢字や、海外の言葉に読み方を付けたいときに使用します。

<ruby>
  漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
  字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

<ruby>
  漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
  字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

• <rt>: ルビ（ふりがな）のテキストを指定します。
• <rp>: ルビ非対応の古いブラウザでのみ表示されるカッコ () を指定します。

② 引用元を示す <blockquote> と <cite>

他のサイトや書籍から文章を引用する際に使用します。

<blockquote cite="https://example.com/source">
  <p>ここに引用した文章が入ります。正しいマークアップはSEOにも好影響を与えます。</p>
  <p>引用元：<cite>HTML標準仕様ガイド</cite></p>
</blockquote>

<blockquote cite="https://example.com/source">
  <p>ここに引用した文章が入ります。正しいマークアップはSEOにも好影響を与えます。</p>
  <p>引用元：<cite>HTML標準仕様ガイド</cite></p>
</blockquote>

• <blockquote>: 引用文全体を囲むブロック要素。cite 属性に引用元のURLを記述します（画面には表示されません）。
• <cite>: 作品のタイトルや、引用元の名前を示すインライン要素です。通常は斜体（イタリック）で表示されます。

まとめ

普段使いするタグではありませんが、「ここぞ」という場面で適切な特殊タグを選択できると、ソースコードがすっきりと美しくなり、アクセシビリティの向上にも繋がります。引き出しの一つとして記憶に留めておきたい仕様です。