📄 HTMLを基礎から深く学ぼう【第二回】よく使うタグを完全解説！見出し・リスト・リンク・画像・フォーム

Posted at 2026-08-04

1. 👋 はじめに

前回はHTMLの基本構造と <head> タグの中身を詳しく学びました。

今回は 実際にページに表示される <body> の中身 を解説します！

タグは「意味」を持っています。
「なんとなく <div> で囲む」のではなく、「このコンテンツにはこのタグが適切」と理解して書けることを目指しましょう！

この記事を読めば：

✅ 見出し・段落・テキスト系タグの正しい使い方がわかる
✅ リスト・テーブルの使い分けがわかる
✅ リンク・画像タグの属性を完全に理解できる
✅ フォームタグの全inputタイプとバリデーション属性がわかる

2. 🏷️ タグの基本的な書き方（おさらい）

<!-- 基本形：開始タグ・内容・終了タグ -->
<タグ名>内容</タグ名>

<!-- 属性を付ける場合 -->
<タグ名 属性名="値">内容</タグ名>

<!-- 自己閉じタグ（内容を持たないタグ） -->
<タグ名 属性名="値" />

ブロック要素とインライン要素

HTMLのタグには大きく2種類の「性質」があります。

【ブロック要素】
  ┌────────────────────────────┐
  │ <h1>見出し</h1>            │ ← 横幅いっぱいに広がる
  └────────────────────────────┘
  ┌────────────────────────────┐
  │ <p>段落のテキスト</p>       │ ← 前後に改行が入る
  └────────────────────────────┘

【インライン要素】
  通常のテキストの中に <strong>太字</strong> や
  <a href="#">リンク</a> が インラインで並ぶ

種類	特徴	代表的なタグ
ブロック要素	横幅いっぱいに広がる・前後に改行	`<h1>`〜`<h6>`・`<p>`・`<div>`・`<ul>`・`<table>`
インライン要素	テキストの流れの中に配置される	`<a>`・`<span>`・`<strong>`・`<img>`・`<input>`

💡 HTML5以降の補足：正確には「コンテンツ・モデル」に再定義されています
HTML5の最新仕様では「ブロック要素 / インライン要素」という分類は廃止され、「フロー・コンテンツ」「インタラクティブ・コンテンツ」などのコンテンツ・モデル という詳細な分類に再定義されています。

ただし「ブラウザのデフォルト表示が改行されるか・横に並ぶか」を理解する上で、「ブロック」と「インライン」という分け方が最もわかりやすいため、この記事ではこの呼び方を使っています。

3. 📝 テキスト系タグ

見出しタグ（`<h1>` 〜 `<h6>`）

見出しタグは「このテキストは見出しです」という意味を持つタグです。
<h1> が最も重要で・<h6> が最も低い見出しです。

<h1>大見出し（ページに1つだけ）</h1>
<h2>中見出し（セクションの見出し）</h2>
<h3>小見出し（サブセクションの見出し）</h3>
<h4>さらに小さい見出し</h4>
<h5>さらに小さい見出し</h5>
<h6>最も小さい見出し</h6>

見出しタグのルール：

✅ 正しい使い方：階層順に使う

<h1>HTMLの基礎講座</h1>
  <h2>第一章：基本タグ</h2>
    <h3>見出しタグとは</h3>
    <h3>段落タグとは</h3>
  <h2>第二章：フォーム</h2>
    <h3>inputタグとは</h3>

❌ 間違った使い方：階層を飛ばす
<h1>タイトル</h1>
<h3>小見出し</h3>  ← h2を飛ばしてh3はNG！

ルール	理由
`<h1>` はページに1つだけ	SEO的にページの主要テーマを1つに絞る
階層を飛ばさない	スクリーンリーダーが正しく読み上げられない
見た目のためだけに使わない	大きくしたいだけなら CSS を使う

段落タグ（`<p>`）

<p> タグは「ひとまとまりの文章（段落）」を表すタグです。
Paragraph（段落）の略です。

<p>これは1つ目の段落です。文章がひとまとまりになっています。</p>

<p>これは2つ目の段落です。段落と段落の間には自動的に余白が入ります。</p>

