1. 👋 はじめに

「HTMLってなんとなく書けるけど、ちゃんと理解しているか自信がない…」
「<meta> タグって何のためにあるの？」
「<!DOCTYPE html> って毎回書くけど、何の意味があるの？」

このシリーズでは HTMLを基礎からしっかり深掘り して解説します！

このシリーズの目標：
「なんとなく書いていたHTML」から、「意味を理解して書けるHTML」 へレベルアップすること！

この記事を読めば：

✅ HTMLの基本構造が完全に理解できる
✅ <!DOCTYPE html> の意味がわかる
✅ <head> タグの中身を完全に理解できる
✅ OGP・favicon・CSSの読み込みがわかる

2. 📄 HTMLとは？

一言で言うと

HTML（HyperText Markup Language）とは
「Webページの構造と意味を定義するためのマークアップ言語」です。

プログラミング言語との違い：
  Python・JavaScript → 計算・処理・ロジックを書く「プログラミング言語」
  HTML              → 文書の構造・意味を定義する「マークアップ言語」

HTMLはプログラミング言語ではありません！
「ここは見出し」「ここはリスト」という構造を定義するものです。

ブラウザはHTMLをどう解釈するのか？

【HTMLファイルがWebページになるまで】

① HTMLファイル（テキスト）をブラウザが受け取る
        ↓
② ブラウザがHTMLを解析（パース）する
        ↓
③ DOMツリー（文書の構造）を構築する
        ↓
④ CSSを適用してスタイルを計算する
        ↓
⑤ 画面にレンダリング（描画）する
        ↓
⑥ ユーザーに表示される 🌐

3. 🏗️ 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>
    <h1>こんにちは！</h1>
    <p>これはWebページです。</p>
  </body>
</html>

各部分の役割

部分	役割
`<!DOCTYPE html>`	「最新の標準モードで表示してね！」とブラウザに伝達
`<html lang="ja">`	HTML全体のルート要素・言語を指定
`<head>`	ページの設定情報（ブラウザには直接表示されない）
`<body>`	実際にページに表示される内容

4. 📋 `<!DOCTYPE html>` とは？

一言で言うと

<!DOCTYPE html> とは「このファイルは最新の標準モードで表示してね！」とブラウザに伝えるための宣言です。

なぜ必要なのか？

歴史的な背景：
  昔のWebサイトと最新のWebサイトで、
  ブラウザの表示ルールを切り替える必要があったため。

DOCTYPE なし → ブラウザが「互換モード（Quirks Mode）」で動作
  → 昔の古いブラウザの挙動を再現して描画する
  → 最新のCSSを書いても意図しないレイアウト崩れが起きる 😱

DOCTYPE あり（<!DOCTYPE html>） → 「標準モード（Standards Mode）」で動作
  → 最新のWeb標準仕様に従って正しく描画する ✅

💡 現代の <!DOCTYPE html> は、バージョン指定というよりも 「最新の標準モードで表示してね！」とブラウザに伝えるスイッチ のような役割です。

昔のDOCTYPE宣言との比較

<!-- HTML4.01（昔）：非常に長い！ -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

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

<!-- HTML5（現在）：シンプル！ -->
<!DOCTYPE html>

💡 HTML5 では <!DOCTYPE html> と書くだけでOKになりました！
長い文字列を暗記する必要はなくなりました。

5. 🌐 `<html lang="xx">` 属性

lang属性とは？

lang 属性はページの言語を指定する属性です。

<html lang="ja">   <!-- 日本語 -->
<html lang="en">   <!-- 英語 -->
<html lang="zh">   <!-- 中国語 -->
<html lang="ko">   <!-- 韓国語 -->

なぜ lang 属性が重要なのか？

理由	説明
♿ アクセシビリティ	スクリーンリーダーが正しい言語で読み上げる
🔍 SEO	検索エンジンがページの言語を正確に判断できる
🌐 ブラウザ機能	翻訳機能が適切に動作する
📝 スペルチェック	ブラウザが正しい言語でスペルチェックをする

6. 🗂️ `<head>` タグの中身を完全解説

headタグとは？

<head> タグはページの「設定情報」を書く場所です。
ブラウザに指示を出すための情報が詰まっています。
ユーザーには直接表示されませんが、ページの動作に大きく影響します。

headに書けるもの一覧

