コンテンツのグループ化｜HTML要素｜HTML5

TOP HTML5コンテンツのグループ化

p〔段落〕
hr〔水平線〕
br〔強制改行〕
pre〔整形済みテキスト〕
dialog 〔ダイアログ〕
blockquote〔引用〕
ol〔番号付きリスト〕
ul〔箇条書きリスト〕
li〔リストの項目〕
dl〔定義リスト〕
dt〔定義の項目〕
dd〔定義の項目の内容〕

p
段落

2009/8/26

構文

p要素は、段落を表します。

属性

固有の属性はありません。
HTML4にあったalign属性は廃止されました。

p要素の属性
属性	値	説明
グローバル属性	-	全要素共通の属性。

サンプル

<p>段落。</p>
<p>段落。</p>

段落。

hr
水平線

2009/8/26

構文

<hr>

hr要素は、HTML4ではただの水平線を表す要素でしたが、HTML5では段落レベルの主題の中断を表します。例えば、物語の場面変更や関連書籍のセクション内で他のトピックに移動するなど。

hr要素は空要素のため閉じタグはありません。

属性

固有の属性はありません。
HTML4にあったalign/noshade/size/width属性は廃止されました。

hr要素の属性
属性	値	説明
グローバル属性	-	全要素共通の属性。

サンプル

テキスト<hr>テキスト

テキスト

br
強制改行

2009/8/26

構文

<br>

br要素は、改行を表します。

br要素は空要素のため閉じタグはありません。
段落を分離するのではなく、改行するために使用します。

属性

固有の属性はありません。

br要素の属性
属性	値	説明
グローバル属性	-	全要素共通の属性。

サンプル

<p>
	生か、死か、、、<br>
	それが問題だ。
</p>

生か、死か、、、
それが問題だ。

pre
整形済みテキスト

2009/8/26

構文

pre要素は、整形済みテキストを表します。

pre要素内の半角スペース、タブ、改行は記述したまま表示されます。
pre要素内のフォントは、通常、等幅フォントで表示されます。

アスキーアートを表示したい場合は、pre要素を単独で使用します。スクリプトコードを表示したい場合は、pre要素とcode要素を併用し、プログラムの出力結果を表示したい場合は、pre要素とsamp要素を併用します。

属性

固有の属性はありません。
HTML4にあったwidth属性は廃止されました。

pre要素の属性
属性	値	説明
グローバル属性	-	全要素共通の属性。

サンプル

<!-- スクリプトコード -->
<pre><code>function win_alert(str){
  alert(str);
}</code></pre>

<!-- アスキーアート -->
<pre style="font-family:monospace;line-height:1.2;font-size:14px;">
　　　 ∧ ∧ ＿__　　ﾀﾞｯｺ♪
　　／(*ﾟーﾟ)　／＼
　／|￣∪ ∪￣|＼／
　　|　　 　　|／
</pre>

function win_alert(str){
  alert(str);
}

　　　 ∧ ∧ ＿__　　ﾀﾞｯｺ♪
　　／(*ﾟーﾟ)　／＼
　／|￣∪ ∪￣|＼／
　　|　　 　　|／

dialog
ダイアログ

2009/8/26

構文

dialog要素は、会話などのダイアログを表します。

ダイアログ内の文は、dt要素とdd要素のペアを指定します。

属性

固有の属性はありません。

dialog要素の属性
属性	値	説明
グローバル属性	-	全要素共通の属性。

サンプル

設置イメージ

サンプルを見る

