HTML+CSSまとめページ

書き方

<p> 〜 </p>

説明

段落（paragraph）を示す。「文書構造を示す」参照。

カテゴリー

フロー・コンテンツ

コンテンツ・モデル

フレージング・コンテンツ

書き方

<img src="画像のファイル名" alt="代替テキスト" width="画像の横幅" height="画像の高さ">

説明

多くの場合、リンク（ハイパーリンク）を示す。「リンク」参照。

カテゴリー

フロー・コンテンツ／フレージング・コンテンツ／インタラクティブ・コンテンツ

コンテンツ・モデル

トランスペアレント（親要素のコンテンツ・モデルを引き継ぐ）

書き方

<figure>〜</figure>

説明

画像などにキャプション（注釈や説明文）をつけるための要素。figcaption要素と併せて使用する。

例

カテゴリー

フロー・コンテンツ／セクショニング・ルート

コンテンツ・モデル

figcaption要素 + フロー・コンテンツ、もしくはフロー・コンテンツ + figcaption要素

書き方

<figcaption>〜</figcaption>

説明

figcaption要素内で写真などのキャプション（注釈や説明文）を示す。

この要素を使うことができる場所

figure要素の中の最初、もしくは最後。

カテゴリー

なし

コンテンツ・モデル

フロー・コンテンツ

書き方

<a> 〜 </a>

説明

多くの場合、リンク（ハイパーリンク）を示す。「リンク」参照。

カテゴリー

フロー・コンテンツ／フレージング・コンテンツ／インタラクティブ・コンテンツ

コンテンツ・モデル

トランスペアレント（親要素のコンテンツ・モデルを引き継ぐ）

書き方

<ul> 〜 </ul>

説明

順番が重要ではないリスト（unorderd list）を示す。「リスト」参照。

カテゴリー

フロー・コンテンツ

コンテンツ・モデル

0個以上のli要素

ul要素の子要素に出来るのはli要素のみである。

他のどのような要素も子要素にはできないので、ul要素の中に他の要素を入れるには、ul要素の中のli要素の中に他の要素を入れるようにする。

書き方

<ol> 〜 </ol>

説明

順番を示すリスト（orderd list）を示す。「リスト」参照。

カテゴリー

フロー・コンテンツ

コンテンツ・モデル

0個以上のli要素

ol要素の子要素に出来るのはli要素のみである。

他のどのような要素も子要素にはできないので、ol要素の中に他の要素を入れるには、ol要素の中のli要素の中に他の要素を入れるようにする。

書き方

<li> 〜 </li>

説明

ul要素またはol要素の中で、リストの項目（list item）を示す。「リスト」参照。

ul要素、ol要素の子要素として利用される。

カテゴリー

なし

この要素を使うことができる場所

ol要素の中。

ul要素の中。

（menu要素の中。）

コンテンツ・モデル

フロー・コンテンツ

リストを2重にする場合は、li要素の中に改めてul要素かol要素を入れるようにする。

書き方

<dl> 〜 </dl>

説明

記述リストを示す。「リスト」参照。

カテゴリー

フロー・コンテンツ

コンテンツ・モデル

それぞれ1個以上のdt要素、それに続いて1個以上のdd要素。

dl要素の子要素に出来るのはdt要素とdd要素のみである。

書き方

<dt> 〜 </dt>

説明

dl要素の中で、用語または名前の部分を示す。「リスト」参照。

dl要素の子要素として利用される。

カテゴリー

なし

この要素を使うことができる場所

dl要素の中のdd要素またはdt要素の前。

コンテンツ・モデル

フレージング・コンテンツ

書き方

<dd> 〜 </dd>

説明

dl要素の中で、値の部分を示す。「リスト」参照。

カテゴリー

なし

この要素を使うことができる場所

dl要素の中のdt要素またはdd要素の後ろ。

コンテンツ・モデル

フロー・コンテンツ

書き方

<dfn> 〜 </dfn>

説明

主にdl要素の中のdt要素の中で、用語の定義部分を示す。「リスト」参照。

カテゴリー

フロー・コンテンツ／フレージング・コンテンツ

コンテンツ・モデル

フレージング・コンテンツ

書き方

<table> 〜 </table>

説明

表（table）を示す。「テーブル」参照。

カテゴリー

フロー・コンテンツ

コンテンツ・モデル

caption要素、colgroup要素、thead要素、tfoot要素、tbody要素、tr要素。

この要素には、テーブル関係の要素のみ子要素として入れることができる。

テーブル関係の要素でも、th要素とtd要素を直接の子要素とすることはできない。

入れる順序と個数は以下のように決められている。

1. caption要素を必要に応じて1つ入れる（0か、1つ入れる）。
2. colgroup要素を必要に応じた数入れる（0以上入れる）。
3. thead要素を必要に応じて1つ入れる（0か、1つ入れる）。
4. tfoot要素を必要に応じて1つ入れる（0か、1つ入れる）。
5. tbody要素を0以上、またはtr要素を1つ以上入れる。
6. tfoot要素を必要に応じて1つ入れる（0か、1つ入れる）。

書き方

<tr> 〜 </tr>

説明

table要素の中で、表の横一列（table raw）を示す。「テーブル」参照。

table要素の子要素として利用される。

カテゴリー

なし

