>_DEVELOP

HTML 使用頻度の高いタグ

Posted on 2025-06-29 by coffee

📌 はじめに（段落ブロック）

HTMLはWebページの構造を定義するための基本的な言語です。この記事では、よく使われるHTMLタグをカテゴリ別に紹介し、それぞれの実用的なコードサンプルも掲載します。

🏗️ ページ構造系タグ

✅ header, main, footer（見出しブロック）

<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

<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

<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

<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

<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

<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制作では重要です。