チョコパイを240こ食べたエンジニア

PHPエンジニアをやった後、現在はフロントエンドエンジニアに・・。好物は『チョコパイと焼き鳥』。Twitterは@chooringo(ちょうりんご)

HTML5のグルーピングコンテンツ~その1~

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

グルーピングコンテンツ関連

p要素

段落を表すタグ。p要素ごとに上下に余白が入る。

<p>汁なし担々麵がおいしすぎる件・・・</p>
<p>醤油ラーメンがおいしすぎる件・・・</p>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

address要素

人や人々、組織への問い合わせ先を表す。
物理的またはデジタルな場所や、連絡先情報、人や組織を識別できる情報を入れる必要がある。

<address>      
組織名をもじゃもじゃ<br>
Tel: XXX-XXXX-XXXX | Fax: XXX-XXXX-XXXX
</address>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ(ヘッディングコンテンツ、セクショニングコンテンツ、 header要素, footer要素, address要素を除く)

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

hr要素

段落レベルの区切りを表す。例えば、ストーリー内で場面が切り替わるときや別のトピックに変わるときに使用する。
ドキュメントのアウトラインには影響しない。
あくまでもセマンティクスな観点で使う。見た目のデザインならばCSSを使用。

<p>あるところにおじいさんとおばあさんがいました。・・・</p>
<hr>
<p>あくる日、金色に輝くりんごが置いてありました。・・・</p>

カテゴリ
・フローコンテンツ

コンテンツモデル
・なし

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

pre要素

書式設定されたテキストのブロックを表す。
電子メール、空白行で囲まれた段落、箇条書きで始まる行で示されるリスト、プログラムコード、ASCIIアートなどの表示に使用する。
プログラムコードを表す時は、code要素やsamp要素、kbd要素を併用して使用する。

<pre><code>
var favorieFood = '汁なし担々麵'
echo favorieFood;
</code></pre>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツが配置できる場所

blockquote要素

別のソースから引用されたコンテンツを表す。
footerまたはcite要素に含まれる引用を必要に応じて使用できる。

<blockquote>
  <p>引用している内容を表すよ</p>
</blockquote>

カテゴリ
・フローコンテンツ
・セクショニングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ

コンテンツ属性
・グローバル属性
・cite - 引用元へのリンク

タグの記載場所
・フローコンテンツが配置できる場所