SYNCER

SYNCER

＜dt要素＞ - 項目の名前

公開日:

dt要素は、dl要素のname-value(名前と値のペア)のうち、名前の方をマークアップするための要素です。

概要

名前
dt (Definition Term)
カテゴリー
なし。
配置できる場所
dl要素の子要素として、dt要素、またはdd要素の直前。
dl要素の子要素であるdiv要素の子要素として、dt要素、またはdd要素の直前。
コンテンツモデル
Flow content。ただし、header要素、footer要素、Sectioning content、Heading contentの祖先となってはいけない。
タグの省略
直後にdt要素、またはdd要素が続く場合、終了タグを省略できる。
DOM Interface
HTMLElement
デフォルトのスタイル
dt {
	display: block;
}
仕様書
https://html.spec.whatwg.org/multipage/semantics.html#the-dt-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜dt要素＞ - 項目の名前</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/dt/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>dt要素は、name-value(名前と値のペア)の、名前の方をマークアップする要素です。</p>

<h2>プログラミング言語を紹介</h2>
<dl>
	<!-- 1つの名前に1つの説明 -->
	<dt>HTML</dt>
		<dd>ウェブサイトを作るための、最も基本的な言語。</dd>

	<!-- 1つの名前に複数の説明 -->
	<dt>PHP</dt>
		<dd>初心者にオススメの言語。</dd>
		<dd>易しくて取っつきやすい。</dd>

	<!-- 複数の名前に1つの説明 -->
	<dt>JavaScript</dt>
	<dt>Perl</dt>
		<dd>取っつきにくい。</dd>
</dl>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>