HTMLの基本的な書式について

HTML要素の書き方

HTMLページは1つ1つの要素が集まって構成されています。
今回はそれらの要素を最小単位に分解し、HTMLの基本となるマークアップの書式を解説していきます。

HTMLの要素には、大きく分けて次の2種類があります。

開始タグ & 終了タグで囲む要素

「<p>テキスト</p>」のようにテキストや他のHTML要素を囲む要素です。

コード例

<p>テキスト</p>

先頭の「<p>」を開始タグ、末尾の「</p>」を終了タグ(または閉じタグ)と呼びます。
終了タグにのみ「/ (スラッシュ)」がつきます。

そして、開始タグ〜終了タグまでを要素、または今回の場合だとp要素とも呼ぶことができます。

囲まない要素

単体で存在し、他の要素を囲まない要素を空要素と呼びます。

コード例

<img src="images/photo.jpg" alt="風景写真">

画像の読み込みで使うimg要素、改行するbr要素、メタデータを記述するmeta要素などが空要素に該当します。

空要素は任意で末尾に「/ (スラッシュ)」を記述することもできます。

コード例

/* スラッシュなし */
<img src="images/photo.jpg" alt="風景写真">

/* スラッシュあり */
<img src="images/photo.jpg" alt="風景写真" />

HTML要素の属性

HTML要素には必要に応じて属性を指定することができます。

コード例

<img src="images/photo.jpg" alt="風景写真">

上記のimg要素には、src属性とalt属性を記述しています。
このように、要素名の後ろに半角スペースで区切って属性を記述します。

「src=”images/photo.jpg”」のうち、srcを属性名、「“ (ダブルクォーテーション)」で囲んだ「images/photo.jpg」を値と呼びます。

値にはテキスト以外に記号を入れることもできますが、次の5種類の記号は直接記述することはできません。

• = (イコール)
• ‘ (シングルクォーテーション)
• “ (ダブルクォーテーション)
• < (小なり)
• > (大なり)

これらの記号を値として使いたい場合は、文字実体参照や数値文字参照を使って記述してください。
また、値を「“」で囲っている場合に限り「‘」を使うことができ、逆に「‘」で囲っている場合は「“」を使うことができます。

コード例

/* この値は使用できない */
<img src="images/photo.jpg" alt=""">

/* 文字実体参照や数値文字参照なら記号も使うことができる */
<img src="images/photo.jpg" alt="&lt;img要素&gt;の使用例">

/* 「"」で囲っている場合に限り「'」は使用可能 */
<img src="images/photo.jpg" alt="'">

/* 逆も使用可能 */
<img src='images/photo.jpg' alt='"'>

記号の文字実体参照 & 数値文字参照について詳しくは、別記事「HTMLの記号・特殊文字の文字コード表」をご覧ください。