⚠️ <br> の使いすぎに注意！
改行したいからといって <br> を連発するのはNG。
段落を分けたいときは <p> タグを使いましょう。

1つ目の文章です。<br><br>
2つ目の文章です。


<p>1つ目の文章です。</p>
<p>2つ目の文章です。</p>

テキスト装飾タグ

<!-- 強調（意味的に重要） -->
<strong>重要なテキスト</strong>  ← 太字で表示・意味的に重要

<!-- 強調（やや重要） -->
<em>強調したいテキスト</em>     ← 斜体で表示・アクセントをつける

<!-- 下線（リンクと混同されやすいので注意） -->
<u>下線テキスト</u>

<!-- 打ち消し線 -->
<s>取り消されたテキスト</s>    ← 値下げ前の価格などに使う

<!-- コード -->
<code>const name = "Alice";</code>  ← インラインのコード表示

<!-- 上付き文字・下付き文字 -->
x<sup>2</sup>   ← x²（2乗）
H<sub>2</sub>O  ← H₂O（水）

<!-- 引用 -->
<blockquote cite="https://example.com">
  引用元のテキストをここに書きます。
</blockquote>

<!-- 略語 -->
<abbr title="HyperText Markup Language">HTML</abbr>
← マウスオーバーで「HyperText Markup Language」と表示

`<strong>` と `<b>` の違い・`<em>` と `<i>` の違い

タグ	見た目	意味
`<strong>`	太字	意味的に重要・強調
`<b>`	太字	見た目だけの太字（意味なし）
`<em>`	斜体	意味的な強調・アクセント
`<i>`	斜体	見た目だけの斜体（意味なし）

💡 見た目が同じでも意味が違います！
スクリーンリーダーは <strong> を強く読み上げますが、
<b> は通常通りに読みます。
意味的な強調には <strong>・<em> を使いましょう。

4. 📋 リストタグ

箇条書きリスト（`<ul>`）

<ul> は「順序のない箇条書きリスト」を作るタグです。
Unordered List の略です。

<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li>みかん</li>
</ul>

<!-- 表示結果 -->
• りんご
• バナナ
• みかん

番号付きリスト（`<ol>`）

<ol> は「順序のある番号付きリスト」を作るタグです。
Ordered List の略です。

<ol>
  <li>材料を準備する</li>
  <li>お湯を沸かす</li>
  <li>麺を入れて3分待つ</li>
  <li>スープを入れる</li>
</ol>

<!-- 表示結果 -->
1. 材料を準備する
2. お湯を沸かす
3. 麺を入れて3分待つ
4. スープを入れる

`<ol>` の属性

<!-- 開始番号を変更 -->
<ol start="5">
  <li>5番目の項目</li>
  <li>6番目の項目</li>
</ol>

<!-- 逆順 -->
<ol reversed>
  <li>3番目（最初に表示）</li>
  <li>2番目</li>
  <li>1番目（最後に表示）</li>
</ol>

説明リスト（`<dl>`）

<dl> は「用語と説明のセット」を表すリストです。
Definition List の略です。

<dl>
  <dt>HTML</dt>  <!-- 用語（Definition Term） -->
  <dd>Webページの構造を定義するマークアップ言語</dd>  <!-- 説明（Definition Description） -->

  <dt>CSS</dt>
  <dd>Webページの見た目を装飾するスタイルシート言語</dd>

  <dt>JavaScript</dt>
  <dd>Webページに動きや機能を加えるプログラミング言語</dd>
</dl>

リストの入れ子（ネスト）

<ul>
  <li>フルーツ
    <ul>  <!-- リストの中にリストを入れられる -->
      <li>りんご</li>
      <li>バナナ</li>
    </ul>
  </li>
  <li>野菜
    <ul>
      <li>にんじん</li>
      <li>大根</li>
    </ul>
  </li>
</ul>

`<ul>` と `<ol>` の使い分け

タグ	使う場面	実務の例
`<ul>`	順序が関係ない項目	買い物リスト・機能一覧・ナビゲーションメニュー
`<ol>`	順序が重要な手順	レシピ・インストール手順・ランキング
`<dl>`	用語と説明・キーと値のペア	用語集・FAQ・会社概要・商品スペック

