HTML 入門

HTML 基礎ドキュメント構造

高層ビルであれ小さな物置小屋であれ、緻密に構築された構造物はすべて一枚の基礎となる設計図（ブループリント）から始まります。Web開発の世界におけるHTMLドキュメントも、全く同じことが言えます。

建築家が設計図を使用して建物の基本レイアウトや主要なコンポーネントを定義するように、私たちは特定の基礎構造を使用して、HTMLページがどのように組織されているかをWebブラウザに伝える必要があります。この基本構造を理解することは、単にいくつかのタグを暗記することではありません。将来のすべてのWeb制作がその上に築かれる「コアフレームワーク」を習得することを意味します。

それは、Webページがブラウザによって正しく解釈され、ユーザーや検索エンジンがアクセス可能になり、表示したいすべてのコンテンツのための舞台を整えることを保証します。

1. HTMLドキュメントの設計図：コアタグ詳細解説

HTMLドキュメントは、根本的にいくつかの基本タグによって構築されており、これらのタグが全体の形状と用途を定義します。これらのタグはコンテナ（容器）および命令として機能し、ブラウザに対してWebページをどのように処理し、表示すべきかを指示します。

1.1 HTML5ドキュメントの最小構成例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>モダンHTMLチュートリアル</title>
</head>
<body>
    <p>こんにちは、モダンな標準HTMLシリーズチュートリアルへようこそ</p>
    <p>これは基礎的なHTMLドキュメント構造を使用して作成された最初のWebページです。</p>
</body>
</html>

これから、このサンプルを一つずつ分析して探求していきます。

1.2  <!DOCTYPE html> 宣言

<!DOCTYPE html> 宣言は、あらゆるモダンなHTMLドキュメントの1行目に目にするものです。これはHTMLタグのように見えますが、実際にはタグではありません。これは「ドキュメントタイプ宣言（Document Type Declaration）」であり、Webブラウザに対して、そのページがどのバージョンのHTMLで書かれているかを伝えるための命令です。

  • 目的: 主な役割は、ブラウザが「標準モード（Standards Mode）」でページをレンダリング（描画）するように強制することです。これにより、ブラウザは古い、時に一貫性のないレンダリング動作（「クアークスモード」または "Quirks Mode" と呼ばれます）をエミュレートしようとするのではなく、最新のWeb標準に従うようになります。現在の業界標準であるHTML5では、この宣言は非常にシンプルに <!DOCTYPE html> と記述します。
  • 現代的な意義: 初期のリマHTMLバージョン（HTML 4.01やXHTML 1.0など）では、<!DOCTYPE> 宣言はもっと長く複雑で、特定のDTD（ドキュメントタイプ定義）を参照する必要がありました。<!DOCTYPE html> はHTML5の簡略化された汎用宣言であり、明快で覚えやすいものになっています。
  • 現実のケース: <!DOCTYPE html> がないWebページにブラウザが遭遇したと想像してください。ブラウザはページのHTMLバージョンを推測しようとするか、古いレンダリングモードにフォールバックしてしまいます。その結果、ボタンやテキストのフォーマットなどの要素が、異なるブラウザ、あるいは同じブラウザの異なるバージョン間で一貫性なく表示される可能性があります。
  • 想定されるシナリオ: Webページを構築する際にこの宣言を忘れると、ブラウザはあなたのページを古いHTML4ドキュメントとして扱うべきか、モダンなHTML5ドキュメントとして扱うべきか判断できなくなります。この曖昧さは、緻密に書かれたCSSスタイルが異常な挙動を示したり、JavaScriptのインタラクションが失敗したりする原因となります。

1.3  <html> タグ：ドキュメントのルート要素

<!DOCTYPE> 宣言の直後に配置されるのが <html> タグです。これはすべてのHTMLページの「ルート要素（Root Element）」です。Webページの他のすべてのコンテンツ（<head> や <body> セクションを含む）は、この <html> タグの内部にネスト（入れ子）される必要があります。

  • 目的: HTMLドキュメント全体の開始と終了を示します。すべての要素を包み込む「最も外側のコンテナ」だと考えてください。
  • lang属性: <html> タグに lang 属性を含めることは、現代のベストプラクティスです。例えば <html lang="en">（英語）や <html lang="ja">（日本語）のように記述します。この属性は、ドキュメントコンテンツの主要な言語を指定します。
  • 重要性: これが極めて重要である理由は、主に以下の点にあります：
    • アクセシビリティ（Accessibility）: スクリーンリーダーはこの情報を利用して、視覚障害のあるユーザーに対して正しい言語の発音に切り替えることができます。
    • 検索エンジン: Googleなどの検索エンジンは、この情報を利用して特定の言語の検索結果を返します。
    • ブラウザの動作: ユーザーの優先言語がページの lang 属性と異なる場合、ブラウザはそのページの翻訳を提案することがあります。
    • スタイリング: 高度なシナリオでは、CSSを使用して言語ごとに要素をターゲットにすることができます。
  • 現実のケース: Webサイトにアクセスしたとき、ブラウザは <html> タグ内の全コンテンツを一つの首尾一貫したWebページとして処理します。ソースコードを検査すれば、このタグがすべてをラップしているのがわかるはずです。
  • 想定されるシナリオ: 検索エンジンがあなたのサイトをクロールしている場面を想像してください。もし lang="ja" 属性がなければ、検索エンジンはそのページを日本語コンテンツとして正しく分類できず、日本語に特化した検索結果での露出に影響する可能性があります。同様に、スクリーンリーダーも正しい発音のために音声合成を調整する手がかりを失い、視覚障害のあるユーザーがコンテンツを理解するのが難しくなります。

