【HTML】Web制作でよく使うHTMLタグ7選とそのTipsについて

SHARE

目次

はじめに

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

前の記事

GSAPの保守性を上げるEffectsの紹介