記事の説明

この記事ではHTML文書の基本構成に対して扱います。

HTML文書の基本構成

HTML文書はさっくりと以下のような構成になってます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
   Hello World!
  </body>
</html>

なんか、「<」や「>」が沢山ありますね。今回は中身の解説は置いといて基本的な構成要素を説明します。
まず、「<>に囲まれた部分を「コンテンツ」、「<」と「>」を「タグ」、その「タグ」に囲まれた「要素」が構成されてます。
それから、前に置く「タグ」を「開始タグ」と呼び、どこから要素が始まっているのかやどこで効果が始まるのかを表しています
最後に、後に置く「タグ」を「終了タグ」と呼び、どこで要素が終わっているかを表しています。
わかりやすく以下の段落を使って説明してみましょう。

<p>My cat is very grumpy</p>

上記の様な場合

  • <p>は開始タグ(opening tag)
  • </p>は終了タグ(closing tag)
  • “My cat is very grumpy”と言う文字列はコンテンツ(content)
  • <p>My cat is very grumpy</p>を一つの要素(element)

と言います。一応これで基本的なHTMLの構成の説明は終わりました。次の章からは本格的な使い方を説明します。

Web開発-初めてのHTML

プログラミングメイン