この記事の要点

見出し・段落・リスト・テーブル・フォームなどの主要カテゴリに属さない HTML5 要素をまとめたページ 対話・ポップアップ系（dialog / details / summary / menu）、テンプレート系（template / slot）、メタ的な要素（data / time / wbr）を扱う 近年は <dialog> や <details> がモダンブラウザで広くサポートされ、JavaScript なしでもアクセシブルな UI を作れる 個別の要素ページから詳細仕様を確認してほしい

「その他」カテゴリの位置づけ

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> を活用するとレイアウト崩れを防げる

関連記事

• HTML
• 要素一覧
• html要素
• div要素
• span要素
• br要素
• wbr要素