タイトル: その他の要素
SEOタイトル: HTML5 の「その他」分類の要素まとめ（dialog / details / template / slot ほか）
| この記事の要点 |
|
「その他」カテゴリの位置づけ
HTML5 では数多くの要素が定義されており、当サイトでは「テキスト」「フォーム」「テーブル」「メディア」のような大きなカテゴリ別にまとめています。本ページではそれらのいずれにも収まりにくい、便利だが少し用途の専門的な要素を「その他」としてまとめて紹介します。子ページから興味のある要素を選んで詳細を確認してください。
主な「その他」要素の早見表
| 要素 | 分類 | 用途 |
|---|---|---|
<dialog> | 対話 | モーダル／非モーダルのダイアログを表現 |
<details> <summary> | 対話 | 開閉可能なアコーディオン |
<menu> | 対話 | コマンド類のリスト（コンテキストメニュー的に使われる） |
<template> | テンプレート | JavaScript で動的に挿入する DOM の雛形 |
<slot> | テンプレート | Web Components のスロット |
<data> | メタ | 機械可読な値を人間可読なテキストに添える |
<time> | メタ | 日付・時刻を機械可読な形で表現 |
<wbr> | テキスト補助 | 改行可能位置のヒントを与える |
<br> | テキスト補助 | 意味的な強制改行 |
<hr> | セクション | テーマの区切り（水平線） |
使用例：dialog 要素でモーダルを開く
<dialog id="myDialog">
<p>本当に削除しますか？</p>
<form method="dialog">
<button value="cancel">キャンセル</button>
<button value="ok">削除する</button>
</form>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">開く</button>showModal() でモーダル表示、show() で非モーダル表示。閉じるときは close() を呼ぶか、フォームの method="dialog" を使うとボタン押下で自動的に閉じます。
使用例：details 要素でアコーディオン
<details>
<summary>詳細を開く</summary>
<p>ここに本文を書きます。JavaScript 不要で開閉できます。</p>
</details>使用例：template 要素で雛形を用意
<template id="card-template">
<article class="card">
<h3 class="title"></h3>
<p class="body"></p>
</article>
</template>
<script>
const tpl = document.getElementById('card-template');
const node = tpl.content.cloneNode(true);
node.querySelector('.title').textContent = 'タイトル';
node.querySelector('.body').textContent = '本文';
document.body.appendChild(node);
</script>使い分けのコツ
- 開閉 UI は
<details>を第一候補にすると、CSS だけで装飾できアクセシビリティも担保される - モーダルは無理に独自実装せず
<dialog>を使うとフォーカストラップやキー操作が標準で動く - 機械可読な日時は
<time datetime="...">を必ず付ける（SEO・支援技術の両面でメリット） - 長い URL や英単語の改行制御には
<wbr>を活用するとレイアウト崩れを防げる