HTML の書き方

この章のゴールは「HTML の最も基本となる文法(書き方)」を理解することです。

タグを理解する

まずは、前回も使ったの以下のサンプルコードをもう一度確認してみましょう。

1 2 3 4 5 6 7 8 9 10 11 12 13 14
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>ここは大きく表示されます。</h1>
    <p>pは「paragraph(=段落)」のpです。</p>
    <p>「img」を使うと画像の表示ができます。</p>
    <img src="https://html-css.sokushu-class.com/images/og-image-for-top.png" />
  </body>
</html>

前回はこのコードの中でも、Web ブラウザに表示されていた部分である 8~13 行目を取り上げました。

今回も同様に 8~13 行目の部分に注目して見ていきます。

8~13 行目で注目すべきポイント

8~13 行目の部分で今回特に見てもらいたいのは次の項目となります。

  • <body></body>
  • <h1></h1>
  • <p></p>
  • <img />

body, h1, p, img はそれぞれ HTML の「要素」と呼ばれるものなります。

HTML の「要素」については、2日目で改めて取り上げるので、「要素」の詳細を知りたい場合は、2日目の中にある「要素とは」を参考にしていただけたらと思います。

この要素を <>で囲ったものを「タグ」と呼びます。

例えば、<p>は「P タグ(ピータグ)」、<h1>は「h1 タグ(エイチワンタグ)」と呼んだりします。

大きく分けて 2 種類のタグがある

先程取り上げたタグを改めて以下に挙げておきます。

  • <body></body>
  • <h1></h1>
  • <p></p>
  • <img>

これらのタグを見ると大きく分けると、次の 2 種類のタグがあることに気付けたでしょうか?

  1. <h1></h1>のような 2 つで 1 ペアとなるタグ
  2. <img>のようにペアを持たないタグ

1. 2 つで 1 ペアとなるタグ

1 のような「2 つで 1 ペアとなるタグ」に関してはそれぞれ「開始タグ」「終了タグ」と呼んだりします。

例えば、<h1>は h1 要素の開始タグになります。それに対して</h1>は h1 要素の終了タグとなります。

そして開始タグと終了タグの間には

  • 文字を記述する
  • 別のタグを入れる

など、何かしらを挿入することができます。

サンプルコードを例にすると、次のように記述されているのがわかるかと思います。

  • <body></body>の間には h1, p, img 要素のタグが挿入されている
  • <h1></h1>の間には文字が挿入されている
  • <p></p>の間にも文字が挿入されている

2. ペアを持たないタグ

2 のような「ペアを持たないタグ」はいくつか種類がありますが、その 1 つに img 要素があります。

このペアを持たいないタグの要素は「空要素」とも呼ばれます。

空要素は 1 つめに取り上げた「2 つで 1 ペアとなるタグ」と異なり終了タグが無いため、「開始タグと終了タグの間に文字や他のタグを挿入できない」という特徴があります。

サンプルコードの 12 行目で使っている「img」要素を確認すると、終了タグが無いため文字や別のタグを挿入できないことに気付けます。

img 要素の中に「src="..."」と記述している部分がありますが、こちらは「属性」と呼ばれるものになります。

「属性」に関しては2日目の「要素の属性」で取り上げるので、詳細はそちらをご覧になっていただけたらと思います。

正直名前を覚える必要はありませんし、どんな要素が「空要素」かを暗記をする必要もありません。

様々なコードを見たり、コードを書いていくうちに「この要素に終了タグは不要だなと」なんとなく覚えてくるようになります。

仮に覚えられなかったとしても「MDN img」のような感じで調べたい要素について検索して、(ここでは img 要素について検索したとする)

ドキュメントを参考にすれば問題ありません。

ドキュメント内には例やサンプルコードが含まれているものもよくあるので、

文章を読むだけでは使い方のイメージが掴めない場合は、サンプルコードから使い方のイメージを掴むのも 1 つの手です。

HTML、CSS、JavaScript などについて調べたいときは「MDN」というサイトを参考にすることをオススメします。

Qiita や一般の誰かが書いた記事でも参考になるものはたくさんありますが、そのような情報の中には古くて今では使えない情報も含まれてたりします。

そういう意味でも MDN やその他公式のドキュメントなどを参照するクセを付けると良いです。(ドキュメントを読むことに慣れる意味も含めて)

  • 参考サイト: MDN

HTML はタグの入れ子でできている

もう一度、この章の最初に確認したサンプルコードを確認してみましょう。

1 2 3 4 5 6 7 8 9 10 11 12 13 14
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>ここは大きく表示されます。</h1>
    <p>pは「paragraph(=段落)」のpです。</p>
    <p>「img」を使うと画像の表示ができます。</p>
    <img src="https://html-css.sokushu-class.com/images/og-image-for-top.png" />
  </body>
</html>

大きく分けて 2 種類のタグがある」のおさらいになりますが、こちらのサンプルコード全体を通して以下の 2 種類のタグで構成されているのがわかります。

  1. <h1></h1>のような 2 つで 1 ペアとなるタグ
  2. <img>のようにペアを持たないタグ

また、1 の「2 つで 1 ペアとなるタグ」では、開始タグと終了タグの間に文字や別のタグを挿入できると解説しました。

これらの知識を得た上でサンプルコードを改めて確認すると、「HTML は入れ子になったタグで構成されている」ということがわかります。

もう少し見た目でもわかりやすく入れ子で箇条書きにまとめると、上記のサンプルコードを次のようにまとめることができます。

  • html タグの中には head タグと body タグがある
    • head タグの中には meta タグと title タグがある
      • title タグの中には文字が記述されている
    • body タグの中には h1 タグ、p タグ、img タグが記述されている
      • h1 タグの中には文字が記述されている
      • p タグの中には文字が記述されている

まとめ

今回の内容が理解できれば、この章の冒頭でも書いた「HTML の最も基本となる文法(書き方)」の知識を得たことになります。

つまり「HTML の最も基本となる文法(書き方)」が何かをまとめると次のとおりです。

  • HTML はタグが入れ子になって構成されている
  • HTML のタグは大きく分けて 2 種類のタグがある
    1. <h1></h1>のような 2 つで 1 ペアとなるタグ
    2. <img>のようにペアを持たないタグ


それでは次に、今回の最後に少し出てきた「html タグ」「head タグ」「body タグ」の役割をもう少し深堀りしていきましょう^^

results matching ""

    No results matching ""