【HTML/CSS第2回】HTMLファイルの仕組みについて理解しよう【HTML】

今回は、HTMLファイルの仕組みについてお伝えします。

このブログを読むことで以下のことができるようになります。

HTMLファイルの仕組みを理解することができる。

HTMLファイルを作ろう
HTMLファイルの仕組み
練習問題
まとめ

HTMLファイルを作ろう

まずは、HTMLファイルを作りましょう。

前回のブログでもお伝えしたみたいに、「002」というフォルダを作って、その中に「index.html」ファイルを作成してください。

そして、以下のようにコーディングを行ってください。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hello</title>
    </head>

    <body>
        <p>Hello, World!</p>
    </body>
</html>

コーディングを行った後は保存して、実行してみましょう。

実行は、ファイルをブラウザで開くだけです！

実行できましたか？

お気づきの方もいると思いますが、実はこのコード、前回紹介したコードと全く同じです。

このコードに、HTMLのファイルの仕組みが隠されているので、今回はこのコードを使ってご紹介しますね。

HTMLファイルの仕組み

では、HTMLファイルの仕組みをご紹介します。

<!DOCTYPE html>

まず、<!DOCTYPE html＞ですが、これは、DOCTYPE宣言（ドクタイプ宣言）というものです。

どういうことを表しているかと言うと、このファイルのHTMLのバージョンはいくつかということを表しています。

HTMLには、様々なバージョンがあるのですが、今回は単なる「HTML」と書かれていますね。
これは、「HTML5」というバージョンであることを表しています。

<html>〜</html>

<html>〜</html>は、<!DOCTYPE html>のすぐ後に記述します。
意味は、「これはHTMLの文書ですよ」ということです。
また、最初の<html lang=”ja”>とは、language = japanese、つまり、言語が日本語であることを表しています。

<head>〜</head>

<head>〜</head>では、ページのタイトルや説明文などを記述します。
この部分はブラウザの画面には表示されません。
（タイトルはタブのところに表示されます。）

<meta charset=”UTF-8″>

<title>〜</title>

<title>〜</title>は、ページのタイトルを記述します。
ここに記述することで、タブのところに表示されたり、検索したときのページのタイトルとして表示されたりします。

<body>〜</body>

<body>〜</body>には、ブラウザに表示させる本文を書きます。

〜

〜には、文章の段落を表しています。
この中に、実際にブラウザに表示させる文章を書きます。

<!doctype HTML>はファイルのバージョンを表す
<html>〜</html>は、ドクタイプ宣言のすぐ後に書き、HTMLの文書であることを表す
<head>〜</head>では、ページのタイトルや説明文などを記述する
<meta charset=”UTF-8″>は、文字コードを「UTF-8」というものにするということを表す
<title>〜</title>は、ページのタイトルを記述する
<body>〜</body>には、ブラウザに表示させる本文を書く
〜には、実際にブラウザに表示させる文章を書く

練習問題

それでは練習問題です。

自分の名前をブラウザに表示するコードを書きましょう。
ページのタイトルは「name」としてください。

答え

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>name</title>
    </head>

    <body>
        <p>CPLAB</p>
    </body>
</html>