一歩ずつ学ぶ

最終更新日:

HTML5入門!基本中の基本、HTML5のひな形をつくる

HTML5で文書を記述していくにあたって、「ここからスタートする」という ひな形があります。ここではひな形をつくるプロセスをみていきます。 入門者にもわかるように一歩ずつ進めていきます。

今回作るひな形の完成形

最初に、今回作るひな形の完成形を表示しておきます。

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

</body>
</html>

ドキュメントタイプの宣言

まずは文書がHTML5で記述されていることを知らせる必要があります。 これを「ドキュメントタイプの宣言」といい、HTML5では以下のように 記述します。DOCTYPEは大文字で、htmlは小文字で記述してください。

<!DOCTYPE html>

html タグ

次にhtml タグでHTML文書の開始と終了を知らせます。 タグは通常、「開始タグ」と「終了タグ」をワンセットとします。 htmlタグの場合は開始タグが<html>、終了タグが</html>です。 記述場所はドキュメント宣言の下です。

HTML文書が日本語の文書であることを示すlang="ja" も記述してください。 英語の場合はlang="en"と記述します。

タグに関しては大文字と小文字どちらでも大丈夫なのですが、 今はほとんどのサイトが小文字で記述していますので小文字で記述 することをおすすめします。(ちなみにXHTMLは小文字と決められています)

<!DOCTYPE html>
<html lang="ja">

</html>

HTML文書が<html>から始まって、</html>で終了という意味です。 今後は<html></html>の中にコンテンツを記述していきます。

head タグ

head タグ(<head> ~ </head>)を記述します。場所は先ほど書いた <html> ~ </html>の内側です。head タグ内には文書のタイトルや、 キーワード、製作者の情報等の文書に関する情報を記述します。 タイトル以外はブラウザに表示されません。

<!DOCTYPE html>
<html lang="ja">
<head>

</head>

</html>

body タグ

body タグ(<body> ~ </body>)を記述します。場所はhtmlタグの内側、 headタグの下です。bodyタグの内容が、実際にブラウザに表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>

</head>
<body>

</body>
</html>

HTMLの構造をリスト形式にすると下記のようになります。html要素の中に head要素、body要素があります。

  • html
    • head
    • body

文字コード指定

次は文字コードの指定をします。ホームページを作成する場合、 昔はshift-jisやeuc等の文字コードを使用していましたが、 現在はutf-8という文字コードを使用するのが一般的です。

文字コードの指定にはmeta タグを使用します。 meta タグはheadタグ内に記述し、既存のタグでは定義されていない メタ情報を記述するときに使用します。注意点としては、metaタグには 終了タグがないことです。 基本的にタグには開始タグと終了タグがあるといいましたが、 metaタグには終了タグがないので慣れるまでは注意が必要です。

charset="utf-8"で文字コードがutf-8であることを意味します。 charsetはcharacter setの略です。

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

</body>
</html>

インデント(字下げ)について

上記の様にインデント(字下げ)した方が見やすい方はタブかスペースで字下げしてください。 HTMLは記述分量によって構造が深くなる場合があります。その時に、 いちいち字下げしていると逆に見にくくなります。自分の見やすい範囲で 適度に字下げしてください。

titleタグ

最後にtitle タグ(<title>~</title>)を記述します。場所はheadタグの内側です。 titleとついている通り、文書のタイトルをあらわします。 titleタグの内容は、ブラウザのタイトルバー(一番上)に表示されます。 headタグの内側でありさえすれば<meta charset="utf-8">の上でも下でも どちらでも構いません。

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

</body>
</html>

HTMLの構造も示しておきます。html要素の中にhead要素、body要素があり、 head要素の中にmeta要素、titile要素があります。

  • html
    • head
      • meta
      • title
    • body

ひな形完成

これでひな形が完成です。以降はこのひな形からスタートしていきます。

↑ PAGE TOP