💡 <dl> は「キーと値のペア」全般に使えます！

<!-- 会社概要（キーと値のペア） -->
<dl>
  <dt>会社名</dt>
  <dd>株式会社テックブログ</dd>

  <dt>代表者</dt>
  <dd>山田 太郎</dd>

  <dt>設立</dt>
  <dd>2020年4月1日</dd>

  <dt>所在地</dt>
  <dd>東京都渋谷区〇〇 1-2-3</dd>
</dl>

<!-- 商品スペック -->
<dl>
  <dt>重量</dt>
  <dd>150g</dd>

  <dt>サイズ</dt>
  <dd>W70 × H150 × D8 mm</dd>

  <dt>カラー</dt>
  <dd>ブラック・ホワイト・ブルー</dd>
</dl>

「用語集だけのもの」と思いがちですが、
問い合わせフォームの確認画面・商品スペック・会社概要など
実務で非常によく使われるパターンです。

5. 📊 テーブル（表）タグ

テーブルの基本構造

<table> タグはデータを表形式で表示するためのタグです。

<table>
  <thead>  <!-- ヘッダー行のグループ -->
    <tr>   <!-- tr = Table Row（1行） -->
      <th>名前</th>   <!-- th = Table Header（見出しセル・太字） -->
      <th>年齢</th>
      <th>職業</th>
    </tr>
  </thead>
  <tbody>  <!-- データ行のグループ -->
    <tr>
      <td>田中太郎</td>   <!-- td = Table Data（データセル） -->
      <td>25歳</td>
      <td>エンジニア</td>
    </tr>
    <tr>
      <td>鈴木花子</td>
      <td>30歳</td>
      <td>デザイナー</td>
    </tr>
  </tbody>
  <tfoot>  <!-- フッター行のグループ（合計行など） -->
    <tr>
      <td colspan="3">合計：2名</td>  <!-- colspan：複数列をまとめる -->
    </tr>
  </tfoot>
</table>

テーブルの属性

<!-- colspan：横方向に複数のセルを結合 -->
<td colspan="2">2列分のセル</td>

<!-- rowspan：縦方向に複数のセルを結合 -->
<td rowspan="3">3行分のセル</td>

⚠️ テーブルはレイアウト目的で使わない！
昔はテーブルタグをページのレイアウト（段組み）に使うことがありましたが、
現代ではレイアウトは CSS（FlexboxやGrid） で行います。
テーブルは「表形式のデータ」にだけ使いましょう。

6. 🔗 リンクタグ（`<a>`）

基本的な書き方

<a> タグはハイパーリンクを作るタグです。
Anchor（錨）の略です。

<!-- 外部サイトへのリンク -->
<a href="https://example.com">外部サイトへ</a>

<!-- サイト内の別ページへのリンク（相対パス） -->
<a href="/about">会社概要へ</a>
<a href="../contact.html">お問い合わせへ</a>

<!-- 同じページ内の別の場所へ（アンカーリンク） -->
<a href="#section1">セクション1へ飛ぶ</a>
<section id="section1">ここへ飛んでくる</section>

<!-- メールリンク -->
<a href="mailto:info@example.com">メールを送る</a>

<!-- 電話リンク（スマホで便利） -->
<a href="tel:090-1234-5678">電話する</a>

`<a>` タグの重要な属性

<!-- target：リンクの開き方 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  新しいタブで開く
</a>

<!-- download：リンク先をダウンロードさせる -->
<a href="/files/document.pdf" download>PDFをダウンロード</a>
<a href="/files/document.pdf" download="マニュアル.pdf">
  ファイル名を指定してダウンロード
</a>

`target="_blank"` に `rel="noopener noreferrer"` が必要な理由

target="_blank" だけだと：
  新しいタブで開いたページが
  元のページの情報にアクセスできてしまうセキュリティリスクがある

rel="noopener noreferrer" を追加すると：
  noopener   → 新しいタブから元のページへのアクセスを遮断
  noreferrer → どのページからのリンクかという情報を送らない

→ セキュリティとプライバシーを両方守れる ✅

