HTML & CSS

最終更新日:
公開日:

基礎

HTML

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

HTMLページを構成する要素のマークアップ方法や各パーツの名称、役割について解説します。

この記事のポイント

  • 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の記号・特殊文字の文字コード表」をご覧ください。