もし、<!DOCTYPE html>を書かなかった場合どうなるか

HTMLの文書の最初に書く <!DOCTYPE html> は、ブラウザに「この文書はHTML5です」と教えるための宣言です。
もし、この宣言を書かずにHTMLを作ると、ブラウザは「古いHTMLかもしれない」と判断し、互換モード（Quirksモード） で表示します。

互換モード（Quirksモード）とは？
- 互換モードは、ブラウザが古い時代のHTMLや古いブラウザ向けに、表示を補正してくれるモードです。
- 過去のブラウザでは、HTMLの仕様が統一されていなかったため、表示がバラバラにならないように互換モードが作られました。
- つまり、ブラウザが「この文書は古いHTMLかもしれない」と判断すると、最新のCSSやHTML5の機能を正確に適用せず、古い方式に合わせて表示します。

互換モードで起こること
1. レイアウトが崩れる：CSSで指定した幅や余白が思った通りに表示されないことがあります。
2. ブラウザごとに表示が違う：Chrome、Edge、Firefoxなどで同じHTMLなのに見た目が変わることがあります。
3. HTML5の新しいタグや機能が正しく動かないことがある：<section> や <article> などHTML5で追加されたタグや、CSSの新しいプロパティが意図した通りに機能しないことがあります。

まとめ：
- <!DOCTYPE html> は、HTML5文書であることをブラウザに伝える「必須の宣言」です。
- 書かないとブラウザが互換モードで表示し、レイアウトやスタイルが崩れる可能性があります。
- 初心者のうちは必ず最初に書く習慣をつけると、後で困りにくくなります。

<html lang="ja"> について

HTML文書の最上位タグである <html> は、文書全体を囲む「箱」のようなものです。
すべてのHTMLタグ（<head> や <body> など）は、この <html> の中に入ります。

<html lang="ja"> の記述には、それぞれ意味があります。
- html … HTML文書全体を表すタグ
- lang … language（言語） の略
- ja … Japanese（日本語） を表す
つまり language = Japanese（言語 = 日本語） となり、 「このHTMLは日本語の文書である」とブラウザに伝える意味になります。

lang="ja" は、この文書の言語が日本語であることをブラウザや検索エンジンに伝えるための属性です。
- ブラウザやスクリーンリーダー： 日本語を正しく表示・読み上げできるようになる
- 検索エンジン： 「このページは日本語ページ」と認識される
- 翻訳ツール： Google翻訳などで正しく言語を判別でき、翻訳精度が上がる

なぜ lang を <html> の中に書くのかというと、
文書全体の言語情報は最上位要素である <html> に設定するのが基本だからです。
もし一部だけ別の言語を使いたい場合は、<p lang="en"> のように個別のタグにも指定できます。

この指定をしないと、ブラウザや検索エンジンが文書を誤って英語など他の言語と判断する可能性があります。
その結果、文字化けや不自然な読み上げにつながる場合があるため、必ず設定しておくことが推奨されます。

まとめ：
1. <html> はHTML文書全体を囲む最上位タグ。
2. lang="ja" を指定することで、日本語文書であることを伝えられる。
3. 文書全体の言語は <html> に、部分的に言語を変える場合は各要素に指定する。

なぜ、HTMLを使用するのか

簡単に言うと、HTMLは「ウェブページを作るための言葉（ルール）」です。 単に文章を書くのではなく、ブラウザに「ここは見出し」「ここは段落」「ここは画像」「ここはリンク」と伝えるために使います。 

普通のテキスト（.txt）
こんにちは、世界！
これはリンク: https://example.com

HTML（.html）
<h1>こんにちは、世界！</h1>
<p>これは<a href="https://example.com">リンク</a>です。</p>

上の例のように、同じ内容でも HTML を使うと「リンクがそのままクリックできる」「見出しや段落として意味が伝わる」など、ブラウザが理解して適切に表示・操作できるようになります。

HTML を使う主な理由（初心者向けポイント）

身近な例え

HTML は建物で言えば 「骨組み（構造）」、CSS は 「内装や色」、JavaScript は 「電気や動く仕組み」 にあたります。 骨組み（HTML）がないと、内装（見た目）や電気（動き）をうまく取り付けられません。

注意点・限界

