コンテンツ
まずは基本的な構造から
こんにちは、ホームページ制作のオイゾウです！
前回「初めてのホームページ作りに必要な知識：HTMLとは？」では、ホームページがHTMLという言語によって構成されていることを説明しましたが、ここからはそのHTMLについて具体的に、何回かに分けて詳しく解説していきます！
まずは以下の画像で構造を確認してみてください。
HMTLは主に
- DOCTYPE宣言
- html要素
という2つの要素があり（赤色の枠）、さらにhtml要素の中には
- head要素
- body要素
という2つの要素があります（茶色の枠）。
では、以下のとてもシンプルなHTML文書をさらっと読んでみましょう。
<html>
<head>
<meta charset=“UTF-8”>
<title>しのだ屋</title>
</head>
<body>
<h1>しのだ屋</h1>
<p>しのだ屋は創業82年です。さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。川越に来た際には是非立ち寄ってください。</p>
</body>
</html>[/html]
上記のHTML文書は実際にはこのように表示されます（クリックで表示）
DOCTYPE宣言
<!DOCTYPE html>は「HTML5で記述します」という意味で、つまりHTML文書のバージョンをここで最初に宣言しています。
「DOCTYPE」は大文字で「html」は小文字で書くようにしましょう。
html要素
<html>〜</html>
HTML文書は、必ずこのhtml要素が1つあり、かつ1つのHTML文書に複数のhtml要素は使えません。
そしてこのhtml要素は、1つのhead要素と1つのbody要素によって構成され、順番は必ずhead要素→body要素でなければなりません。
head要素とbody要素にはそれぞれ違った役割があります。
head要素
<head>〜</head>
人間でいう「頭」の部分。
この文書がどういったものかをブラウザに知らせる役割を持ちます。
今回のHTML例文ではhead要素内に<meta charset=“UTF-8”>（文字コード）と<title>しのだ屋</title>（タイトル）という2つの要素が入っていますが、文字コードやタイトル以外にも使用しているスタイルシート、このページの説明、作成者など様々な情報をここで記述します。
<meta charset=“UTF-8”>
metaとはメタ情報のことで、文字コードや文書の著者、キーワード、概要などを指定できます。
charsetとはキャラクター（文字）セット＝文字集合を表していて、ここでは「UTF-8」という文字コードを使用していることを指します。
UTF-8以外にもShift-JISやEUCなどいろいろあります。
metaとcharsetの間は半角スペースを空け、UTF-8は前後をダブルクォーテーションで囲みます。
<title>しのだ屋</title>
このHTML文書のタイトルが「しのだ屋」であると記述しています。
通常は企業名や店舗名、サービス名などをここに書きます。
body要素
<body>〜</body>
人間でいう「体」の部分。
ここに記述した内容がブラウザに表示されます。
<p>しのだ屋は創業82年です。さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。川越に来た際には是非立ち寄ってください。</p>[/html]
次回以降でheadとbodyを詳しく解説！
ホームページはこのようなHTMLの記述によって表示されます。
今回説明した内容は基本構造ですので、具体的なホームページの中身は今後説明していくhead要素やbody要素にどう記述していくかで大きく変わってきます。
ちょっと難しいかもしれませんが、ホームページ初心者の方にとってこの基本構造は「こんな感じになってるんだ」と何となく覚えておいてもらえれば今はそれでOKです。
次回以降で、head要素やbody要素の中に記述していくタグについてを詳しく説明していきます！
次ページ⇒HTMLタグの種類を覚えよう～ヘッダ情報
[…] 文字コード この文字コードと、その次のタイトルについては、前回「HTMLタグの種類を覚えよう～HTML文書の基本構造」の記事で説明してありますので、詳しくはそちらをご参照ください […]