HTML（Webページの構造）

マークアップとは

「マークアップ」とは、ただの文字列に印（マーク）を付けて、それが何であるかを示すこと。たとえば「商品紹介」という文字に「これは見出しだよ」という印を付けると、ブラウザはそれを大きく太字で表示し、検索エンジンは「このページの主題」として扱えます。

これは見出しです        <!-- ただのテキスト。意味が分からない -->
<h1>これは見出しです</h1>  <!-- マークアップ済み。見出しだと伝わる -->

HTML の "Markup Language"（マークアップ言語）という名前は、まさにこの「印を付ける言語」という意味です。

要素・タグ・属性

HTML を書くうえで最初に押さえる3つの言葉です。

要素（element）: 開始タグから終了タグまでの ひとかたまり。<p>こんにちは</p> 全体が1つの要素。
タグ（tag）: <p>（開始タグ）と </p>（終了タグ）の山かっこ部分。終了タグには / が付きます。
属性（attribute）: タグの中に書く追加情報。name="value" の形で、要素に詳細を与えます。

<a href="https://example.com" target="_blank">サイトを開く</a>
<!-- a 要素 / href・target が属性 / 「サイトを開く」が中身 -->

閉じタグが要らない要素もある

<img> や <br>、<input> のように 中身を持たない要素（空要素 / void element）には終了タグがありません。<img src="logo.png" alt="ロゴ"> のように1つのタグで完結します。<img></img> とは書きません。

文書の基本構造（head と body）

最低限の HTML ファイルはこの形です。<head>（メタ情報）と <body>（実際に表示される中身）の2つに分かれているのが要点です。

<!DOCTYPE html>          <!-- HTML5 で書くという宣言 -->
<html lang="ja">         <!-- ページの言語を指定 -->
  <head>
    <meta charset="UTF-8">                <!-- 文字コード -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ページのタイトル</title>        <!-- タブやブックマークに出る -->
  </head>
  <body>
    <h1>見出し</h1>
    <p>ここに本文が入ります。</p>
  </body>
</html>

部分	役割	ユーザーに見える?
head	タイトル・文字コード・読み込むCSSなど“ページの設定”	原則見えない（titleはタブに出る）
body	見出し・文章・画像・リンクなど“実際の中身”	見える

charset と viewport は最初に書く

<meta charset="UTF-8"> を忘れると日本語が文字化けすることがあります。また viewport の指定が無いと、スマホで「PCの画面を縮小しただけ」の見づらい表示になります。詳しくはレスポンシブの解説へ。

セマンティックHTML（意味のあるタグを使う）

「セマンティック（semantic）」＝「意味的な」。<div>（ただの箱）で全部を組むのではなく、役割に合ったタグ を使う考え方です。たとえば「これはページのヘッダー」「ここがメインの記事」と、タグ自体で意味を表します。

<body>
  <header>サイトのロゴやタイトル</header>
  <nav>メニューのリンク集</nav>
  <main>
    <article>
      <h1>記事タイトル</h1>
      <section>本文の章……</section>
    </article>
  </main>
  <footer>著作権表示など</footer>
</body>

主なセマンティック要素の意味を整理します。

要素	意味（役割）	使いどころ
header	導入部・ヘッダー	ロゴ、サイト名、上部のバナー
nav	主要なナビゲーション	グローバルメニュー、目次
main	ページの主内容（1ページに1つ）	そのページ固有の中身全体
article	単独で完結する内容	ブログ記事、ニュース、コメント1件
section	意味のまとまり（章）	見出しを持つひとかたまり
aside	本筋から外れる補足	サイドバー、関連リンク、広告
footer	末尾・フッター	著作権、連絡先、補助リンク

なぜ div より semantic が良いのか

見た目は <div> でも <header> でも CSS 次第で同じにできます。違いは 機械が読めるか。検索エンジンは構造を理解して SEO に活かし、スクリーンリーダー（読み上げソフト）は「ここはナビゲーション」と利用者に伝えられます。アクセシビリティと SEO が“タグを変えるだけ”で底上げされるのが利点です。

ハイパーリンクとフォーム

HTML の "HyperText"（ハイパーテキスト）は、文書どうしをリンクでつなげる 仕組みのこと。Web の根幹です。

<!-- 別ページへのリンク -->
<a href="/web/css/">CSS の解説へ</a>

<!-- 同じページ内の見出しへジャンプ -->
<a href="#section2">2章へ</a>

<!-- 画像（alt は代替テキスト。表示できない時や読み上げで使う） -->
<img src="diagram.png" alt="構成図の説明">

ユーザーからの入力を受け取るのが フォーム です。<form> の中に入力欄（<input> など）を置き、ボタンで送信します。

<form action="/login" method="post">
  <label for="email">メール</label>
  <input type="email" id="email" name="email" required>

  <label for="pw">パスワード</label>
  <input type="password" id="pw" name="pw">

  <button type="submit">ログイン</button>
</form>

入力値は必ずサーバ側でも検証する

required や type="email" による HTML の入力チェックは 親切心であって、防御ではありません。ブラウザの開発者ツールで簡単に無効化・改ざんできるため、最終的な検証は必ずサーバ側でも行います。クライアントだけのバリデーションを信用すると、不正なデータや攻撃の入り口になります。詳しくは REST API や Web 認証も参照。

なぜ「構造」と「見た目」を分けるのか

初心者がやりがちなのは、HTML に見た目を埋め込むこと。これを避け、HTML＝構造 / CSS＝見た目 / JavaScript＝動き と役割を分けるのが現代の基本です。

やり方	例	問題点
見た目をHTMLに直書き	<font color=red> や style 属性を多用	色変更のたびに全ページ修正、再利用できない
構造と見た目を分離	HTMLは意味だけ、色や配置はCSSへ	1ファイル直すだけで全ページに反映、保守が楽

分離しておくと、

保守性: デザイン変更は CSS だけ直せば、何百ページにも一括反映できる
再利用性: 同じ HTML 構造に別の CSS をあてれば、見た目を丸ごと差し替えられる
アクセシビリティ: 構造が素直なので、読み上げソフトや検索エンジンが内容を理解しやすい

見出しは“大きさ”でなく“順序”で選ぶ

<h1>〜<h6> は 見出しの階層 を表すタグであって、文字サイズを指定するものではありません。「大きく見せたいから h1」ではなく、文書の構造に沿って h1 → h2 → h3 と順に使います。大きさを変えたいだけなら CSS の出番です。これも「構造と見た目を分ける」考え方の一例です。

まとめ

HTML はページの 意味と構造 を組み立てる土台です。ブラウザがこの構造を読み込むと、メモリ上に DOM というツリーが作られ、そこに CSS で見た目を、JavaScript で動きを足していく——というのが Web ページが表示される基本の流れ（ブラウザのレンダリング）です。まずは「正しいタグで意味づけする」ことを意識すれば、SEO もアクセシビリティも自然とついてきます。

HTML（Webページの構造）

マークアップとは

要素・タグ・属性

文書の基本構造（head と body）

セマンティックHTML（意味のあるタグを使う）

ハイパーリンクとフォーム

なぜ「構造」と「見た目」を分けるのか

まとめ

HTML（Webページの構造）を実務で読む

解決すること

比較で見る軸

導入後に効く点

先に潰すリスク

判断チェックリスト

次に確認する観点