まとめ（初心者への道しるべ）

  1. まずは HTML で「文書の構造」を書いてみる（見出し・段落・リスト・リンク）。
  2. 次に CSS で見た目を整える（色や余白・レイアウト）。
  3. 最後に JavaScript で必要なら動きをつける（ボタンの動作など）。

HTMLの歴史と各バージョン（と宣言＝DOCTYPE）の意味

まず短く全体像を言うと、HTMLは「ウェブページの共通ルール」を決める言語で、 時代とともに機能が増えたり書き方が整理されてきました。各時代の「名前（バージョン）」と 「宣言（DOCTYPE）」は、ブラウザや検証ツールに対して「この文書はどのルールで書かれているか」を教える役割があります。

簡単な歴史（初心者向けの要点）

代表的な DOCTYPE（宣言）と意味

● HTML5（現在の推奨）
とても短くて分かりやすい宣言です。ブラウザに「HTML5のルールで解釈してね」と伝えます。 

<!DOCTYPE html>

● HTML 4.01（例：Strict）
昔は長い宣言で「どの DTD（文法ルール）を使うか」を正確に示していました。標準寄りの書き方を使うときの宣言例： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

● HTML 4.01 Transitional（互換性あり）
古いブラウザ向けの緩いルールを残すための宣言（過去の互換性のために使われた）。例： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

● XHTML 1.0（例：Strict）
XML のルールに従うため、文法はより厳密。HTML を XML として扱う場合の宣言例： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DOCTYPE（宣言）は何をしているのか？ — 初心者向けに簡単に

  1. ブラウザに「どのルールで読むか」を教える
    DOCTYPE を読んで、ブラウザは「標準モード（Standards mode）」で描画するか、 「互換モード（Quirks mode）」で描画するかを決めます。標準モードだと最新の仕様に従って表示されます。
  2. 検証（バリデーション）の基準を決める
    例えば HTML4 や XHTML を使うときは、宣言に合わせたルールでファイルの文法チェック（検証）ができます。
  3. 過去の複雑さを解消するために HTML5 は簡潔にした
    以前の長い宣言（DTD参照）は複雑で、結果としてブラウザの動作差が出やすかったため、 HTML5 では簡潔な `` だけで済むようになりました。

実務上の大事なポイント（初心者がまず覚えること）

最後に — 簡単なまとめ例（テンプレート）

現代の標準的な HTML5 のファイルは、先頭にこれを書くだけでOKです：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
</head>
<body>
  <h1>こんにちは</h1>
</body>
</html>

— まずはこの形（HTML5）を使い、少し慣れたら歴史や古い書き方（HTML4 / XHTML）を学ぶ、という順序がおすすめです。

<HTML>の大文字と小文字について

HTMLのタグ（例：<html> や <body>）は、大文字でも小文字でも動作します。 例えば次の2つはブラウザ上で同じ結果になります。

大文字で書いたコード

<HTML>
  <BODY>
    <H1>こんにちは</H1>
  </BODY>
</HTML>

小文字で書いたコード

<html>
  <body>
    <h1>こんにちは</h1>
  </body>
</html>

では、なぜ大文字・小文字どちらでも動作するのかというと、HTMLの仕様上、 HTMLは元々 **タグ名は大文字・小文字を区別しない** というルールになっているためです。

しかし、慣習として、現在のHTML（HTML5）では小文字で書くことが推奨されています。理由は次の通りです：

まとめると：

<head> タグについて

これまで、<!DOCTYPE html> や <html lang="ja"> の説明をしてきました。 次に重要なタグは <head> です。

まず、次のようなコードを見てください： 

<!DOCTYPE html>
<html lang="ja">
  <body>
    <h1>こんにちは</h1>
  </body>
</html>

この例では <head> がありませんが、ブラウザ上で表示する分には問題なく動作します。 つまり、ページを表示するだけなら <head> は必須ではありません。

では、なぜ <head> タグを付けた方がよいのでしょうか？ 理由は以下の通りです：

つまり、<head> タグは「ページの設定や情報をまとめる場所」と考えると分かりやすいです。 表示だけではなく、正しい情報を伝えたり、拡張性を高めるために付けておくのが合理的です。

この <head> 内には、様々な要素を入れることができます：

ここではまず、タイトルと文字コード について詳しく説明します。

<< 前のページ 次のページ >>