HTMLの基本構造を徹底解説｜DOCTYPE・html・head・bodyの役割

HTMLの基本構造はDOCTYPE・html・head・bodyの4要素で成り立ちます。それぞれの役割と書く理由、lang属性やcharset・viewportの意味、header／main／article／footerの使い分けを解説し、コピーして使えるテンプレートも紹介します。

この記事でわかること

結論を先に書きます

HTMLの基本構造は、どんなページでも共通です。覚えるべき要素は4つだけ。DOCTYPE宣言・htmlタグ・headタグ・bodyタグです。

この4つの「入れ子の順番」と「役割の違い」さえ押さえれば、いきなり複雑なページを見ても迷いません。逆にここが曖昧だと、レイアウト崩れや文字化けの原因がつかめなくなります。

それぞれの要素を、書く理由とあわせて順に見ていきます。

HTMLの基本構造

• DOCTYPE宣言 → htmlタグ（文書全体のルート・langで言語を指定）
• • headタグブラウザ向けのメタ情報。画面には表示されない
  • bodyタグユーザーに見せるコンテンツ。画面に表示される

図：DOCTYPE宣言→htmlの中に、headとbodyが並列で入る。headとbodyは入れ子にしない。

HTMLの基本構造とは

どんなに複雑なWebページも、土台になる骨組みは同じです。この骨組みを理解することが、Web制作の第一歩になります。

HTMLファイルは、次の4つの要素で構成されます。まずは全体像を眺めてみてください。

<!DOCTYPE html> <html lang="ja">   <head>     <!-- メタ情報 -->   </head>   <body>     <!-- 表示コンテンツ -->   </body> </html> 

この4要素には、それぞれ明確な役割があります。下の表で全体を整理してから、個別に深掘りしていきましょう。

要素	役割	画面表示
	HTML5文書だと宣言する	しない
	文書全体のルート・言語指定	しない
	ブラウザ向けのメタ情報	しない
	ユーザーに見せるコンテンツ	する

ポイントは、画面に表示されるのは の中身だけという点です。残り3つは「ブラウザへの指示書」だと考えるとスッキリします。

DOCTYPE宣言の役割

最初に書くのが、DOCTYPE宣言です。

<!DOCTYPE html> 

何を宣言しているか

これは「このファイルはHTML5で書かれています」とブラウザに伝える宣言文です。タグではなく宣言なので、終了タグはありません。

必ず書く理由

DOCTYPE宣言がないと、ブラウザが「互換モード（Quirks Mode）」で動きます。互換モードでは、CSSのレイアウトが意図どおりに表示されないなどの不具合が起きやすくなります。

そのため、すべてのHTMLファイルの1行目に必ず書くのが基本です。

htmlタグとlang属性の役割

DOCTYPE宣言のすぐ下に置くのが、 タグです。

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

htmlタグは文書全体のルート

は、HTML文書全体を囲むルート（root＝根）要素です。head・bodyを含むすべての内容は、このタグの中に書きます。

lang属性で言語を伝える

lang="ja" は言語コードの指定です。代表的な値は次のとおりです。

値	言語
ja	日本語
en	英語
zh	中国語

lang属性は地味ですが、次の3点で効いてきます。

日本語サイトでは lang="ja" を設定しておきましょう。

headタグの役割と書く要素

次は です。ここはユーザーには見えませんが、Web制作では非常に重要なエリアになります。

headとbodyの役割分担

headタグ

画面表示

されない

入れるもの

charset・viewport・title・description・CSSの読み込み

役割

ブラウザや検索エンジンへの指示書

bodyタグ

画面表示

される

入れるもの

header・main・article・footer などのコンテンツ

役割

読者が実際に目にする中身

図：headは画面に出ない指示書、bodyは画面に出る中身。2つは並列で入れ子にしない。

<head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta name="description" content="ページの説明文">   <title>ページタイトル | サイト名</title>   <link rel="stylesheet" href="style.css"> </head> 

headは「画面に出ない情報」のエリア

には、ブラウザや検索エンジンに伝える情報を書きます。head内の内容は画面に表示されません。

headに書く主な要素

headに置く代表的な要素を、役割とあわせて整理します。

要素	役割
	文字コードの指定。日本語の文字化けを防ぐ
	スマホ表示の最適化。なければ縮小表示になる