💡 現代のブラウザでは rel="noopener" は自動で付与されます
Chrome・Firefox・Safari などの現代の主要ブラウザでは、
target="_blank" を指定すると自動的に rel="noopener" が適用されます。

ただし古い環境への対応とセキュリティの意図を明示するため、
rel="noopener noreferrer" を明示的に書いておくのが
安全なWeb制作のベストプラクティスです。

7. 🖼️ 画像タグ（`<img>`）

基本的な書き方

<img> タグは画像を表示するタグです。
自己閉じタグなので終了タグは不要です。

<!-- 基本形 -->
<img src="photo.jpg" alt="山の写真" />

<!-- サイズ指定 -->
<img src="photo.jpg" alt="山の写真" width="400" height="300" />

<!-- 外部URLの画像 -->
<img src="https://example.com/image.jpg" alt="外部の画像" />

alt 属性の書き方

alt 属性は「画像が表示できないときの代替テキスト」です。
アクセシビリティとSEOの両方に重要な属性です。

<!-- ✅ 良いalt属性：画像の内容を具体的に説明 -->
<img src="dog.jpg" alt="芝生の上で走っている柴犬" />
<img src="logo.png" alt="TechBlog ロゴ" />
<img src="graph.png" alt="2024年の売上グラフ：前年比120%増" />

<!-- ❌ 悪いalt属性 -->
<img src="dog.jpg" alt="画像" />        <!-- 内容がわからない -->
<img src="dog.jpg" alt="dog.jpg" />    <!-- ファイル名はNG -->
<img src="dog.jpg" alt="" />           <!-- 装飾目的の画像のみ空にする -->

💡 装飾目的の画像は alt="" にする！
背景テクスチャや区切り線など「意味のない装飾画像」は
alt="" と空にすることで、スクリーンリーダーがスキップします。

loading 属性（遅延読み込み）

<!-- loading="lazy"：画面に近づいたときに読み込む -->
<img src="large-photo.jpg" alt="大きな写真" loading="lazy" />

<!-- loading="eager"：すぐに読み込む（デフォルト） -->
<img src="hero-image.jpg" alt="ファーストビュー画像" loading="eager" />

💡 loading="lazy" でページの表示速度が向上します！
スクロールしないと見えない画像には loading="lazy" を付けることで、
最初のページ読み込みが速くなります。
ただし「ファーストビュー（最初から見える部分）」の画像には使わないこと。

srcset・sizes（レスポンシブ画像）

<!-- デバイスの解像度に応じて最適な画像を表示する -->
<img
  src="photo-400.jpg"
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w
  "
  sizes="
    (max-width: 600px) 400px,
    (max-width: 1200px) 800px,
    1200px
  "
  alt="レスポンシブ対応の写真"
/>

<!-- 読み方：
  srcset：「400px幅の画像」「800px幅の画像」「1200px幅の画像」を用意
  sizes：画面幅600px以下なら400pxサイズ・1200px以下なら800px・それ以上なら1200px
-->

8. 📝 フォームタグ

フォームとは？

フォームとは「ユーザーがデータを入力してサーバーに送信する仕組み」です。
ログイン・お問い合わせ・検索など、あらゆる入力に使われます。

`<form>` タグの属性

<form
  action="/submit"
  method="post"
  enctype="multipart/form-data"
>
  <!-- フォームの中身 -->
  <!-- 
  action：データの送信先URL
  method：送信方法（get or post）
  enctype：ファイル送信時に指定
  -->
</form>

method属性：GETとPOSTの違い

	GET	POST
データの場所	URLに付く（`?name=value`）	リクエストのボディに入る
用途	検索・絞り込み	ログイン・データ登録
セキュリティ	❌ URLに見える	✅ URLに見えない
ブックマーク	✅ できる	❌ できない
データ量	少量のみ	大量OK

⚠️ HTMLフォームのmethod属性は get と post の2つだけです！
REST APIでよく使う PUT・PATCH・DELETE は
HTMLの <form> タグでは使えません。

更新・削除を行いたい場合の解決策：

// ✅ JavaScriptのfetchで対応するのが現代の標準
fetch('/api/users/123', {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: '新しい名前' })
});