<style>
	dialog { margin:10px 0; padding:10px; border:1px solid #ccc; display:block; }
	dialog dt { margin:0; padding:0 0 5px 21px; font-weight:normal; color:#ff6699; background:transparent url(/content/img/icon/color/female.png) no-repeat 0 center; }
	dialog dd { margin:0; padding:0 0 5px 21px; font-weight:normal; color:#56a1fe; background:transparent url(/content/img/icon/color/male.png) no-repeat 0 center; }
	dialog#timeline dt { color:#666; font-family:monospace; font-size:80%;  background-image:url(/content/img/icon/color/comments.gif); }
	dialog#timeline dd { background:none; color:#000; }
	dialog#timeline time { padding-right:10px;  }
</style>
<dialog>
	<dt>最近どぉ！？</dt>
		<dd>まーまーかな。そっちはどうなの？</dd>
	<dt>うーん。至ってふつー。何かいいことあったの？</dt>
		<dd>別に。脳天気なだけだよ。</dd>
	<dt>またー、そんなこといって？ほんとはいい事あったんでしょ！？</dt>
		<dd>相変わらず勘ぐり深いね。。。</dd>
</dialog>
<dialog id="timeline">
	<dt><time>14:22</time>ほげ子</dt>
		<dd>最近どぉ！？</dd>
	<dt><time>14:23</time>ほげ夫</dt>
		<dd>まーまーかな。そっちはどうなの？</dd>
	<dt><time>14:23</time>ほげ子</dt>
		<dd>うーん。至ってふつー。何かいいことあったの？</dd>
	<dt><time>14:24</time>ほげ夫</dt>
		<dd>別に。脳天気なだけだよ。</dd>
	<dt><time>14:25</time>ほげ子</dt>
		<dd>またー、そんなこといって？ほんとはいい事あったんでしょ！？</dd>
	<dt><time>14:26</time>ほげ夫</dt>
		<dd>相変わらず勘ぐり深いね。。。</dd>
</dialog>

blockquote
引用

2009/8/26

構文

blockquote要素は、ブロックレベルの引用文を表します。

blockquote要素内に直接テキストを記述することはできません。
テキストは、q要素でマークアップする必要があります。
引用文の引用元を明示したい場合は、cite属性に引用元のURIを指定します。

インラインレベルの引用の場合は、q要素を使用してください。
blockquote要素をインデント目的で使用しないようにしてください。

属性

blockquote要素の属性
属性	値	説明
グローバル属性	-	全要素共通の属性。
cite	URL	引用元のURIを指定。

サンプル

設置イメージ

サンプルを見る

<style type="text/css">
	blockquote { background:transparent url(/content/img/css/open_quotes.gif) no-repeat 10px 10px; padding:30px 20px 10px 30px; border:1px solid #ccc; }
	blockquote p { background:transparent url(/content/img/css/close_quotes.gif) no-repeat bottom right; margin:0; padding:0 10px 0 0; }
</style>
<p>
	「Wikipedia」の名前の由来を「Wikipedia」で調べてみると以下のように掲載されていた。
</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Wikipedia">
	<p>
		Wikipedia（ウィキペディア）という名前はウィキペディアが使用しているMediaWikiと呼ばれる Wiki （ウィキ）ソフトウェアの「Wiki （ウィキ）」と、百科事典を意味する英語「encyclopedia（エンサイクロペディア）」から合成されたものである（よって日本国内では、元々のWikiシステムを知らない層からはWikipediaをWikiと略して呼ばれることが多いが、これは誤用であり、混乱の元である）。
	</p>
</blockquote>

ol
番号付きリスト

2009/8/26

構文

ol要素は、番号付き順序リストを表します。

ol要素内には、li要素が1回以上出現する必要があります。
ol要素を入れ子にする場合は、li要素の開始タグと終了タグの間に記述してください。

属性

HTML4では廃止されていたstart属性が、HTML5で復活しました。
HTML4にあったcompact属性とtype属性は、HTML5で廃止されました。

ol要素の属性
属性	値	説明
グローバル属性	-	全要素共通の属性。
reversed	true FALSE	番号を降順に振るかどうかの有無を指定。reversedが指定されている場合は降順（...,3,2,1）、省略された場合は昇順（1,2,3,...）に番号が振られる。
start	数値	開始番号を指定。

サンプル

<ol>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ol>

<hr />

<!-- 入れ子 -->
<ol>
    <li>項目1</li>
    <li>項目2
    	<ol>
    		<li>項目2-1</li>
    		<li>項目2-2</li>
    		<li>項目2-3</li>
    	</ol>
    </li>
    <li>項目3
    	<ul>
    		<li>項目3-1</li>
    		<li>項目3-2</li>
    		<li>項目3-3</li>
    	</ul>
    </li>
</ol>

項目1
項目2
項目3

項目1
項目2
1. 項目2-1
2. 項目2-2
3. 項目2-3
項目3
- 項目3-1
- 項目3-2
- 項目3-3

ul
箇条書きリスト

2009/8/26

構文

ul要素は、箇条書きリストを表します。

ul要素内には、li要素が1回以上出現する必要があります。
ul要素を入れ子にする場合は、li要素の開始タグと終了タグの間に記述してください。

属性

固有の属性はありません。
HTML4にあったcompact属性とtype属性は、HTML5で廃止されました。

ul要素の属性
属性	値	説明
グローバル属性	-	全要素共通の属性。

サンプル

<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

<hr />

<!-- 入れ子 -->
<ul>
    <li>項目1</li>
    <li>項目2
    	<ul>
    		<li>項目2-1</li>
    		<li>項目2-2</li>
    		<li>項目2-3</li>
    	</ul>
    </li>
    <li>項目3
    	<ol>
    		<li>項目3-1</li>
    		<li>項目3-2</li>
    		<li>項目3-3</li>
    	</ol>
    </li>
</ul>

項目1
項目2
項目3

項目1
項目2
- 項目2-1
- 項目2-2
- 項目2-3
項目3
1. 項目3-1
2. 項目3-2
3. 項目3-3

li
リストの項目

2009/8/26

構文

li要素は、リスト項目の開始を表します。

li要素は、ol要素、ul要素、menu要素内に記述します。

属性

固有の属性はありません。
HTML4にあったtype属性は、HTML5で廃止されました。
HTML5からvalue属性が追加されました。

ul要素の属性
属性	値	説明
グローバル属性	-	全要素共通の属性。
value	数値	開始番号を指定。li要素がol要素の子要素である場合のみ使用可。

サンプル

<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

<ol>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ol>

項目1
項目2
項目3

項目1
項目2
項目3

dl
定義リスト

2009/8/26

構文

dl要素は、定義型リストを表します。

dl要素内には、dt要素とdd要素のペアが1組以上出現する必要があります。

属性

固有の属性はありません。

head要素の属性
属性	値	説明
グローバル属性	-	全要素共通の属性。

サンプル

設置イメージ

サンプルを見る

<style>
	dl { margin:0 0 10px 0; padding:10px; border:1px solid #ccc; }
	dt { margin:0 0 10px 0; padding:0; }
	dd { margin:0 0 0 1em; padding:0; }
</style>
<dl>
	<dt>項目A</dt>
		<dd>項目Aの内容</dd>
	<dt>項目B</dt>
		<dd>項目Bの内容</dd>
	<dt>項目C</dt>
		<dd>項目Cの内容</dd>
</dl>

<style type="text/css">
	/* CSSでコンパクト表示 */
	.compact { overflow:hidden; margin:0; padding:10px 10px 0 10px; }
	.compact dt { float:left; clear:left; width:4em; }
	.compact dd { clear:right; margin-left:4em; padding:0; }
</style>
<dl class="compact">
	<dt>項目A</dt>
		<dd>項目Aの内容</dd>
	<dt>項目B</dt>
		<dd>項目Bの内容</dd>
	<dt>項目C</dt>
		<dd>項目Cの内容</dd>
</dl>

dt
定義の項目

2009/8/26

構文

dt要素は、定義型リスト（dl要素）の「項目」およびダイアログ（dialog要素）の「対話の片方の話し手部分」を表します。

dt要素内のテキストは、一般的なブラウザにおいて太字で表示されます。

dt要素は、dl要素内あるいはdialog要素内に記述します。
dt要素で定義した項目の内容は、dd要素に記述します。
通常、dt要素（定義の項目）とdd要素（定義の項目の内容）はペアで使用します。

dialog要素内のdt要素がtime要素を含んでいる場合、関連する対話（dd要素）が発言された時のはタイムスタンプを表します。

属性

固有の属性はありません。

head要素の属性
属性	値	説明
グローバル属性	-	全要素共通の属性。

サンプル

設置イメージ

サンプルを見る

<style>
	dialog { margin:10px 0; padding:10px; border:1px solid #ccc; display:block; }
	dl { margin:0 0 20px 0; padding:0; }
	dt { margin:0 0 10px 0; padding:0; }
	dd { margin:0 0 10px 1em; padding:0; }
	dialog dt { margin:0; padding:0 0 0 21px; color:#ff6699; background:transparent url(/content/img/icon/color/female.png) no-repeat 0 center; }
	dialog dd { margin:0; padding:0 0 0 21px; color:#56a1fe; background:transparent url(/content/img/icon/color/male.png) no-repeat 0 center; }
</style>

<p>▼dl+dt+ddの例</p>
<dl>
	<dt>項目A</dt>
		<dd>項目Aの内容</dd>
	<dt>項目B</dt>
		<dd>項目Bの内容</dd>
	<dt>項目C</dt>
		<dd>項目Cの内容</dd>
</dl>

<p>▼dialog+dt+ddの例</p>
<dialog>
	<dt>最近どぉ！？</dt>
		<dd>まーまーかな。そっちはどうなの？</dd>
	<dt>うーん。至ってふつー。何かいいことあったの？</dt>
		<dd>別に。脳天気なだけだよ。</dd>
	<dt>またー、そんなこといって？ほんとはいい事あったんでしょ！？</dt>
		<dd>相変わらず勘ぐり深いね。。。</dd>
</dialog>

dd
定義の項目の内容

2009/8/26

構文

dd要素は、定義型リスト（dl要素）の「項目の説明」およびダイアログ（dialog要素）の「対話の片方の話し手部分」を表します。

dd要素は、一般的なブラウザにおいてインデントされて表示されます。
通常、dt要素（定義の項目）とdd要素（定義の項目の内容）はペアで使用します。

属性

固有の属性はありません。

head要素の属性
属性	値	説明
グローバル属性	-	全要素共通の属性。

サンプル

設置イメージ

サンプルを見る

<dl>
	<dt>項目A</dt>
		<dd>項目Aの内容</dd>
	<dt>項目B</dt>
		<dd>項目Bの内容</dd>
	<dt>項目C</dt>
		<dd>項目Cの内容</dd>
</dl>

<dialog>
	<dt>最近どぉ！？</dt>
		<dd>まーまーかな。そっちはどうなの？</dd>
	<dt>うーん。至ってふつー。何かいいことあったの？</dt>
		<dd>別に。脳天気なだけだよ。</dd>
	<dt>またー、そんなこといって？ほんとはいい事あったんでしょ！？</dt>
		<dd>相変わらず勘ぐり深いね。。。</dd>
</dialog>

HTML要素 セクション

HTML要素 テキストレベルの意味付け

HTML要素コンテンツのグループ化

p段落

構文

属性

サンプル

hr水平線

構文

属性

サンプル

br強制改行

構文

属性

サンプル

pre整形済みテキスト

構文

属性

サンプル

dialog ダイアログ

構文

属性

サンプル

blockquote引用

構文

属性

サンプル

ol番号付きリスト

構文

属性

サンプル

ul箇条書きリスト

構文

属性

サンプル

liリストの項目

構文

属性

サンプル

dl定義リスト

構文

属性

サンプル

dt定義の項目

構文

属性

サンプル

dd定義の項目の内容

構文

属性

サンプル

関連コンテンツ

p
段落

hr
水平線

br
強制改行

pre
整形済みテキスト

dialog
ダイアログ

blockquote
引用

ol
番号付きリスト

ul
箇条書きリスト

li
リストの項目

dl
定義リスト

dt
定義の項目

dd
定義の項目の内容