タグ	役割
`<meta charset>`	文字エンコーディングの指定
`<meta name="viewport">`	スマホ対応の設定
`<meta name="description">`	ページの説明文
`<title>`	ページのタイトル
`<link rel="stylesheet">`	CSSファイルの読み込み
`<link rel="icon">`	ファビコンの設定
`<link rel="canonical">`	正規URLの指定
`<meta property="og:*">`	OGP（SNSシェア時の設定）
`<script>`	JavaScriptの読み込み

7. 🔤 `<meta charset="UTF-8">`

一言で言うと

文字エンコーディング（文字の表現方法）を指定するタグです。

<meta charset="UTF-8" />

なぜ UTF-8 なのか？

文字エンコーディングとは：
  コンピュータは「文字」を「数字」で管理している
  「あ」= 12354・「A」= 65 など

UTF-8 の特徴：
  ✅ 日本語・英語・中国語・絵文字など世界中の文字を表現できる
  ✅ Webの標準エンコーディング
  ✅ HTMLファイル自体もUTF-8で保存することが前提

これがないと：
  → ブラウザが文字コードを誤判定
  → 日本語が文字化けする！ 😱

⚠️ <meta charset> は <head> タグの最初に書きましょう！
ブラウザは文書を読み込みながら解析するため、
できるだけ早く文字コードを知らせる必要があります。

8. 📱 `<meta name="viewport">`

一言で言うと

スマートフォンやタブレットでの表示を正しく制御するための設定です。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

各属性の意味

属性値	意味
`width=device-width`	ページの横幅をデバイスの画面幅に合わせる
`initial-scale=1.0`	最初のズーム倍率を100%にする

viewportがないと何が起きるのか？

viewportなし：
  スマホでも「PCサイト全体を縮小表示」してしまう
  → 文字が小さすぎて読めない 😱

viewportあり：
  デバイスの画面幅に合わせて適切に表示される
  → レスポンシブデザインが正しく機能する ✅

9. 📝 `<title>` タグ

一言で言うと

ページのタイトルを指定するタグです。
ブラウザのタブ・検索結果・ブックマークに表示されます。

<title>商品一覧 | MyShop</title>

titleタグのベストプラクティス

ポイント	説明
📏 文字数	28〜32文字程度（全角）が推奨。35文字を超えると検索結果で「…」と省略される
🎯 キーワード	重要なキーワードを先頭に配置する
🏷️ サイト名	末尾に「\| サイト名」を付けるのが一般的
📄 ページごとに変える	全ページ同じタイトルはSEO的にNG

⚠️ タイトルが長すぎると検索結果で省略されます！
Googleの検索結果では全角35文字前後で「…」とカットされます。
重要なキーワードや訴求ポイントは必ず前半に配置しましょう。

💡 文字数ルールが重要なのは「検索される公開ページ」だけです！

ログイン | TShop や 商品管理 | TShop Admin のような短いタイトルは
内部ページ・管理画面では全く問題ありません。

ページの種類 SEO文字数を意識すべきか例

トップページ・商品ページ・記事 ✅ 意識する検索結果に表示される

ログイン・マイページ・管理画面 🔵 不要検索結果には出てこない

404エラーページ 🔵 不要直接URLでアクセスされる

SEOの文字数ルールはあくまで「検索結果でクリックされるページ」のための指針です。

<!-- ✅ 良い例 -->
<title>HTMLの基礎を完全解説 | TechBlog</title>

<!-- ❌ 悪い例 -->
<title>ページ</title>          <!-- 内容がわからない -->
<title>トップ | MyShop</title> <!-- 全ページ同じ -->

10. 📄 `<meta name="description">`

一言で言うと

ページの説明文を指定するタグです。
検索結果のタイトル下に表示される説明文（スニペット）に使われます。

<meta name="description" content="HTMLの基本構造・headタグ・セマンティックHTMLを基礎から徹底解説します。" />

descriptionのベストプラクティス

ポイント	説明
📏 文字数	80〜120文字程度（長すぎると省略される）
🎯 内容	ページの内容を正確に・魅力的に伝える
🔑 キーワード	自然な形でキーワードを含める
📄 ページごとに変える	全ページ同じdescriptionはNG