<!-- ✅ Railsなど一部のフレームワークでは hiddenフィールドで擬似的に表現する -->
<form action="/users/123" method="post">
  <input type="hidden" name="_method" value="PUT" />
  <!-- 実際にはサーバー側でPUTとして処理する -->
</form>

`<input>` タグ

<input> タグはユーザーが値を入力する部品です。
type 属性で入力の種類を変えられます。

type 属性の全種類

<!-- テキスト入力 -->
<input type="text" placeholder="テキストを入力" />

<!-- パスワード入力（文字が隠れる） -->
<input type="password" placeholder="パスワード" />

<!-- メールアドレス入力（形式チェックあり） -->
<input type="email" placeholder="example@email.com" />

<!-- 数値入力 -->
<input type="number" min="0" max="100" step="1" />

<!-- 電話番号入力 -->
<input type="tel" placeholder="090-1234-5678" />

<!-- URL入力 -->
<input type="url" placeholder="https://example.com" />

<!-- 日付入力（カレンダーUIが表示される） -->
<input type="date" />

<!-- 時刻入力 -->
<input type="time" />

<!-- 日付＋時刻入力 -->
<input type="datetime-local" />

<!-- 月入力 -->
<input type="month" />

<!-- 範囲入力（スライダーUIが表示される） -->
<input type="range" min="0" max="100" value="50" />

<!-- 色選択 -->
<input type="color" value="#ff0000" />

<!-- チェックボックス -->
<input type="checkbox" id="agree" name="agree" />
<label for="agree">利用規約に同意する</label>

<!-- ラジオボタン（同じnameの中で1つだけ選択） -->
<input type="radio" id="male" name="gender" value="male" />
<label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female" />
<label for="female">女性</label>

<!-- ファイル選択 -->
<input type="file" accept="image/*" />  <!-- 画像ファイルのみ -->
<input type="file" accept=".pdf,.doc" multiple />  <!-- 複数ファイル可 -->

<!-- 隠しフィールド（ユーザーには見えない） -->
<input type="hidden" name="userId" value="123" />

<!-- 送信ボタン -->
<input type="submit" value="送信する" />

<!-- リセットボタン -->
<input type="reset" value="リセット" />

<!-- 検索入力（×ボタンが表示されることがある） -->
<input type="search" placeholder="検索キーワード" />

`<label>` タグ

<label> タグは「入力欄とその説明文を結びつける」タグです。
for 属性と input の id 属性を一致させることで紐づきます。

<!-- for属性でinputと紐づける（推奨） -->
<label for="username">ユーザー名</label>
<input type="text" id="username" name="username" />

<!-- labelでinputを囲む方法（for属性なしでもOK） -->
<label>
  ユーザー名
  <input type="text" name="username" />
</label>

labelタグを使うメリット：

✅ ラベルのテキストをクリックしてもinputがフォーカスされる
✅ チェックボックスやラジオボタンはラベルをクリックでも選択できる
✅ スクリーンリーダーが「これはどの入力欄か」を正しく読み上げる

バリデーション属性

バリデーション属性とは「入力値を送信前にチェックするHTML標準機能」です。

<form>
  <!-- required：必須入力 -->
  <input type="text" name="name" required />

  <!-- minlength・maxlength：文字数の制限 -->
  <input type="text" name="username" minlength="3" maxlength="20" />

  <!-- min・max：数値の範囲制限 -->
  <input type="number" name="age" min="0" max="150" />

  <!-- pattern：正規表現でのバリデーション -->
  <input
    type="text"
    name="zipcode"
    pattern="[0-9]{3}-[0-9]{4}"
    placeholder="123-4567"
    title="郵便番号はXXX-XXXXの形式で入力してください"
  />

  <!-- step：数値の入力刻み -->
  <input type="number" name="price" step="100" min="0" />

  <button type="submit">送信</button>
</form>

属性	説明	例
`required`	入力必須	`required`
`minlength`	最小文字数	`minlength="8"`
`maxlength`	最大文字数	`maxlength="20"`
`min`	最小値	`min="0"`
`max`	最大値	`max="100"`
`pattern`	正規表現チェック	`pattern="[0-9]{3}"`
`step`	入力の刻み	`step="0.5"`

