目次
はじめに
はじめまして!株式会社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が書けるようになります✨。