⚠️ description はSEOに直接影響しませんが、クリック率に影響します！
Googleは検索順位の決定に description を直接使いませんが、魅力的な description を書くことで検索結果からのクリック率が上がります。なぜなら検索結果の説明文になるからです。

11. 🎨 CSSファイルの読み込み

<!-- 外部CSSファイルの読み込み -->
<link rel="stylesheet" href="style.css" />

<!-- 複数のCSSを読み込む場合 -->
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="responsive.css" />

<!-- メディアクエリを指定して読み込む -->
<link rel="stylesheet" href="print.css" media="print" />

`rel` 属性の意味

rel（relationship）はリンクの関係性を示す属性です。

rel の値	意味
`stylesheet`	CSSスタイルシートとして読み込む
`icon`	ファビコンとして使用する
`canonical`	正規URLを指定する
`preload`	事前に読み込んでおく
`preconnect`	事前に接続を確立しておく

12. 🖼️ ファビコン（favicon）の設定

ファビコンとは？

ファビコンとはブラウザのタブや検索結果に表示される小さなアイコンです。

<!-- 基本のファビコン -->
<link rel="icon" href="/favicon.ico" />

<!-- PNG形式のファビコン（現代的な方法） -->
<link rel="icon" type="image/png" href="/favicon.png" />

<!-- サイズ別に指定する（高解像度対応） -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<!-- Apple デバイス向け -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

13. 🔗 canonical タグ

一言で言うと

canonical タグは「このページの正規URLはこちらです」とGoogleに伝えるタグです。

<link rel="canonical" href="https://example.com/blog/html-basics" />

なぜ必要なのか？

問題：同じコンテンツが複数のURLでアクセスできるとき

  https://example.com/page
  https://example.com/page?ref=twitter   ← パラメータ付き
  https://example.com/page/              ← スラッシュあり

→ Googleが「どれが本物のURL？」と混乱する
→ SEO評価が分散してしまう 😱

解決策：canonicalタグで「これが正規URLです」と明示する
<link rel="canonical" href="https://example.com/page" />
→ Googleが正規URLにSEO評価を集約する ✅

💡 重複コンテンツがないページにも canonical を貼るのがベストプラクティス！
「重複コンテンツがないから不要」と思いがちですが、
http と https・末尾の / の有無など、
URLのゆらぎは意図せず発生することがあります。

Googleも推奨する「自己参照 canonical（Self-referential canonical）」として、
すべてのページに自分自身の正式なURLを指す canonical を貼っておくのが現代の標準です。

<link rel="canonical" href="https://example.com/そのページの正規URL" />

14. 📣 OGP（Open Graph Protocol）

OGPとは？

OGP（Open Graph Protocol）とは
「SNSでシェアされたときの見た目を制御するための設定」です。
FacebookやX（旧Twitter）・LINEなどでURLをシェアすると
タイトル・説明・画像がカード形式で表示されますよね？
あの見た目を制御しているのがOGPです。

基本的なOGPの設定

<!-- 基本のOGP -->
<meta property="og:title" content="HTMLの基礎を完全解説" />
<meta property="og:description" content="HTMLの基礎から応用まで徹底解説します。" />
<meta property="og:image" content="https://example.com/images/ogp.png" />
<meta property="og:url" content="https://example.com/blog/html-basics" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="TechBlog" />
<meta property="og:locale" content="ja_JP" />

⚠️ OGPのURLには必ず絶対パスを使いましょう！
CSSや画像の読み込みは /styles/main.css のような相対パスで動作しますが、
og:image や og:url などのOGP関連URLは
https:// から始まる絶対URLを指定しないとSNS側で画像を取得できません。

<meta property="og:image" content="/images/ogp.png" />


<meta property="og:image" content="https://example.com/images/ogp.png" />

X（旧Twitter）カードの設定

<!-- X（旧Twitter）用のカード設定 -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@your_twitter_handle" />
<meta name="twitter:title" content="HTMLの基礎を完全解説" />
<meta name="twitter:description" content="HTMLの基礎から応用まで徹底解説します。" />
<meta name="twitter:image" content="https://example.com/images/ogp.png" />

OGP画像のベストプラクティス

項目	推奨値
サイズ	1200×630px（横長）
ファイル形式	PNG・JPG
ファイルサイズ	1MB以内
テキスト	全体の20%以下にする

og:type の種類