この要素を使うことができる場所

table要素の中。

thead要素の中。

tbody要素の中。

tfoot要素の中。

コンテンツ・モデル

0個以上のtd要素かth要素

書き方

<td> 〜 </th>

説明

table要素の中で、表のデータのセル（見出しではないセル）を示す（table data cell）。「テーブル」参照。

カテゴリー

セクショニング・ルート

この要素を使うことができる場所

tr要素の中。

コンテンツ・モデル

フロー・コンテンツ

書き方

<th> 〜 </th>

説明

table要素の中で、表の見出しのセルを示す（table header cell）。「テーブル」参照。

カテゴリー

なし

この要素を使うことができる場所

tr要素の中。

コンテンツ・モデル

フレージング・コンテンツ

書き方

<caption> 〜 </caption>

説明

table要素の中で、表のキャプション（タイトル）を示す（table caption）。「テーブル」参照。参照。

カテゴリー

なし

この要素を使うことができる場所

table要素の中（最初の子要素として）。

コンテンツ・モデル

フロー・コンテンツ

書き方

<thead> 〜 </thead>

説明

主にtable要素の中で、表のヘッダ部分のtr要素をグループ化する（table header）。「テーブル」参照。

カテゴリー

なし

この要素を使うことができる場所

table要素の中で、caption要素、colgroup要素よりは後、tbody要素、tfoot要素、tr要素よりは前。

コンテンツ・モデル

0個以上のtr要素。

書き方

<tbody> 〜 </tbody>

説明

表のデータ部分のtr要素をグループ化する（table body）。「テーブル」参照。

カテゴリー

なし

この要素を使うことができる場所

table要素の中で、caption要素、colgroup要素、thead要素の後。

コンテンツ・モデル

0個以上のtr要素。

書き方

<tfoot> 〜 </tfoot>

説明

表のフッタ部分のtr要素をグループ化する（table footer）。「テーブル」参照。

カテゴリー

なし

この要素を使うことができる場所

table要素の中で、caption要素、colgroup要素、thead要素の後。

コンテンツ・モデル

0個以上のtr要素。

書き方

<strong> 〜 </strong>

説明

重要性の高い語句または文章を示す。

例

カテゴリー

フロー・コンテンツ／フレージング・コンテンツ

コンテンツ・モデル

フレージング・コンテン

書き方

<em> 〜 </em>

説明

強調する語句または文章を示す。

例

カテゴリー

フロー・コンテンツ／フレージング・コンテンツ

コンテンツ・モデル

フレージング・コンテンツ

書き方

<div> 〜 </div>

説明

汎用的な要素。

特別な意味を持たず、あらかじめ用意されている要素の中に妥当なものがない場合に、独自の用途を付加したり、他の要素をグループ化したい場合に利用する。大抵の場合、class属性、id属性で、用途やグループ名を指定する。

カテゴリー

フロー・コンテンツ

コンテンツ・モデル

フロー・コンテンツ

書き方

<span> 〜 </span>

説明

汎用的な要素。

特別な意味を持たず、文中で使用する要素として、あらかじめ用意されている要素の中に妥当なものがない場合に、独自の用途を付加するのに利用する。大抵の場合、class属性、id属性で、用途やグループ名を指定する。

カテゴリー

フロー・コンテンツ／フレージング・コンテンツ

コンテンツ・モデル

フレージング・コンテンツ

書き方

<blockquote> 〜 </blockquote>

説明

書籍や他のWebなどの情報から、あるブロックの範囲で引用された文章を示す。

カテゴリー

フロー・コンテンツ／セクショニング・ルート

コンテンツ・モデル

フロー・コンテンツ

書き方

<q> 〜 </q>

説明

書籍や他のWebなどの情報から、文中に挟まれたかたちで引用される文章を示す。

カテゴリー

フロー・コンテンツ／フレージング・コンテンツ

コンテンツ・モデル

フレージング・コンテンツ

書き方

<cite> 〜 </cite>

説明

引用している作品のタイトル（書名、映画タイトル、曲名などの出典）を示す。

カテゴリー

フロー・コンテンツ／フレージング・コンテンツ

コンテンツ・モデル

フレージング・コンテンツ

書き方

<pre> 〜 </pre>

説明

整形済みテキスト（preformatted text）

スペースやタブ、改行で整形したテキストをそのままの状態で表示する。プログラムのソースコードなどを（インデントされた状態で）表示したい場合などに利用される。

カテゴリー

フロー・コンテンツ

コンテンツ・モデル

フレージング・コンテンツ

書き方

<hr>

説明

段落における話題や主題の変わり目を示す（罫線を挿入する要素ではない）。

カテゴリー

フロー・コンテンツ

コンテンツ・モデル

空

書き方

<br>

説明

改行を示す。

本文は適切にp要素が用いられていれば自然と改行されるので、br要素で改行をすることはない。見出しを2行にしたい場合や、詩、住所などに利用することが多い。

カテゴリー

フロー・コンテンツ／フレージング・コンテンツ

コンテンツ・モデル

空

書き方

<code> 〜 </code>

説明

プログラムやHTMLなどのコンピュータで利用されるコードを示す。

カテゴリー

フロー・コンテンツ／フレージング・コンテンツ

コンテンツ・モデル

フレージング・コンテンツ