HTMLファイルの基本構造とは？

コーディング

2025/05/07 | R.T.

皆様こんにちは。株式会社道洋行、WEBチームのR.Tです。

せっかく記事を書くなら、続き物にできる企画にしたいなあと思い私が考えたのは、初学者向けの基本となるHTMLのお話でした。

業務に携わっていると、どうしてもおざなりになりがちな基礎の部分。
自作のテンプレートを使いまわしていたりして、そうこうしている間に実は知識が古くなっていたりしないか？という点を省みつつ、おさらいも兼ねて勉強しなおすことにしました。

1 HTMLの骨組みを知ろう
2 まとめ

HTMLの骨組みを知ろう

まずは大前提として、HTMLには決まった枠組みが存在しており、文書も画像も全てはその枠の中に配置されることで閲覧出来る状態になる、ということを知っておかなければなりません。

HTML（HyperText Markup Language）は、Webページを構成するための言語です。
私たちがWebブラウザで見るページは、企業のコーポレートサイトも、映画やゲームの公式サイトも、個人ブログも、すべてこのHTMLをもとに構築され、それをブラウザが解釈して表示されています。

基本的なHTMLファイルは、以下のような構造になっています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページタイトル</title>
</head>
<body>
    <!-- コンテンツがここに入る -->
</body>
</html>

`<!DOCTYPE html>`とは

「このHTML文書がどのバージョンのHTMLに準拠しているか」をブラウザに伝える宣言文です。
と言われてピンと来る人は10人に1人も居ないでしょう。

もう少し詳細に書くと、ブラウザに「この文書はこういう書式で作ったものだから、そのルールに則ってコードを解釈してくれ」という指示出しのこと。
人間で例えるなら「今から英語で喋るから」と宣言しておくことで、相手にも「なるほどこれから聞く内容は英語なんだな」と心構えをしてもらうわけです。

例えば英語の「Gift」は『贈り物』という意味ですが、これがドイツ語になると「Gift」は『毒』を意味します。
こういった「コーダーの意図とブラウザ側の解釈の行き違い」をなくすのが、この宣言文になります。

かつて、HTML4やXHTMLが林立していた時代は、この宣言に応じて文書の書き方にも多少の差異があったのですが、今はもうすっかり<!DOCTYPE html>の一つに統一されました。
これだけ覚えておけばひとまずOK、と言えますが、そういう覚え方をすると次の時代が来たときに慌ててしまうので、なぜ<!DOCTYPE html>という宣言が必要で、なぜ文頭に置いているのかは覚えておきましょう。

`<html lang="ja">`とは

こちらは「このページは日本語で書かれたページである」という宣言です。
文書の構造ではなく、言語をブラウザや検索エンジンに伝えるためのものですね。

これを見てGoogleが日本語版の検索結果ページに配置してくれたり、ブラウザ自体が持つ翻訳機能が正しく文章を読み取れたりするわけです。
他には、ブラウザの文字を読み上げてくれるスクリーンリーダーに、正しく文書を伝えるためにも重要な宣言なのです。

ちなみに英語のサイトなら<html lang="en">ですし、フランス語のサイトなら<html lang="fr">となります。
WEBサイトに海外版が求められるようなお仕事の場合、ここを忘れず切り替えておくようにしましょう。

headの役割

<head>タグは、Webページのメタ情報をまとめる部分で、タイトル、文字コード、スタイルシート、検索エンジン用の情報などを記述します。
ページそのものの表示には直接影響しませんが、検索エンジンやSNS、ブラウザにとって重要な情報源となります。

一つのHTMLに、<head>タグは一つだけしか存在できません。

ここの重要な点は、記述の大半がGoogleの検索エンジンなどの「プログラムが読むため」の情報であるという点です。
つまり人間によってファジーな解釈はしてもらえず、きちんとルールに則った記述が求められる箇所ということです。

巷でよく聞く「SEO対策」に深く関わる箇所でもあり、文章量の割に重要度がとても高い箇所でもあります。

bodyの役割

<body>タグは、実際にユーザーが閲覧する情報を記述するエリアです。
見出し、文章、画像、リンク、ボタン、動画など、ユーザーが目にする要素はすべてこの中に記述されます。
今皆さんが閲覧しているこのブログページも、<body>タグの中に記述されたものを閲覧しているわけですね。

一つのHTMLに、<body>タグは一つだけしか存在できません。

更にこの<body>タグの中に、定められた文書構造のルールに従って見出し、文章、画像などコンテンツを配置していくわけですが、この先は情報量が膨大になってしまうので、今日は全体の枠組みの話にとどめておきましょう。

まとめ

HTMLの基本構造を理解することは、Web制作において最初の大きな一歩です。
とは言え今回は本当に初歩の初歩である、HTMLを書くにあたっての一番外側の枠組みだけを紹介しました。

HTMLというのは枠組みを作った中に次の枠組みを作り、その中に更に枠組みを作ってコンテンツを並べていく…という入れ子構造が原則になっています。
なので、一番外側の枠組みの時点で誤解があると、その中で入れ子になっている全ての枠組みに悪影響が起きてしまうのです。

スローテンポな記事に感じるかもしれませんが、脆い土台の上では立派なWEBサイトは構築できません。
まずは基礎を固めて、それから次に行きましょう。

次回は<head>タグ内に書く、検索エンジン向けの記述についてまとめます。

当社サービスに関するご相談・お見積もりなど、お気軽にお問い合わせください。

お問い合わせフォーム

この記事の執筆者

R.T.

2013年に道洋行東京支店へ入社。Webチームに所属し、主にHTML/CSSやJavaScriptを用いたコーディングを担当しています。きちんとした文書構造をフロントエンドエンジニアの誉れとし、今はWEBアクセシビリティの勉強中です。Web制作のご相談やお問い合わせは、お気軽にどうぞ。

ブログ一覧