値	使う場面
`website`	一般的なWebページ（デフォルト）
`article`	ブログ記事・ニュース記事
`product`	商品ページ
`profile`	プロフィールページ

⚡ JavaScriptの読み込み

読み込み方法の違い

<!-- ① 通常の読み込み（HTMLの解析をブロックする） -->
<script src="app.js"></script>

<!-- ② defer：HTML解析後に実行（推奨） -->
<script src="app.js" defer></script>

<!-- ③ async：ダウンロード完了後すぐに実行 -->
<script src="app.js" async></script>

3つの読み込み方法の違い

① 通常（scriptタグをheadに書く）：
  HTML解析 → スクリプト読込・実行 → HTML解析再開
  → ページの表示が遅くなる ❌

② defer：
  HTML解析と並行してスクリプトをダウンロード
  → HTML解析完了後に実行
  → ページの表示を妨げない ✅（推奨）

③ async：
  HTML解析と並行してスクリプトをダウンロード
  → ダウンロード完了次第すぐ実行（順序保証なし）
  → Google Analyticsなど順序不問のスクリプトに向く

	通常	defer	async
HTML解析のブロック	❌ ブロックする	✅ しない	✅ しない
実行タイミング	即時	HTML解析完了後	DL完了後すぐ
実行順序の保証	✅ あり	✅ あり	❌ なし
推奨用途	基本非推奨	通常のJS	解析系スクリプト

15. 📋 headタグの参考例

実際のWebサイトで使われる <head> タグの例です。

<head>
  <!-- 文字エンコーディング（最初に書く！） -->
  <meta charset="UTF-8" />

  <!-- スマホ対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- ページの基本情報 -->
  <title>HTMLの基礎を完全解説 | TechBlog</title>
  <meta name="description" content="HTMLの基本構造・headタグ・セマンティックHTMLを基礎から徹底解説。" />

  <!-- 正規URL -->
  <link rel="canonical" href="https://example.com/blog/html-basics" />

  <!-- ファビコン -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

  <!-- OGP（SNSシェア用） -->
  <meta property="og:title" content="HTMLの基礎を完全解説" />
  <meta property="og:description" content="HTMLの基礎から応用まで徹底解説します。" />
  <meta property="og:image" content="https://example.com/images/ogp.png" />
  <meta property="og:url" content="https://example.com/blog/html-basics" />
  <meta property="og:type" content="article" />
  <meta property="og:locale" content="ja_JP" />

  <!-- X（旧Twitter）カード -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="HTMLの基礎を完全解説" />
  <meta name="twitter:image" content="https://example.com/images/ogp.png" />

  <!-- CSS -->
  <link rel="stylesheet" href="/styles/main.css" />

  <!-- JavaScript（deferで読み込む） -->
  <script src="/js/app.js" defer></script>
</head>

16. 🎯 まとめ

要素	一言で言うと
`<!DOCTYPE html>`	最新の標準モードで表示してね！とブラウザに宣言
`<html lang="ja">`	ページの言語を指定する
`<head>`	ブラウザへの設定情報を書く場所
`<meta charset>`	文字エンコーディングをUTF-8に指定
`<meta viewport>`	スマホ対応の表示設定
`<title>`	ブラウザタブ・検索結果に表示されるタイトル
`<meta description>`	検索結果に表示される説明文
`<link canonical>`	正規URLをGoogleに伝える
OGP	SNSシェア時のカード表示を制御
`defer` / `async`	JSの読み込み方法を最適化

<head> タグはユーザーには見えないけれど、
SEO・SNSシェア・スマホ対応・表示速度に大きく影響する重要な部分です。
「なんとなく書く」から「意味を理解して書く」に変えるだけで、
Webページの品質が大きく変わります💪

次回は よく使うHTMLタグを完全解説 します！
見出し・段落・リスト・テーブル・リンク・画像・フォームタグを
属性まで含めて徹底解説します🌟

💬 質問や感想があれば、コメント欄でお気軽にどうぞ!
👍 役に立ったら、いいね&ストックをお願いします!
🎓 ここまで読んでくださって、本当にありがとうございました!

🔗 シリーズ記事

【第一回】HTML の基本構造・headタグを完全解説（この記事）
【第二回】よく使うタグを完全解説（近日公開）
【第三回】セマンティックHTML・アクセシビリティ・SEO（近日公開）