HTML 文書の基本構造は「家の骨組み」みたいなもの
まずイメージからいきます。
HTML ファイルは、
ただタグを並べればいいわけではなく、
「決まった骨組み（ひな形）」 を持っています。
その骨組みがあるからこそ、ブラウザは
これは HTML だな
タイトルはこれだな
中身の本文はここからだな
と正しく理解できます。
この「骨組み」を知らないまま書き始めると、
なんとなく動くけど、どこか不安定なページになります。
最小限の HTML 文書の形をまず眺めてみる
これが“教科書的な”基本形
いきなりですが、まずは完成形を見てください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめての HTML ページ</title>
</head>
<body>
<h1>こんにちは、HTML！</h1>
<p>これは最小限の HTML 文書の例です。</p>
</body>
</html>
この中に、
HTML 文書の「基本構造」が全部入っています。
上から順に、
<!DOCTYPE html><html><head><body>
この 4 つが“骨組みの柱”です。
ここから、一つずつかみ砕いていきます。
<!DOCTYPE html> は「これは HTML5 ですよ」という宣言
なくても動くことが多いけど、必ず書くべきもの
一行目のこれです。
<!DOCTYPE html>
これは「この文書は HTML5 です」とブラウザに伝える宣言です。
正直、これがなくても
最近のブラウザはそれなりに表示してくれます。
でも、なくすとブラウザが
「古い互換モード」で動こうとすることがあり、
レイアウトが崩れたり、
CSS の解釈が微妙に変わったりします。
なので、現代の HTML では
「とりあえず一行目に <!DOCTYPE html> と書く」
これは“お作法”として覚えてしまってOKです。
<html> 要素は「ページ全体を包む一番外側の箱」
言語情報もここで伝える
次にこれです。
<html lang="ja">
...
</html>
<html> は、
「この中身が HTML 文書ですよ」
という一番外側の箱です。
ここで特に大事なのが lang 属性です。
<html lang="ja">
これは「このページの主な言語は日本語です」と宣言しています。
これがあると、
検索エンジンが言語を正しく認識できる
スクリーンリーダーが日本語として読み上げてくれる
ブラウザが言語に応じた処理をしやすくなる
といったメリットがあります。
日本語のページなら lang="ja"
英語なら lang="en"
といった感じで、
「ページの言語は必ず明示する」 ことを習慣にしておくと良いです。
<head> は「ページの設定・メタ情報」を書く場所
画面には直接見えないけれど、超重要なエリア
<head> はこういう部分です。
<head>
<meta charset="UTF-8">
<title>はじめての HTML ページ</title>
</head>
ここには、
「ページの中身そのもの」ではなく
「ページについての情報」 を書きます。
代表的なものを見ていきます。
文字コードの指定：<meta charset="UTF-8">
<meta charset="UTF-8">
これは「この HTML は UTF-8 という文字コードで書いてあります」と宣言しています。
これを書かないと、
日本語が文字化けすることがあります。
現代の Web では、
「文字コードは UTF-8 一択」 と言っていいので、
毎回この一行を入れる、と覚えてしまってOKです。
タイトルの指定：<title>
<title>はじめての HTML ページ</title>
これは、
ブラウザのタブに表示される文字
検索結果に出るページタイトル
などに使われます。
画面の中には直接出てきませんが、
ユーザーが「今どのページを見ているか」を判断する
大事な情報です。
「とりあえず全部 タイトル にしておく」ではなく、
ページごとに意味のあるタイトルを付ける ことが大事です。
例：
トップページ → My Cafe - ホーム
メニュー → My Cafe - メニュー
アクセス → My Cafe - アクセス
<body> は「画面に見える中身」を書く場所
ユーザーが実際に目にするのはここ
<body> はこうです。
<body>
<h1>こんにちは、HTML！</h1>
<p>これは最小限の HTML 文書の例です。</p>
</body>
ここに書いたものが、
実際にブラウザの画面に表示されます。
見出し
段落
画像
リンク
ボタン
など、
「ユーザーが触れるもの」は全部 <body> の中に置く
と覚えてください。
逆に言うと、<head> の中に <h1> や <p> を書くのは間違いです。
ひな形を“手で書ける”ようになると一気に楽になる
自分の手でゼロから書いてみる
ここまでの話をまとめると、
最小限の HTML 文書はこうでした。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめての HTML ページ</title>
</head>
<body>
<h1>こんにちは、HTML！</h1>
<p>これは最小限の HTML 文書の例です。</p>
</body>
</html>
これを、
何も見ずに自分の手で書けるようになる と、
HTML のスタートラインに立てます。
最初はエディタのスニペット（! → Enter でひな形が出るやつ）に頼ってもいいですが、
一度は「全部自分で打ってみる」ことをおすすめします。
打ちながら、
ここが DOCTYPE
ここが html
ここが head
ここが body
と、頭と指で覚えていく感じです。
よくある“やりがちミス”と直し方
<head> と <body> をごちゃ混ぜにする
悪い例：
<head>
<meta charset="UTF-8">
<title>テスト</title>
<h1>こんにちは</h1> <!-- ここに書いちゃダメ -->
</head>
<h1> は「中身」なので、
必ず <body> の中に移動します。
正しい形：
<head>
<meta charset="UTF-8">
<title>テスト</title>
</head>
<body>
<h1>こんにちは</h1>
</body>
<html> や <!DOCTYPE html> を省略してしまう
ローカルで試していると、
これを省略しても「なんとなく動く」ことが多いです。
でも、本番サイトや他人と共有するコードでは、
必ず書く癖をつけておいた方がいい です。
「動くかどうか」ではなく
「正しい形かどうか」を基準にする、という感覚です。
初心者として「HTML 文書の基本構造」で掴んでほしいこと
HTML 文書には、
必ず押さえるべき“骨組み”がある という感覚を持ってください。
一行目の <!DOCTYPE html> で「これは HTML5」と宣言する<html lang="ja"> でページ全体を包み、言語を伝える<head> には「設定・メタ情報」（文字コード・タイトルなど）を書く<body> には「画面に見える中身」を書く
あなたが新しい HTML ファイルを作るときに、
この 4 つが自然に指から出てくるようになったら、
もう「HTML を触っている人」ではなく
「HTML を理解している人」の側にいます。