HTML・CSS独学応援 2-3「タグについて」

前回コピーしたコードを確認しながら
コードの中身を、学んでいきましょう。

今回のポイントは

HTMLコードの中にまとまりを見つけることです。

少し細かい説明もしますが、
コードを見て、まとまりを見つけることができればOKです。

前回コピーしたコードを見てみよう

<!DOCTYPE html>
<html lang = "ja">
    <head>
        <meta charset = "UTF-8">
        <title>はじめてのHTML</title>
    </head>
    <body>
        <h1>はじめてのHTML</h1>
        <p>これがWEBページを作るための、HTMLです。</p>
    </body>
</html>

前回は、このコードをコピーして使いました。

複雑そうに見えますが、グループに分けると
見え方が少し変わってきます。

イメージとしては、こんな感じです。

線で囲んでいる部分が、大まかに見たグループです。

きみどり色の線で囲んでいる部分を見てください。

<head>っていう部分から
</head>っていうところまでまとめています。

<body>っていう部分から
</body>っていう部分までをまとめています。

この< >で囲まれた英語のことを”タグ”っと呼びます。

タグとは

タグはパソコンはに対して
「ここはこう言う意味ですよ」
って教えてあげるものです。

HTMLでは、タグごとに役割が決められています。

タグは「開始タグ」と「終了タグ」という2種類あります、
組み合わせて使うのが基本です。

開始タグ

<head>のように、<  >で囲まれたものが、開始タグと呼ばれます。
「ここからがheadだよ」とパソコンに伝えています。

終了タグ

</head>のように、/(スラッシュ)を付けたタグが終了タグと呼ばれます。

「ここまでがheadだよ」ってパソコンに伝えています。

要素

開始タグ~終了タグまでのまとまりを
「要素」って表現したりします。

あらためてコードを見てみよう

開始タグと終了タグを意識して、コードを見てみましょう。

グループがしっかりと見えて、印象が変わったと思います。

各タグの意味を簡単に見ていきましょう。

まずは、きみどり色のグループから解説します。

<head> ~ </head>

ここは、webページの設定部分です。
表示はされないけど、パソコンに設定を伝える大事なところです。

中に、<meta charset="UTF-8">っていうのと<title>が
書かれているけど、この説明は別記事で説明します。

今回は、設定部分は<head>に書くって覚えてください。

<body> ~ </body>

ここが、表示される部分です。

この中に、書いたものが
実際にWEBページとして表示されます。

サンプルでは<h1>と<p>っていうものが書かれているけど
ここも別記事で紹介しますので、今回はスルーします。

表示する内容は<body>に書くって覚えてください。

<html lang = "ja"> ~ </html>

外側のオレンジの線で囲んだグループでは、
パソコンに、「この中が、HTMLだよ」って教えています。

<!DOCTYPE html>

「HTMLを使いますよ!」ってパソコンに宣言しています。

ここには、終了タグがありません。
中には、終了タグが無いものも存在します。

まとめ

前回使用した、HTMLのコードの中身を確認しました。

HTMLをタグで、まとめた塊としてみることができるようになったらOKです。
この塊のことを、「要素」って呼びます。

HTMLには、沢山のタグがあり
適切なタグを使って、パソコンに思いを伝えるのが目的です。

つまり、HTMLを学ぶ目的は、
タグを正しく使えるようになる。

っと言うことできます。

タグについては、ポイントをしっかり押さえておきましょう。

タグについて

  • < (小なり) と > (大なり)で囲む。
  • 開始タグと終了タグがある。
  • 終了タグが無いものもある

暗記する必要はないです

タグには、たくさんの種類があります。

HTMLクイックリファレンスには、すべてのタグがまとめられているので
必要な時に調べればOKです。

暗記する必要はありません。