【初心者向け】HTMLの基本タグまとめ｜div・span・a・imgの使い方をやさしく解説

1.HTMLの基本タグって何？

HTMLは、ウェブページを作るための「骨組み」となる言語です。
ページの見た目はCSSで整えますが、そのベースとなる構造を作るのがHTMLの役割です。

でも、いざ勉強を始めると「タグがたくさんあって、どれを覚えればいいの？」と迷ってしまいますよね。

実は、HTMLでよく使うタグは限られていて、基本を押さえておけば十分です。
この記事では、その中でも特によく使う4つのタグ（<div>、<span>、<a>、<img>）に絞って、使い方と注意点をやさしく解説していきます！

「まず何から覚えたらいいの？」という方は、ぜひこの記事を参考にしてくださいね。

2.よく使う基本タグと使い方

2-1. <div>：要素をまとめる箱

<div>は、HTMLの中でも最もよく使われる汎用的なブロック要素です。
複数の要素をまとめたり、スタイルを当てるための「箱」として使います。

たとえば「プロフィールカード」や「記事の本文」など、1つのまとまりを表現したいときに使うのがこの<div>です。

💡 使用例

<div class="box">
  <h2>お知らせ</h2>
  <p>サイトメンテナンスは明日の午前2時に実施されます。</p>
</div>

このように、見出し（<h2>）と本文（<p>）を<div>でまとめることで、CSSを使って枠線をつけたり、背景色をつけたりといったスタイリングがしやすくなります。

📌 ポイント

• <div>はブロック要素（改行される）
• 中にテキストだけでなく他のタグ（<p>, <img>, <ul>など）も自由に入れられる
• CSSと組み合わせて使うことが多い

2-2. <span>：インラインでスタイルを当てたいときに使う

<span>は、<div>と似たような用途で使われるタグですが、インライン要素という点が大きな違いです。
テキストの一部分だけにスタイルを当てたいときなどに活躍します。

たとえば、文章の中で特定の語句だけ色を変える、太字にする、などの装飾に使います。

💡 使用例

<p>この文章の中で <span style="color: red;">赤くしたい部分</span> があります。</p>

このように、文章の中の一部だけに色やフォントなどの装飾を適用したいときに便利です。

📌 ポイント

• <span>はインライン要素（文章の流れを壊さずに使える）
• 単体で使っても見た目には何も影響なし（CSSと一緒に使う前提）
• <strong>や<em>と違い、意味は持たない純粋な「装飾用」

2-3. <a>：リンクを作成する

<a>タグは、「他のページ」や「外部サイト」など、リンクを作るためのタグです。
HTMLの中でも特に重要で、ナビゲーションやボタンなど様々な場面で使われます。

リンク先を指定するには、href属性を使います。

💡 使用例

<a href="https://example.com" target="_blank">外部サイトへ</a>

• href：リンク先のURL
• target="_blank"：クリック時に新しいタブで開く

📌 ポイント

• リンク先はhref属性で指定する（必須）
• target="_blank"を使うと、外部リンクを新しいタブで開ける
• リンクテキストの中に画像やアイコンを入れることもできる
• href="#"のように「空リンク」を作るときはJavaScriptやページ内リンクと組み合わせる

<a href="#">トップへ戻る</a>

※ 実際のリンクがない場合、#は仮の記述として使われます。

2-4. <img>：画像を表示する

<img>タグは、画像を表示するためのタグです。
サイトにイラストや写真を埋め込みたいときに使います。

特徴としては、「閉じタグが不要な空要素」という点があり、単独で完結します。

💡 使用例

<img src="sample.jpg" alt="サンプル画像" width="300">

• src：画像ファイルのパス（絶対パス・相対パスどちらもOK）
• alt：画像が表示されなかったときの代替テキスト
• width / height：画像サイズ（単位は基本ピクセル）

📌 ポイント

• alt属性は必ず設定しよう（SEOとアクセシビリティのため）
• CSSでサイズや装飾を調整することもできる
• 画像ファイルの形式は .jpg, .png, .webp, .svg などが使える

<style>
  img {
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
  }
</style>

画像を美しく見せるには、こういった装飾もおすすめです。

3.よくある疑問と注意点

❓ divとspanの違いってなに？

<div>はブロック要素、<span>はインライン要素です。

ブロック要素は改行されるのに対して、インライン要素は文章の流れの中に収まります。
この違いを意識して使い分けましょう。

❓ aタグの中にdivを入れていいの？

HTML5では**<a>タグの中にブロック要素（例：<div>）を入れることができます**。
ただし、古いHTML（HTML4など）ではNGだったため、古い記事を読んで混乱しないよう注意しましょう。

<a href="/about">
  <div class="card">
    <h3>プロフィール</h3>
    <p>管理人の紹介ページへ</p>
  </div>
</a>

このような使い方は、HTML5では正しく動作します。

❓ imgタグにalt属性は必要？

はい、alt属性は基本的に必須と考えましょう。

• 画像が読み込めなかったときの代替テキストになる
• スクリーンリーダーの読み上げに使われる
• Googleなど検索エンジンの画像認識にも影響する（SEOに有利）

装飾目的で使う画像（例：背景のアイコンなど）には、alt=""のように空のaltを設定するとOKです。

まとめ：まずはこの4つをマスターしよう！

今回は、HTMLの中でも特によく使う基本タグを4つ紹介しました。

これらはどんなWebサイトを作るにも必ず登場する超基本タグです。
まずはこの4つの使い方をしっかり理解しておくことで、今後の学習がグッとラクになります！

次回は、これらのタグを使って**レイアウトを整えるためのCSS（FlexboxとGrid）**について解説していく予定です。
気になる方はぜひそちらもチェックしてみてくださいね！

HTML,CSSを学ぶ方々におすすめの書籍です。

僕自身、様々なプログラミングの本を購入しましたが、こちらの［HTML＆CSSとWebデザインが1冊できちんと身につく本］が一番わかりやすく、一冊で基本を一通り学べる内容になっています。

HTML＆CSSとWebデザインが1冊できちんと身につく本［増補改訂版］ [ 服部雄樹 ]