HTMLの超基礎(headとbody)

HTMLを書き始める時にシンプルなものから始めると思いますが、一番最初にheadとbodyで書く内容の違いを覚えておきましょう。

HTMLの超基本構造

まずは、シンプルなHTMLの理解

他のプログラム基礎のHTMLでも、記載していますが、超基本的なHTMLはこちらになります。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>1つ目の要素</div>
    <div>2つ目の要素</div>
  </body>
</html>

この中の

  • headタグ
  • bodyタグ

にはそれぞれ、どのようなことを書いていくのかを覚えていきましょう。

headタグ

必要なファイル、情報をまとめる

headタグにはWebページとして表示するために、必要な情報を色々と記載していきます。

ここでは、まず、覚えておいて頂きたいこととして、
基本的に、Webページの表示に必要な、
「CSS」や「javaScript」
はこのheadタグに記載します。

実際にシンプルな例を用いて説明しますね。

<!DOCTYPE html>
<html>
  <head>
  <link rel="stylesheet" href="sample.css">
  <script type="text/javascript" src="sample.js"></script>
  </head>
  <body>
    <div>1つ目の要素</div>
    <div>2つ目の要素</div>
  </body>
</html>

このHTMLを例にすると、
「CSS」のファイルを使いたい時には、
headタグの中に書かれている、この部分のように
「linkタグ」
を用いて記述します。

<link rel="stylesheet" href="sample.css">

同じように、
「javaScript」ファイルを使いたい場合は、
headタグの中に書かれている、この部分のように
「scriptタグ(スクリプトタグ)」
を用いて記述します。

実際には、もっと色々な情報を埋め込んでいきますが、まずは、「CSS」と「javaScript」のそれぞれのファイルを使う時に、タグを使って記述することだだけでも覚えておきましょう。

bodyタグ

Webページの構造を記述する

これは、プログラミング基礎のHTML編
https://manabupanda.net/web-basic-html/
でも書いている「タグ」を使って、
Webページの構造を記述していきます。

シンプルな以下の構造なら

このように書きます。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>1つ目の要素</div>
    <div>2つ目の要素</div>
  </body>
</html>

このように、Webページの構造は
bodyタグの中に書き、headタグの中には書きません。

他のWebページのHTMLを見るとすごい複雑で、
headタグとbodyタグの中には、
「何が書かれているのかわからない」
「自分には、複雑なのは無理そう」
と感じるかもしれません。

しかし、最初の段階は、他のサイトのHTMLを見るときは、
「bodyタグの中に構造を書いているんだね。」
「色々と複雑な構造のために、タグがたくさんあるんだね」
くらいに軽く考えて、
自分ができる範囲から、少しずつ、HTMLのタグを理解していきましょう。