HTMLタグの種類と役割まとめ｜初心者向けガイド

HTML
2025.09.28

こんにちは！駆け出しエンジニアのまるです👓🦍

前回の記事では、「HTMLとはなにか？」について解説しました。
HTMLがWebページの”骨組み”になる存在だ、というイメージはつかめましたか？

そこで今回は、そこから一歩進んで、
HTMLタグの種類と役割を、実際のコード例を見ながらやさしく解説していきます！

具体的には、「見出し」「段落」「リンク」「画像」「リスト」「表」など、
Webページを作るときに必ず使うタグをまとめて紹介します。
この記事を読み終えるころには、HTMLタグの基本が一通り理解できるはずです✨

 HTML文書の基本構造（おさらい）

まずは前回も触れた、HTMLの基本構造を軽くおさらいしておきましょう。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ゼロからはじめるプログラミング入門ログ</title>
    </head>
    <body>
        <!-- 本文はここに書く -->
    </body>
</html>

ここで、<!DOCTYPE html> は「これはHTMLですよ」とブラウザに伝える宣言です。
そのうえで <html> タグが全体を包み込み、
さらに <head>（画面に表示されない情報）と <body>（実際に表示される部分）に分かれています。

なお、この部分はあくまでおさらいです。
もしまだ不安な方は、前回の記事「HTMLとは？」を参考にしてみてください。

それではここから、今回の本題である
HTMLタグの使い方に進んでいきましょう。

見出しタグ（ <h1> ~ <h6> )

HTMLには、文章の階層を表すための「見出しタグ」が用意されています。

たとえば、

  • <h1>：ページで一番大きな見出し（記事タイトル）
  • <h2>：大きな区切り
  • <h3>：さらに細かい区切り

といったように、数字が小さいほど重要度が高くなります。

<h1>これはh1の見出しです</h1>
<h2>これはh2の見出しです</h2>
<h3>これはh3の見出しです</h3>
<h4>これはh4の見出しです</h4>
<h5>これはh5の見出しです</h5>
<h6>これはh6の見出しです</h6>

このコードをブラウザで表示すると、
h1が一番大きく、h2・h3…と順番に文字が小さく表示されます。

つまり、見出しタグを正しく使うことで、
文章の構造が一目でわかるページになるのです。

段落タグ（<p>）

次に、文章をひとまとまりにするときに使うのが <p> タグです。

<p>これは段落です。ここに文章を書いていきます。</p

💡ブラウザでの表示イメージ

ここで大事なのは、
HTMLではただ改行するだけでは段落として扱われないという点です。

そのため、<p> で囲むことで、
「ここはひとつの文章のかたまりですよ」とコンピュータに伝えます。

ブログを書くときは、
話題が一区切りついたら<p>
という意識を持つと、とても書きやすくなります。

画像タグ（<img>）

続いて、画像を表示したいときに使うのが <img> タグです。

<img src="images/gorilla.png" alt="腕立て伏せ">

ここで、

  • src：画像の場所
  • alt：画像の説明（表示できないとき用・SEOにも重要）

という役割があります。

💡ブラウザでの表示イメージ

相対パスと絶対パスについて

画像の場所を指定する方法には、主に２種類あります。

①相対パス
まず、相対パスは「今いるHTMLファイルから見た位置関係」で指定する方法です。

<img src="images/gorilla.png" alt="腕立て伏せ">

この方法は、Web制作で最もよく使われます。
なぜなら、フォルダ構造を整理すれば管理しやすいからです。

②絶対パス
一方で、絶対パスはインターネット上のURLをそのまま指定します。

<img src="https://maru-diary.com/images/gorilla.png" alt="腕立て伏せ">

外部の画像を直接使えるというメリットはありますが、
場所が変わるとリンク切れしやすい点には注意が必要です。

リンクタグ（<a>）

次に、ページ同士をつなぐ「リンク」を作るタグを見ていきましょう。

<p>駆け出しエンジニア「まる」のブログは<a href="https://maru-diary.com/">こちら</a>から！</p>

💡ブラウザでの表示イメージ

href にリンク先を指定し、
クリックできる文字を<a>タグで囲みます。

このようにリンクを貼ることで、
Webらしい「情報のつながり」が生まれます。

リスト（<ul>と <ol>）

情報を整理して見せたいときは、リストタグが便利です。

  • <ul>：順番のないリスト
  • <ol>：順番のあるリスト
  • <li>：各項目
<ul>
     <li>腕立て伏せ</li>
     <li>腹筋</li>
     <li>スクワット</li>
     <li>懸垂</li>
 </ul>
 <ol>
     <li>足幅は肩幅より少し広め</li>
     <li>つま先は少し外側に向ける</li>
     <li>つま先と膝の向きがぶれないようにしゃがむ</li>
     <li>太ももと床が平行になったら立ち上がる</li>
 </ol>

💡ブラウザでの表示イメージ

このように使うことで、
文章だけよりもパット見て理解しやすい表示になります。

表タグ（<table>）

さらに、データを表形式でまとめたいときは、<table> を使います。

<table>
     <tr>
         <th>種目名</th>
         <th>回数</th>
     </tr>
     <tr>
         <td>腕立て伏せ</td>
         <td>20回</td>
     </tr>
     <tr>
         <td>腹筋</td>
         <td>30回</td>
     </tr>
 </table>
 <table>
     <tr>
         <th colspan="2">トレーニング記録</th>
     </tr>
     <tr>
         <td>腕立て伏せ</td>
         <td>20回</td>
     </tr>
     <tr>
         <td>腹筋</td>
         <td>30回</td>
     </tr>
 </table>

💡ブラウザでの表示イメージ

ここで、

  • <tr> ： 行
  • <th> ：見出しセル
  • <td> ：データセル

という役割があります。

また、colspan=”2″ を使えば、
セルを横にまとめて表示することも可能です。

コメント（<!– –>）

最後に、HTMLでコメントを書く方法も紹介しておきます。

<!-- これはメモです。ブラウザには表示されません -->

このようにコメントを書いておくと、
あとからコードを見返したときにとても助かります。

まとめ｜HTMLタグはWeb制作の基本パーツ

ここまで、HTMLタグの種類と役割を一通り見てきました。

  • 見出し（h1〜h6）
  • 段落（p）
  • 画像（img）
  • リンク（a）
  • リスト（ul / ol）
  • 表（table）
  • コメント

どれも、Webページを作るうえで欠かせない基本タグです。

タグは魔法の言葉みたいなもの！
ひとつ覚えるたびに、ページにできることが増えていくんだ！

そして次回は、
Webページに欠かせない「フォーム」の作り方を紹介します！

お問い合わせページやログイン画面を作るときに必ず使うので、
ぜひ一緒に学んでいきましょう✨️

コメント