JS不要！意外と知られていない便利なHTMLタグ 7選
モダンブラウザの進化により、かつてはJavaScriptを駆使しなければ実装できなかったUIが、HTMLタグ単体で実現できるようになっています。アクセシビリティや保守性の観点からも有効な、実用的かつ少しマイナーなタグを紹介します。
1. アコーディオンを標準機能で：<details> と <summary>
JavaScriptを使わずに「クリックで開閉するUI」を作成できます。
<details>
<summary>詳細を確認する（ここをクリック）</summary>
<p>内部のコンテンツが展開されます。CSSでアニメーションを付けることも可能です。</p>
</details>
-
特徴:
open属性の有無で開閉を管理。 - 利点: ブラウザ標準でキーボード操作（Space/Enter）に対応しており、アクセシビリティが高い。
2. 自由入力＋サジェスト：<datalist>
<input> タグに対し、検索候補（サジェスト）を提示します。
<label for="browser">ブラウザを選択:</label>
<input list="browsers" id="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
-
特徴:
<select>と異なり、リストにない値も自由に入力可能。 - 用途: 検索窓の履歴表示や、タグ入力の補助に最適。
3. モーダルを1行で実装：<dialog>
モーダルウィンドウやダイアログを実装するためのタグです。
<dialog id="favDialog">
<form method="dialog">
<p>これは標準のモーダルです。</p>
<button>閉じる</button>
</form>
</dialog>
<button onclick="favDialog.showModal()">モーダルを開く</button>
-
特徴: JSの
.showModal()を使うと、背景の不活性化（不透明度の適用）やEscキーでのクローズが自動で有効になる。 -
スタイリング:
::backdrop擬似要素で背景（オーバーレイ）の装飾が可能。
4. ルビ（ふりがな）を振る：<ruby>
日本語特有の表現をサポートするタグです。
<ruby>
難読漢字 <rt>なんどくかんじ</rt>
</ruby>
-
構成: 本文を
<ruby>で囲み、読みを<rt>（Ruby Text）で指定。 - 利点: スクリーンリーダーの読み上げ精度の向上に寄与。
5. 意味を使い分けるインジケーター：<progress> と <meter>
どちらもプログレスバーを表示しますが、セマンティクス（意味）が異なります。
<progress value="70" max="100"></progress>
<meter min="0" max="100" low="30" high="80" optimum="50" value="90">High</meter>
-
<progress>: ダウンロードや作業の進捗。 -
<meter>: ディスク使用量、気温、テストの点数など。属性（low,high）によりブラウザ側で色が変わる場合がある。
6. 改行位置をブラウザに提案：<wbr>
「Word Break Opportunity」の略。長い英単語やURLなどで「必要に応じてここで改行してよい」箇所を指定します。
<p>
非常に長いURL：https://example.com/<wbr>long-path-name/<wbr>subpage/<wbr>index.html
</p>
-
利点:
overflow-wrap: break-word;ほど強制的ではなく、文脈的に不自然でない位置での改行を促せる。
7. 計算結果の出力：<output>
フォーム内の計算結果を表示するための専用要素です。
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="10"> +
<input type="number" id="b" value="20"> =
<output name="result" for="a b">30</output>
</form>
-
特徴:
for属性で計算の根拠となる要素のIDを紐付けられる。 - 利点: スクリーンリーダーに対し、動的に変化する結果をセマンティックに伝えられる。
まとめ
やで全てを構築するのではなく、適切なHTML要素を選択することで、以下のメリットが得られます。
- コードの削減: JavaScriptの記述を最小限に抑えられる。
- アクセシビリティ: スクリーンリーダーやキーボード操作への標準対応。
- SEO/保守性: 文書構造が明確になり、メンテナンス性が向上。
プロジェクトの要件に合わせて、積極的に活用していきましょう。