`<textarea>` タグ

<textarea> タグは複数行のテキスト入力欄です。

<label for="message">メッセージ</label>
<textarea
  id="message"
  name="message"
  rows="5"
  cols="40"
  placeholder="お問い合わせ内容を入力してください..."
  maxlength="500"
  required
></textarea>
<!-- ※ 終了タグが必要！<textarea />ではNG -->
<!-- rows：表示行数 -->
<!-- cols：表示列数（CSSで制御が一般的） -->

`<select>` タグ

<select> タグはドロップダウンメニュー（プルダウン）を作るタグです。

<label for="prefecture">都道府県</label>
<select id="prefecture" name="prefecture">
  <option value="">選択してください</option>  <!-- 初期表示 -->
  <option value="tokyo">東京都</option>
  <option value="osaka">大阪府</option>
  <option value="aichi" selected>愛知県</option>  <!-- selectedで初期選択 -->
  <option value="fukuoka">福岡県</option>
</select>

<!-- multiple：複数選択可能 -->
<select name="skills" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

<!-- optgroupでグループ化 -->
<select name="food">
  <optgroup label="フルーツ">
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
  </optgroup>
  <optgroup label="野菜">
    <option value="carrot">にんじん</option>
    <option value="tomato">トマト</option>
  </optgroup>
</select>

`<button>` タグ

<!-- 送信ボタン（form内のデフォルト動作） -->
<button type="submit">送信する</button>

<!-- リセットボタン -->
<button type="reset">リセット</button>

<!-- 通常のボタン（JavaScriptで制御） -->
<button type="button" onclick="doSomething()">クリック</button>

<!-- disabled：無効化（送信できないようにする） -->
<button type="submit" disabled>送信できません</button>

⚠️ <button> には必ず type 属性を付けましょう！
type を省略すると type="submit" として動作するため、
フォームの中でボタンをクリックしたら意図せずフォームが送信されることがあります。

フォームの完全な例

<form action="/contact" method="post">
  <!-- 名前 -->
  <div>
    <label for="name">お名前 <span>※必須</span></label>
    <input
      type="text"
      id="name"
      name="name"
      placeholder="山田 太郎"
      required
      maxlength="50"
    />
  </div>

  <!-- メールアドレス -->
  <div>
    <label for="email">メールアドレス <span>※必須</span></label>
    <input
      type="email"
      id="email"
      name="email"
      placeholder="yamada@example.com"
      required
    />
  </div>

  <!-- お問い合わせ種別 -->
  <div>
    <label for="category">お問い合わせ種別</label>
    <select id="category" name="category">
      <option value="">選択してください</option>
      <option value="product">製品について</option>
      <option value="support">サポート</option>
      <option value="other">その他</option>
    </select>
  </div>

  <!-- メッセージ -->
  <div>
    <label for="message">メッセージ <span>※必須</span></label>
    <textarea
      id="message"
      name="message"
      rows="5"
      placeholder="お問い合わせ内容を入力してください"
      required
      minlength="10"
      maxlength="1000"
    ></textarea>
  </div>

  <!-- 利用規約 -->
  <div>
    <input type="checkbox" id="agree" name="agree" required />
    <label for="agree">
      <a href="/terms" target="_blank">利用規約</a>に同意する
    </label>
  </div>

  <!-- 送信ボタン -->
  <button type="submit">送信する</button>
</form>

9. 🧩 次回への橋渡し：ページ構造を作るタグ

ここまで紹介したタグの他に、ページ全体の構造を作る重要なタグがあります。
次回の第三回で詳しく解説しますが、まず名前だけ覚えておきましょう！

タグ	一言で言うと
`<header>`	ページやセクションのヘッダー（ロゴ・ナビなど）
`<nav>`	ナビゲーションメニュー
`<main>`	ページのメインコンテンツ（1ページに1つ）
`<article>`	独立したコンテンツ（ブログ記事・ニュースなど）
`<section>`	テーマごとのセクション
`<aside>`	補足情報・サイドバー
`<footer>`	ページやセクションのフッター
`<div>`	意味を持たない汎用のブロック要素
`<span>`	意味を持たない汎用のインライン要素

