メインコンテンツへスキップ

dt要素

1.仕様

DT要素は、
定義用語とその説明を
関連付けをした一覧の
定義用語を
表します。

dt

定義用語 (definition term)

種類

通常要素

カテゴリ

なし

使用できるコンテキスト
  • dl要素の子であるdd要素の前
  • dl要素の子であるdiv要素の子であるdd要素の前

dl要素の子であるdd要素の前のコンテンツとして、使用できます。
dl要素の子であるdiv要素の子であるdd要素の前を そのコンテンツとして、使用できます。

dl要素内の、dd要素またはdt要素の前。

dl要素の子であるdiv要素内の、dd要素またはdt要素の前。

コンテンツモデル
0個以上のフローコンテンツ (ヘディングコンテンツ, セクショニングコンテンツ, header要素, footer要素 を除く)

0個以上のフローコンテンツが配置できます。ですが、ヘディングコンテンツ, セクショニングコンテンツ, header要素, footer要素は子孫に持てません。

ヘディングコンテンツ, セクショニングコンテンツ, header要素, footer要素を除くフローコンテンツに分類される要素は、main要素, address要素, ol要素, ul要素, menu要素, dl要素, table要素, form要素, fieldset要素, search要素, hr要素, p要素, pre要素, blockquote要素, figure要素, div要素, dialog要素, script要素, noscript要素, template要素, input要素, textarea要素, select要素, label要素, button要素, output要素, progress要素, meter要素, datalist要素, picture要素, object要素, img要素, iframe要素, embed要素, video要素, audio要素, canvas要素, map要素, area要素, a要素, details要素, ins要素, del要素, abbr要素, b要素, bdi要素, bdo要素, cite要素, code要素, data要素, dfn要素, em要素, i要素, kbd要素, mark要素, q要素, s要素, samp要素, small要素, span要素, strong要素, sub要素, sup要素, u要素, var要素, time要素, ruby要素, br要素, wbr要素, slot要素, テキスト です。

タグの省略
終了タグは省略できます。

dt要素の直後に別の dt要素または dd要素が続く場合、dt要素の終了タグは省略できます。

コンテンツ属性

グローバル属性のみ

