ISSEN 
目次
はじめに
はじめまして！株式会社TOKOSのリョウタツです！
Web制作を始めたての皆さんへ。
本日は基礎中の基礎、HTMLタグについてご紹介します。
HTMLタグは100種類以上の種類があり「どのタグを使えばいいの🤔？」「このタグにはどんな意味があるの🤔？」と疑問に思ってしまう初学者の方も多いはずです。
とはいえ、今すぐにすべてのHTMLタグを覚える必要はなく、よく使うHTMLタグから徐々に覚えていけば大丈夫です👌。
この記事では、Web制作の現場でよく使われるHTMLタグを7個に絞って、わかりやすく紹介するとともに、各HTMLタグを使用する際のTips(コツ)についてもご紹介させていただきます。
よく使うHTMLタグ7選
1.<h1>~<h6>：見出しタグ
使用例
index.html
<h1>タイトル</h1>
<h2>タイトル</h2>
<h3>タイトル</h3>
<h4>タイトル</h4>
<h5>タイトル</h5>
<h6>タイトル</h6>
Tips 💡：
- 「h」とは、「heading(ヘディング)」の略です。
- 見出しを作成する際に使用するタグで、
<h1>は1ページに1つだけとなります！ <h2>~<h6>の順で小さな見出しになっていきます。- 見出しは階層構造で使うと、検索エンジンやスクリーンリーダーにも優しい構造になります。
2.<p>：段落
使用例
index.html
<p>これは一つ目の段落です</p>
<p>これは一つ目の段落です</p>
Tips 💡：
- 「p」とは「paragraph（パラグラフ）」の略です。
- pタグで囲んだ文章の前後に 1行改行が生まれます。
- 段落を分けたいならpタグを使い、文章中に改行する場合はbrタグを使いましょう！
3.<a>：リンク
使用例
index.html
<a href="https://example.com">外部サイトへ遷移</a>
Tips 💡：
- 「a」とは、「anchor（アンカー）」の略です。
- リンクを埋め込む際に使用するタグで、href属性の中にURLを書いて遷移先のリンクを指定します。
- 別タブで開きたいときは
target="_blank"をつけましょう！
index.html
<a href="https://example.com" target="_blank" rel="noopener">外部サイトへ遷移</a>- アクセシビリティのためにも「リンク先が何かわかるテキスト」にしましょう。
🙅🏻♂️「こちらをクリック」→ 🙆🏻♀️「料金表はこちら」
4.<img>：画像
使用例
index.html
<img src="sample.jpg" alt="製品の写真">Tips 💡：
- 「img」とは「image（イメージ）」の略です。
- 画像を表示する際に使用します。
src属性は必須の属性で、ファイル名を指定します。alt属性は必須ではありませんが、アクセシビリティの観点で画像の代わりになる大切な説明文です。- サイズ指定はHTMLではなくCSSで管理するのが現代的です。
5.<ul>・<li>・<ol>：リスト
使用例
index.html
<ul>
<li>項目</li>
<li>項目</li>
<li>項目</li>
</ul>
<ol>
<li>項目</li>
<li>項目</li>
<li>項目</li>
</ol>
Tips 💡：
- 「ul」とは「unordered list（アンオーダードリスト）」の略です。
- 順序のないリストを表示する際に使用します。
- 「ol」とは「ordered list（オーダードリスト）」の略です。
- 順序のあるリストを表示する際に使用します。
- 「li」とは「list item（リストアイテム）」の略です。
- リストの各項目を記述する際に使用し、ulタグもしくはolタグの入れ子として使用します。
- ナビゲーションなどにも使えるが、その場合は
<nav>とセットで意味づけをします。
6.<div>：ブロックのグループ化
使用例
index.html
<div class="card">
<p>divタグで囲まれた文章です。</p>
<p>divタグで囲まれた文章です。</p>
</div>
Tips 💡：
- 「div」とは、「division（ディビジョン）」の略です。
- divタグには特別な意味はありませんが、要素をグループ化する際に使用します。
- 囲んだ要素をブロック化し、下に積まれていきます。
7.<span>：インライン装飾用のタグ
使用例
index.html
<span>spanタグで囲まれた文章です。</span>
<span>spanタグで囲まれた文章です。</span>
Tips 💡：
- 「span」とは、「範囲（領域）をもたせる」という意味で略称ではありません。
- 囲んだ要素をインライン化し、下に積まれず横に並びます。
- spanタグは行の中で一部分だけを装飾したいときに使います。
- 意味を持たないタグなので、装飾以外の使い道には注意しましょう
まとめ
今回ご紹介した7つの基礎的なタグは、Web制作の現場で日常的によく使うものばかりです。
| タグ | 用途 |
|---|---|
<h1>〜<h6> | 見出し構造を作る |
<p> | 段落（本文）を書く |
<a> | リンクを作る |
<img> | 画像を表示 |
<ul><ol><li> | リストを作る |
<div> | レイアウト・ブロック化 |
<span> | テキストの一部を装飾 |
ただ覚えるだけでなく、「どんなときに、どう使うのが適切か？」を理解しておくことで、よりキレイで意味のあるHTMLが書けるようになります✨。
