ホームページ作成講座HTMLの骨組み

  1. HOME
  2. ホームページ作成講座
  3. HTMLの骨組み

これから、実際にHTMLを書いていきます。まずはHTML5の基本骨格を見ていきましょう。

HTML5の基本骨格

まずは基本骨格を見てみましょう。

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

</body>
</html>

これが基本の骨格です。と言っても、今の段階では何がなんだか分からないと思います。 とりあえず、HTMLファイルにはこれを書き込むということを覚えておきましょう。

上記の骨格は、一字一句覚える必要はありません。これをコピーして、新規作成の際に貼り付けすればＯＫです。

基本骨格の説明

上記の基本骨格の意味を一応見ておきましょう。

DOCTYPE宣言

<!DOCTYPE html>

DOCTYPE宣言で、HTMLのバージョンを記述します。上記のように記述したらHTML5となります。

HTMLタグ

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

この<html>～</html>にhtmlタグというものを記述していきます。 最初の<html>を開始タグ、最後の</html>は終了タグと呼びます。終了タグにはスラッシュ「/」が付いています。

開始タグの中には、lang="ja"というものがあります。これは、日本語で記述されることを示しています。 この、タグの中に書かれるものを属性と呼びます。ここでは「lang」が属性です。そして「ja」を属性値と呼びます。

ヘッダ

<head>～</head>

<head>～</head>の中には、人ではなくブラウザに読ませる情報を記述します。 ここに記述した内容で人に見えるのは、ページタイトルくらいです。

文字コードの指定

<meta charset="utf-8">

ヘッダ部分で、文字コードの指定を行ないます。HTML5ではUTF-8という文字コードを用います。 文字コードの指定は、このように記述します。

タイトルタグ

<title></title>

<title>～</title>に書かれた文字が、ページタイトルになります。検索の際に表示される重要な部分です。 慎重に言葉を選んで記述しましょう。

ボディ

<body>～</body>

この<body>～</body>に書かれた部分が、ブラウザに表示されます。人に見てもらう部分です。

実際にはこれ以外にもたくさん記述することがあります。しかし最初から全部覚えようとすると大変なので、 まずはこの骨格だけ扱えるようになりましょう。

INDEXへ