1.4  <head> タグ：ドキュメントの頭脳（メタデータ）

<html> タグの内部にネストされているのが <head> タグです。これにはHTMLドキュメントに関する「メタデータ（Metadata）」が含まれています。メタデータとは「データに関するデータ」のことで、この場合はWebページ自体に関する情報であり、ブラウザウィンドウのメインエリアには直接表示されません。

  • 目的: ブラウザ、検索エンジン、その他のWebサービスがページを理解し処理するために使用する情報を保持します。
  • 一般的な内容（概要）:
    • <title>: ドキュメントのタイトルを定義します。これはブラウザのタブやウィンドウのタイトルバーに表示されます（例: <title>モダンHTMLチュートリアル</title>）。
    • <meta> タグ: 様々なタイプのメタデータを提供します。
  • 文字セット（Charset）: <meta charset="UTF-8"> は、異なる言語のテキスト文字を正しく表示するために不可欠です。
  • ビューポート（Viewport）設定: <meta name="viewport" content="width=device-width, initial-scale=1.0"> はレスポンシブWebデザインにとって非常に重要であり、すべてのデバイスでページが適切に表示されることを保証します。
  • 説明文とキーワード: 検索エンジン向けに使用されます（キーワードは現在、以前ほど重視されていません）。
  • <link> タグ: 外部リソースをリンクするために使用されます。最も一般的なのは、ページの視覚的な外観を定義するスタイルシート（CSSファイル）の読み込みです（例: <link rel="stylesheet" href="styles.css">）。
  • <script> タグ: JavaScriptコードを埋め込んだりリンクしたりして、ページにインタラクティブな機能を追加するために使用されます。
  • 現実のケース: Googleで検索したときに結果一覧に表示される青いクリック可能なタイトルは、通常、ページの <title> タグの内容から取得されます。その下の短い説明文は、多くの場合 <meta name="description"> タグから来ています。
  • 想定されるシナリオ: もしWebページに <meta charset="UTF-8"> が欠けていて、特殊文字（アクセント付き文字や絵文字など）が含まれている場合、ブラウザがバイトエンコーディングをどう解釈すべきか判断できず、文字化け（`�` や é など）が発生する可能性があります。また、ビューポートのmetaタグがないと、スマホで閲覧した際にページがデスクトップ版の縮小コピーのように非常に小さく表示され、デバイスの画面サイズに最適化されません。

1.5  <body> タグ：ドキュメントの身体（可視コンテンツ）

同様に <html> タグの内部にネストされているのが <body> タグです。これには、ユーザーがブラウザでWebページを閲覧したときに表示されるすべてのコンテンツが含まれます。

  • 目的: テキスト、画像、ビデオ、表、フォーム、リンク、その他Webページの実際の可視部分を構成するすべての要素を配置する場所です。
  • との対比: <head> は目に見えないメタデータを含みますが、<body> はすべての可視コンテンツを含みます。何かを画面に表示してユーザーに見せたり、操作させたりしたい場合は、必ず <body> タグの中に配置しなければなりません。
  • 現実のケース: あなたが今このページで読んでいるすべての文章、目にしている画像、クリックしているすべてのボタン——これらすべては、このサイトのHTMLドキュメントの <body> タグ内に位置しています。
  • 想定されるシナリオ: もし <body> タグの外にテキストを記述した場合を想像してください。HTML構造に従うブラウザは、それを無視するか、一貫性のないレンダリングを行う可能性があります。なぜなら、ブラウザは表示可能なすべてのコンテンツが厳密に定義された <body> エリア内にあることを期待しているからです。

2. まとめ

  • <!DOCTYPE html> は、モダンなレンダリングモードを保証します。
  • <html lang="ja"> は、ドキュメントがHTMLであること、および言語が日本語であることを定義します。
  • <head> は、ページの文字セット、レスポンシブ表示のためのビューポート設定、およびブラウザタブに表示されるタイトル「モダンHTMLチュートリアル」を含みます。
  • <body> は2つの段落（<p> タグ。後の章で学習します）を含んでおり、ページを閲覧するすべての人がそれらを見ることができます。

この完全な構造は、有効なHTML5ドキュメントを作成するために必要な最低限の要件です。

3. 付録：一般的な lang 属性値の対照表

<html lang="lang属性値">
lang属性値言語 (国/地域)
ja または ja-JP日本語 (日本)
英語とそのバリエーション
en英語 (汎用)
en-US英語 (米国)
en-GB英語 (英国)
en-AU英語 (オーストラリア)
en-CA英語 (カナダ)
en-IN英語 (インド)
その他の主要言語
frフランス語 (汎用/フランス)
fr-CAフランス語 (カナダ)
deドイツ語 (ドイツ)
esスペイン語 (スペイン)
es-MXスペイン語 (メキシコ/ラテンアメリカ)
ruロシア語 (ロシア)
ptポルトガル語 (ポルトガル)
pt-BRポルトガル語 (ブラジル)
itイタリア語 (イタリア)
arアラビア語 (汎用)
hiヒンディー語 (インド)
thタイ語 (タイ)
viベトナム語 (ベトナム)