<!-- ページ構造のイメージ -->
<body>
  <header>ロゴ・ナビゲーション</header>
  <main>
    <article>
      <section>セクション①</section>
      <section>セクション②</section>
    </article>
    <aside>サイドバー・関連情報</aside>
  </main>
  <footer>コピーライト・リンク集</footer>
</body>

💡 「なぜこのタグを使うのか」は次回詳しく解説します！
これらのタグはSEO・アクセシビリティ・保守性に大きく関わります。
第三回でしっかり深掘りしましょう🌟

10. 🎯 まとめ

タグ	一言で言うと
`<h1>`〜`<h6>`	ページの見出し・階層を表す
`<p>`	段落（ひとまとまりの文章）
`<strong>` / `<em>`	意味的な強調（太字・斜体）
`<ul>` / `<ol>` / `<dl>`	箇条書き・番号付き・説明リスト
`<table>`	表形式のデータ（レイアウト目的はNG）
`<a>`	ハイパーリンク
`<img>`	画像（altは必ず書く）
`<form>`	ユーザー入力とデータ送信
`<input>`	入力欄（typeで種類を変える）
`<label>`	入力欄と説明文を紐づける
`<textarea>`	複数行テキスト入力
`<select>`	ドロップダウンメニュー
`<button>`	ボタン（typeを必ず指定する）

タグには「意味」があります。
見た目だけで選ぶのではなく、
「このコンテンツにはどのタグが意味的に正しいか」を考えることが
良いHTMLを書く第一歩です💪

次回は セマンティックHTML・アクセシビリティ・SEO を解説します！
「意味のあるHTML」をさらに深掘りして、
プロのエンジニアが書く高品質なHTMLを目指します🌟

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

🔗 シリーズ記事

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

📄 HTMLを基礎から深く学ぼう【第二回】よく使うタグを完全解説！見出し・リスト・リンク・画像・フォーム

1. 👋 はじめに

2. 🏷️ タグの基本的な書き方（おさらい）

ブロック要素とインライン要素

3. 📝 テキスト系タグ

見出しタグ（<h1> 〜 <h6>）

段落タグ（<p>）

テキスト装飾タグ

<strong> と <b> の違い・<em> と <i> の違い

4. 📋 リストタグ

箇条書きリスト（<ul>）

番号付きリスト（<ol>）

<ol> の属性

説明リスト（<dl>）

リストの入れ子（ネスト）

<ul> と <ol> の使い分け

5. 📊 テーブル（表）タグ

テーブルの基本構造

テーブルの属性

6. 🔗 リンクタグ（<a>）

基本的な書き方

<a> タグの重要な属性

target="_blank" に rel="noopener noreferrer" が必要な理由

7. 🖼️ 画像タグ（<img>）

基本的な書き方

alt 属性の書き方

loading 属性（遅延読み込み）

srcset・sizes（レスポンシブ画像）

8. 📝 フォームタグ

フォームとは？

<form> タグの属性

method属性：GETとPOSTの違い

<input> タグ

type 属性の全種類

<label> タグ

バリデーション属性

<textarea> タグ

<select> タグ

<button> タグ

フォームの完全な例

9. 🧩 次回への橋渡し：ページ構造を作るタグ

10. 🎯 まとめ

🔗 シリーズ記事

見出しタグ（`<h1>` 〜 `<h6>`）

段落タグ（`<p>`）

`<strong>` と `<b>` の違い・`<em>` と `<i>` の違い

箇条書きリスト（`<ul>`）

番号付きリスト（`<ol>`）

`<ol>` の属性

説明リスト（`<dl>`）

`<ul>` と `<ol>` の使い分け

6. 🔗 リンクタグ（`<a>`）

`<a>` タグの重要な属性

`target="_blank"` に `rel="noopener noreferrer"` が必要な理由

7. 🖼️ 画像タグ（`<img>`）

`<form>` タグの属性

`<input>` タグ

`<label>` タグ

`<textarea>` タグ

`<select>` タグ

`<button>` タグ