DOM インターフェイス
HTMLElement
  1. [Exposed=Window]
  2. interface HTMLElement : Element {
  3. [HTMLConstructor] constructor();
  4.  
  5. // metadata attributes
  6. [CEReactions] attribute DOMString title;
  7. [CEReactions] attribute DOMString lang;
  8. [CEReactions] attribute boolean translate;
  9. [CEReactions] attribute DOMString dir;
  10.  
  11. // user interaction
  12. [CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
  13. [CEReactions] attribute DOMString inert;
  14. undefined click();
  15. [CEReactions] attribute DOMString accessKey;
  16. readonly attribute DOMString accessKeyLabel;
  17. [CEReactions] attribute boolean draggable;
  18. [CEReactions] attribute boolean spellcheck;
  19. [CEReactions] attribute DOMString writingSuggestions;
  20. [CEReactions] attribute DOMString autocapitalize;
  21.  
  22. [CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
  23. [CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;
  24.  
  25. ElementInternals attachInternals();
  26.  
  27. // The popover API
  28. undefined showPopover();
  29. undefined hidePopover();
  30. boolean togglePopover(optional boolean force);
  31. [CEReactions] attribute DOMString? popover;
  32. };
  33.  
  34. HTMLElement includes GlobalEventHandlers;
  35. HTMLElement includes ElementContentEditable;
  36. HTMLElement includes HTMLOrSVGElement;
Element
  1. [Exposed=Window]
  2. interface Element : Node {
  3. readonly attribute DOMString? namespaceURI;
  4. readonly attribute DOMString? prefix;
  5. readonly attribute DOMString localName;
  6. readonly attribute DOMString tagName;
  7.  
  8. [CEReactions] attribute DOMString id;
  9. [CEReactions] attribute DOMString className;
  10. [SameObject, PutForwards=value] readonly attribute DOMTokenList classList;
  11. [CEReactions, Unscopable] attribute DOMString slot;
  12.  
  13. boolean hasAttributes();
  14. [SameObject] readonly attribute NamedNodeMap attributes;
  15. sequence<DOMString> getAttributeNames();
  16. DOMString? getAttribute(DOMString qualifiedName);
  17. DOMString? getAttributeNS(DOMString? namespace, DOMString localName);
  18. [CEReactions] undefined setAttribute(DOMString qualifiedName, DOMString value);
  19. [CEReactions] undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value);
  20. [CEReactions] undefined removeAttribute(DOMString qualifiedName);
  21. [CEReactions] undefined removeAttributeNS(DOMString? namespace, DOMString localName);
  22. [CEReactions] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
  23. boolean hasAttribute(DOMString qualifiedName);
  24. boolean hasAttributeNS(DOMString? namespace, DOMString localName);
  25.  
  26. Attr? getAttributeNode(DOMString qualifiedName);
  27. Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName);
  28. [CEReactions] Attr? setAttributeNode(Attr attr);
  29. [CEReactions] Attr? setAttributeNodeNS(Attr attr);
  30. [CEReactions] Attr removeAttributeNode(Attr attr);
  31.  
  32. ShadowRoot attachShadow(ShadowRootInit init);
  33. readonly attribute ShadowRoot? shadowRoot;
  34.  
  35. Element? closest(DOMString selectors);
  36. boolean matches(DOMString selectors);
  37. boolean webkitMatchesSelector(DOMString selectors); // legacy alias of .matches
  38.  
  39. HTMLCollection getElementsByTagName(DOMString qualifiedName);
  40. HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
  41. HTMLCollection getElementsByClassName(DOMString classNames);
  42.  
  43. [CEReactions] Element? insertAdjacentElement(DOMString where, Element element); // legacy
  44. undefined insertAdjacentText(DOMString where, DOMString data); // legacy
  45. };
GlobalEventHandlers
  1. interface mixin GlobalEventHandlers {
  2. attribute EventHandler onabort;
  3. attribute EventHandler onauxclick;
  4. attribute EventHandler onbeforeinput;
  5. attribute EventHandler onbeforematch;
  6. attribute EventHandler onbeforetoggle;
  7. attribute EventHandler onblur;
  8. attribute EventHandler oncancel;
  9. attribute EventHandler oncanplay;
  10. attribute EventHandler oncanplaythrough;
  11. attribute EventHandler onchange;
  12. attribute EventHandler onclick;
  13. attribute EventHandler onclose;
  14. attribute EventHandler oncontextlost;
  15. attribute EventHandler oncontextmenu;
  16. attribute EventHandler oncontextrestored;
  17. attribute EventHandler oncopy;
  18. attribute EventHandler oncuechange;
  19. attribute EventHandler oncut;
  20. attribute EventHandler ondblclick;
  21. attribute EventHandler ondrag;
  22. attribute EventHandler ondragend;
  23. attribute EventHandler ondragenter;
  24. attribute EventHandler ondragleave;
  25. attribute EventHandler ondragover;
  26. attribute EventHandler ondragstart;
  27. attribute EventHandler ondrop;
  28. attribute EventHandler ondurationchange;
  29. attribute EventHandler onemptied;
  30. attribute EventHandler onended;
  31. attribute OnErrorEventHandler onerror;
  32. attribute EventHandler onfocus;
  33. attribute EventHandler onformdata;
  34. attribute EventHandler oninput;
  35. attribute EventHandler oninvalid;
  36. attribute EventHandler onkeydown;
  37. attribute EventHandler onkeypress;
  38. attribute EventHandler onkeyup;
  39. attribute EventHandler onload;
  40. attribute EventHandler onloadeddata;
  41. attribute EventHandler onloadedmetadata;
  42. attribute EventHandler onloadstart;
  43. attribute EventHandler onmousedown;
  44. [LegacyLenientThis] attribute EventHandler onmouseenter;
  45. [LegacyLenientThis] attribute EventHandler onmouseleave;
  46. attribute EventHandler onmousemove;
  47. attribute EventHandler onmouseout;
  48. attribute EventHandler onmouseover;
  49. attribute EventHandler onmouseup;
  50. attribute EventHandler onpaste;
  51. attribute EventHandler onpause;
  52. attribute EventHandler onplay;
  53. attribute EventHandler onplaying;
  54. attribute EventHandler onprogress;
  55. attribute EventHandler onratechange;
  56. attribute EventHandler onreset;
  57. attribute EventHandler onresize;
  58. attribute EventHandler onscroll;
  59. attribute EventHandler onscrollend;
  60. attribute EventHandler onsecuritypolicyviolation;
  61. attribute EventHandler onseeked;
  62. attribute EventHandler onseeking;
  63. attribute EventHandler onselect;
  64. attribute EventHandler onslotchange;
  65. attribute EventHandler onstalled;
  66. attribute EventHandler onsubmit;
  67. attribute EventHandler onsuspend;
  68. attribute EventHandler ontimeupdate;
  69. attribute EventHandler ontoggle;
  70. attribute EventHandler onvolumechange;
  71. attribute EventHandler onwaiting;
  72. attribute EventHandler onwebkitanimationend;
  73. attribute EventHandler onwebkitanimationiteration;
  74. attribute EventHandler onwebkitanimationstart;
  75. attribute EventHandler onwebkittransitionend;
  76. attribute EventHandler onwheel;
  77. };
ElementContentEditable
  1. interface mixin ElementContentEditable {
  2. [CEReactions] attribute DOMString contentEditable;
  3. [CEReactions] attribute DOMString enterKeyHint;
  4. readonly attribute boolean isContentEditable;
  5. [CEReactions] attribute DOMString inputMode;
  6. };
HTMLOrSVGElement
  1. interface mixin HTMLOrSVGElement {
  2. [SameObject] readonly attribute DOMStringMap dataset;
  3. attribute DOMString nonce; // intentionally no [CEReactions]
  4.  
  5. [CEReactions] attribute boolean autofocus;
  6. [CEReactions] attribute long tabIndex;
  7. undefined focus(optional FocusOptions options = {});
  8. undefined blur();
  9. };
ARIA in HTML
暗黙的="No" ARIAロール="listitem" aria-* 属性="GlobalAny"

暗黙的な ARIAセマンティクスがありませんが、意味はあり、この意味は、ARIA によって提供されず、ARIA のユーザーに公開されていないロール、状態、プロパティで表現される可能性があります。

作成者が要素に指定してもよい ARIAロール値は、listitem です。

グローバル aria-* 属性と、許可されたロールに適用される任意の aria-* 属性が記述できます。

レンダリング
ブロックボックス
リスト
  1. dt {
  2. display: block;
  3. unicode-bidi: isolate;
  4. }

CSS を大雑把に読むと、 ブロックレベルのブロックコンテナボックス(ブロックボックス)を生成します。 などになります。

説明
dt要素は、用語または名称を表します。

dt要素は、定義用語とその説明を関連付けした一覧(リスト・list)の定義用語を表します。
名前と値のグループは、用語と定義, メタデータのトピックと値, 質問と回答, またはその他の名前と値のデータのグループです。 HTML Living Standard での例示で、 1 つのグループに 2 つのメタデータラベルと 2 つの値がある例があるので、n 対 m の関係付けが可能な様です。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>dt要素の例 - (Example of dt element) | 離珠のHTMLでしぃ！</title>
  6. </head>
  7. <body>
  8. <h1>dt要素の例</h1>
  9. <dl>
  10. <div>
  11. <dt>用語</dt>
  12. <dd>説明</dd>
  13. </div>
  14. </dl>
  15. </body>
  16. </html>

このサンプルへのリンクです。
(./exdt.htm)

参照元
参照元
JSONデータ
JSON形式での、データのイメージです。
  1. {
  2. "dt": {
  3. "check": "2024-09-01",
  4. "group": "List",
  5. "element": "- - (%Flow)* -(%Heading|%Sectioning|header|footer) -- definition term. (Normal elements.) [None] --",
  6. "attlist": {"%Global;": ""},
  7. "comment": "定義用語 (definition term)",
  8. "point": "用語または名称を表します。",
  9. "description": [
  10. "定義用語とその説明を関連付けした一覧(リスト・list)の定義用語を表します。",
  11. "名前と値のグループは、用語と定義, メタデータのトピックと値, 質問と回答, またはその他の名前と値のデータのグループです。 HTML Living Standard での例示で、 1 つのグループに 2 つのメタデータラベルと 2 つの値がある例があるので、n 対 m の関係付けが可能な様です。",
  12. ],
  13. "kind": "Normal",
  14. "categories": "None",
  15. "used": [
  16. "dl (dt+,dd+)",
  17. "dl div (dt+,dd+)",
  18. ],
  19. "usedsupplement": [
  20. "dl要素内の、dd要素またはdt要素の前。",
  21. "dl要素の子であるdiv要素内の、dd要素またはdt要素の前。",
  22. ],
  23. "contentmodel": "dt (%Flow)* -(%Heading|%Sectioning|header|footer)",
  24. "tag": [
  25. "-",
  26. "O",
  27. ],
  28. "tagsupplement": "dt要素の直後に別の dt要素または dd要素が続く場合、dt要素の終了タグは省略できます。",
  29. "attributes": "Global",
  30. "dominterface": "HTMLElement",
  31. "rendering": [
  32. "Lists",
  33. "Bidirectional",
  34. ],
  35. "reference": [
  36. {
  37. "title": "HTML Living Standard. 4.4.10 The dt element.",
  38. "href": "https://html.spec.whatwg.org/multipage/grouping-content.html#the-dt-element",
  39. "heading": "HTML Living Standard. 4.4.10 The dt element",
  40. "sub": "Last Updated 27 August 2024",
  41. },
  42. {
  43. "title": "HTML Living Standard. 15 Rendering 15.3.7 Lists.",
  44. "href": "https://html.spec.whatwg.org/multipage/rendering.html#lists",
  45. "heading": "HTML Living Standard. 15 Rendering 15.3.7 Lists",
  46. "sub": "Last Updated 27 August 2024",
  47. },
  48. {
  49. "title": "HTML 5.2 W3C Recommendation. 4.4.10 The dt element. W3C Recommendation, 14 December 2017.",
  50. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/grouping-content.html#the-dt-element",
  51. "heading": "HTML 5.2 W3C 勧告. 4.4.10 The dt element",
  52. "sub": "W3C勧告、2017年12月14日",
  53. },
  54. {
  55. "title": "HTML 5.2 W3C Recommendation. 10.3.8. Lists.",
  56. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/rendering.html#section-lists",
  57. "heading": "HTML 5.2 W3C 勧告. 10.3.8. Lists",
  58. "sub": "W3C勧告、2017年12月14日",
  59. },
  60. {
  61. "title": "HTML 5.1 W3C Recommendation. 4.4.9 The dt element. W3C Recommendation, 1 November 2016.",
  62. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/grouping-content.html#the-dt-element",
  63. "heading": "HTML 5.1 W3C 勧告. 4.4.9 The dt element",
  64. "sub": "W3C勧告、2016年11月1日",
  65. },
  66. {
  67. "title": "HTML 5.1 W3C Recommendation. 10.3.8. Lists. W3C Recommendation, 1 November 2016.",
  68. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/rendering.html#section-lists",
  69. "heading": "HTML 5.1 W3C 勧告. 10.3.8. Lists",
  70. "sub": "W3C勧告、2016年11月1日",
  71. },
  72. {
  73. "title": "HTML 4.01 Specification W3C Recommendation. 10.3 Definition lists: the DL, DT, and DD elements. W3C Recommendation 24 December 1999.",
  74. "href": "https://www.w3.org/TR/html401/struct/lists.html#h-10.3",
  75. "heading": "HTML 4.01 Specification W3C 勧告. 10.3 Definition lists: the DL, DT, and DD elements",
  76. "sub": "W3C勧告1999年12月24日",
  77. },
  78. {
  79. "title": "HTML 3.2 Reference Specification. W3C Recommendation 14-Jan-1997.",
  80. "href": "https://www.w3.org/TR/2018/SPSD-html32-20180315/",
  81. "heading": "HTML 3.2 Reference Specification",
  82. "sub": "W3C勧告1997年1月14日",
  83. },
  84. {
  85. "title": "Hypertext Markup Language - 2.0. November 1995.",
  86. "href": "https://www.ietf.org/rfc/rfc1866.txt",
  87. "heading": "Hypertext Markup Language - 2.0",
  88. "sub": "November 1995",
  89. },
  90. {
  91. "title": "Hypertext Markup Language (HTML). June 1993.",
  92. "href": "https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt",
  93. "heading": "Hypertext Markup Language (HTML)",
  94. "sub": "June 1993",
  95. },
  96. {
  97. "title": "MDN Web Docs. HTML <dt>: The Description Term element.",
  98. "href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/dt",
  99. "heading": "<dt>: 説明用語要素 - HTML: ハイパーテキストマークアップ言語 | MDN",
  100. },
  101. ],
  102. "version": {
  103. "first": "HTML",
  104. "latest": "HTML Living Standard",
  105. },
  106. }
  107. }

注意: 簡易に描画する為に、各項目の後ろに , を付与しています。JSON の形式では、末尾の項目の後には , は付けません。

最終確認日

2024-09-01

2.使用可能な箇所

dl要素,
div要素 に
配置できます。

dl要素, div要素に配置できます。

dl要素内の、dd要素またはdt要素の前に配置できます。空の場合はそこに配置できます。(合わせて後にdd要素を配置する必要があります。)

dl要素の子であるdiv要素内の、dd要素またはdt要素の前に配置できます。そのdiv要素が空の場合はそこに配置できます。(合わせて後にdd要素を配置する必要があります。)

dt要素とdd要素でグループとして関係を表すので、順番に意味があります。 用語と説明のグループとして解説すると、dt要素で用語を表しそれに続くdd要素でその用語の説明を表します。そしてdt要素がdt要素の後ろに続く場合は、それに続くdd要素がそれらの用語の説明を表します。つまり続く用語に同じ説明という事です。 また、説明１, 説明２と説明が複数ある場合は、dd要素にdd要素が続く訳です。この続いたdd要素はその前のdt要素の説明となります。尚、dd要素に続くdt要素との間に直接の関連性はありません。同じdl要素の子孫である要素という関係性はあるので、dl要素の影響は等しく受けます。また隣接する要素という事で、マージンの相殺などはあります。 なにより違う用語の説明なので、その違いを意識して表したい処です。

3.配置できるコンテンツ

ヘディングコンテンツ,
セクショニングコンテンツ,
header要素,
footer要素 を除く
フローコンテンツ を
配置できます。

dt要素の子(内容・コンテンツ・Content)として、ヘディングコンテンツ, セクショニングコンテンツ, header要素, footer要素 を除く 0 以上の フローコンテンツを配置できます。

ヘディングコンテンツ, セクショニングコンテンツ, header要素, footer要素 を除く フローコンテンツである要素は、main要素, address要素, ol要素, ul要素, menu要素, dl要素, table要素, form要素, fieldset要素, search要素, hr要素, p要素, pre要素, blockquote要素, figure要素, div要素, dialog要素, slot要素, script要素, noscript要素, template要素, input要素, textarea要素, select要素, label要素, button要素, output要素, progress要素, meter要素, datalist要素, picture要素, object要素, img要素, iframe要素, embed要素, video要素, audio要素, canvas要素, map要素, area要素, a要素, details要素, ins要素, del要素, abbr要素, b要素, bdi要素, bdo要素, br要素, cite要素, code要素, data要素, dfn要素, em要素, i要素, kbd要素, mark要素, q要素, ruby要素, s要素, samp要素, small要素, span要素, strong要素, sub要素, sup要素, time要素, u要素, var要素, wbr要素, text です。

dt要素は一覧とした項目(テーマ)を表すので、dl要素で適切な一覧となる必要があります。

dt
Flow
content
  1. <dl>
  2. <dt>テーマ</dt>
  3. <dd>ディスクリプション</dd>
  4. </dl>

dt要素のコンテンツとしてフローコンテンツ(ヘディングコンテンツ, セクショニングコンテンツ, header要素, footer要素を除く) が配置できて、そのコンテンツが定義用語と表される訳です。

ブロック
フォーマット
コンテキスト
コンテンツ

ボックスで表すと、dt要素が存在して、その中に フローコンテンツがあります。 (ヘディングコンテンツ, セクショニングコンテンツ, header要素, footer要素を除きます)

dt要素は、ブロックレベルのブロックコンテナであるボックスを生成します。dt要素を含むブロックフォーマットコンテキストがない場合は、新しいブロックフォーマットコンテキストを確立します。dt要素は、フローコンテンツを配置します。なのでここで インラインフォーマットコンテキストが確立されるか否かは、配置するコンテンツ次第です。
尚、この説明は各要素のレンダリングに関する指定が既定値での話で、個々にスタイルを指定した場合はこの限りではありません。

4.属性

グローバル属性のみ、
設定できます。

dt要素は、グローバル属性のみ 設定できます。

5.Web API

id属性を用いて
getElementById()メソッドで
要素を取得する方法がお勧めです。

dt要素を表すプロパティはないので、id属性を用いて documentの getElementById()メソッドで、要素を取得する方法がお勧めです。この時に取得できるのはHTMLElement オブジェクトです。

6.レンダリング

  1. dt {
  2. display: block;
  3. unicode-bidi: isolate;
  4. }

dt要素は、ブロックレベルのブロックコンテナであるボックスを生成します。

ブロックフォーマットコンテキストに参加して、ブロックフォーマットコンテキストを継承, 確立します。もし、インラインフォーマットコンテキストに参加するコンテンツのみを含む場合は、新しいインラインフォーマットコンテキストを確立します。次に、すべてのインラインコンテンツをラップするルートインラインボックスも生成します。

unicode-bidi は、置換されない要素のレンダリングでの Bidirectional text(双方向テキスト) に於いての期待される仕様の様です。

7.気を付ける点

定義の用語

term であって、title ではない。
用語と定義, メタデータのトピックと値, 質問と回答, またはその他の名前と値のデータのグループの、 用語, メタデータのトピック, 質問, 名前などを見出しなどにする事がある為に紛らわしいですが、 関連付け一覧として扱う場合は見出しではないので、定義, 値, 回答など説明にあたる部分との関連を意識して記述するべきです。

8.付記