グループ化要素（1/3）

p要素（段落）

p要素は段落を表します。本文のほとんどの段落の中で利用され、多くの場面で使われます。

p要素は通常はテキストを入れますが、p要素のコンテンツ・モデルはフレージング・コンテンツです。そのため、video要素、audio要素、canvas要素、iframe要素、img要素といった組み込み要素や、input要素、textarea要素、select要素といったフォーム関連要素、MathMLのmath要素やSVGのsvg要素を入れることも可能です。

■利用例

  <article>
	・・・
	<p>段落はP要素を使って、文章の内容を説明していきます。</p>
	・・・
	<form>
		<p><label>ラベル名：<input type="text" name="text" /></label></p>
	</form>
	<footer>
		<p>フッタの中の説明書きとしても利用します。</p>
		<address>
			連絡先、住所などはP要素ではなく、address要素を使います。
		</address>
	</footer>
  </article>
    

利用例をみると、文書内の段落やフォームのパーツはp要素を使ってマークアップします。しかし、著作者情報は、段落というよりもページやサイトの制作者情報という意味合いが強いので、address要素を使います。

普通、段落としてp要素を使っていても、その中で表現されている内容に応じて、より適切な要素を使うべきかどうかに注意を払う必要があります。

hr要素（テーマの変わり目）

hr要素は、意味的な段落の区切れを表し、基本的にはセクションの中で使います。
HTML4では、align、noshade、size、widthといった属性を使ったプレゼンテーショナルは、HTML5では排除されました。
hr要素は、1つのセクションの中で話題を変える箇所で使います。

br要素（改行）

br要素は、改行を表し、テキストの中で使います。

■利用例

  <p>株式会社XXX<br />
  東京都港区神田1-2-XX<br />
  TEL：03-000-0000</p>
    

利用例のように、1つの情報の塊をきりのよい箇所で改行する際にbr要素を使います。段落を区切るように見せるためにbr要素を使うことは良くないので、そのような時はp要素を使ってそれぞれ段落として扱うことが正しいマークアップになります。

pre要素（フォーマット済みテキスト）

pre要素は、プログラム・コードやHTMLコードなどの表示に使われる整形済みテキストのブロックを表します。改行やスペースなどをそのままの形でブラウザで表現したいときに利用されます。ただし、pre要素の開始タグの直後に改行があった場合は、それは無視されます。

■利用例

  <p>pre要素を使うと、コードがそのままの状態で表示されます。</p>
  <pre>
  	window.onload = function() {
		a = document.forms[0].elements[0].value;
    };
  </pre>
    

利用例をブラウザで表示すると下の図のように表示されます。

pre要素のコンテンツ・モデルは、フレージング・コンテンツなので、テキストだけではなく、フレージング・コンテンツに属する要素を使い、特定のテキストの範囲にセマンティックスを与えることができます。

※ セマンティックスとは、特定の表記に捕らわれず、表現された意味に着目する考え方をあらわすこと。

blockquote要素（ブロック引用）

bloackquote要素は、他の情報源から引用されたセクションを表します。引用元のURLがあれば、citeコンテンツ属性を使って、そのURLをマークアップします。

■利用例

  <p>HTML5の言葉をIT用語辞典で調べると、次のように書かれていました</p>
  <blockquote cite="http://e-words.jp/HTML5.html">
  	<h3>HTML5とは</h3>
	<p>Webページの記述などに用いるマークアップ言語、HTMLの第5版。
    	WHATWGの提唱した仕様を元に、Web関連技術を標準化しているW3C
        で仕様の検討・標準化が進められている。</p>
  </blockquote>
    

利用例をブラウザで表示すると次の図のようになります。

利用例の中で、blockquote要素内の見出しにh3要素を使用しています。通常、h3要素を使うとアウトラインの解釈からすると新たなセクションであるとなりますが、blockquote要素はセクショニング・コンテンツなので、この見出しは、このドキュメントの見出しとして解釈されます。