📌 はじめに（段落ブロック）
HTMLはWebページの構造を定義するための基本的な言語です。この記事では、よく使われるHTMLタグをカテゴリ別に紹介し、それぞれの実用的なコードサンプルも掲載します。
🏗️ ページ構造系タグ
✅ header, main, footer（見出しブロック）
|
1 2 3 4 5 6 7 8 9 10 |
<header> <h1>My Portfolio</h1> </header> <main> <p>ようこそ！私のサイトへ。</p> </main> <footer> <p>&copy; 2025 My Name</p> </footer> |
💡 解説（段落ブロック）
<header> と <footer> はページ全体またはセクションごとの共通要素に使います。<main> はそのページの主たる内容を囲みます。
✍️ テキスト表示系タグ
✅ p, strong, em, mark, code
|
1 2 3 4 5 |
<p>これは <strong>重要</strong> な情報です。</p> <p><em>注目</em> してください。</p> <p>キーワードは <mark>HTML</mark> です。</p> <p>コード例：<code>&lt;div&gt;</code></p> |
💡 解説
<strong>：視覚的に太字 + 意味的に重要<em>：視覚的に斜体 + 強調<mark>：蛍光ペン的ハイライト<code>：インラインコード表示（例：タグや変数）
📋 リスト系タグ
✅ ul, ol, li
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <ol> <li>準備する</li> <li>書く</li> <li>公開する</li> </ol> |
💡 解説
<ul> は「順不同リスト」、<ol> は「順序付きリスト」です。それぞれ <li> で項目を定義します。
🔗 リンク・画像・引用
✅ a, img, blockquote, figure
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<p><a href="https://example.com">公式サイトはこちら</a></p> <img src="https://via.placeholder.com/150" alt="サンプル画像"> <blockquote cite="https://example.com"> Webは情報の宝庫である。 </blockquote> <figure> <img src="https://via.placeholder.com/200x100" alt="風景"> <figcaption>美しい風景</figcaption> </figure> |
💡 解説
<blockquote>は引用を表現するセマンティックタグ<figure>+<figcaption>は画像や図表にキャプションを付けるのに最適
📝 フォーム系タグ（概要）
✅ form, input, label, textarea
|
1 2 3 4 5 6 7 8 9 10 |
<form> <label for="name">名前：</label> <input type="text" id="name" name="name"> <label for="message">メッセージ：</label> <textarea id="message" name="message"></textarea> <button type="submit">送信</button> </form> |
💡 解説
WordPressではGutenbergの「フォームブロック」でも代替可能ですが、HTMLで手動構築することも可能です。<label> はアクセシビリティ的にも重要。
🧠 セマンティック補助タグ
✅ time, abbr, cite, del, ins
|
1 2 3 4 |
<p>記事公開日：<time datetime="2025-06-28">2025年6月28日</time></p> <p><abbr title="HyperText Markup Language">HTML</abbr> を使います。</p> <p><del>この情報は古いです</del> <ins>こちらを参照してください</ins></p> |
💡 解説
検索エンジンや支援技術（スクリーンリーダー）に対して、意味的なヒントを与えるマークアップが可能になります。
✅ まとめ（段落）
HTMLタグはただの見た目ではなく、「意味（セマンティクス）」を持たせることがWeb制作では重要です。