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