HTMLタグとは？よく使う基本タグ一覧

2026年5月30日

どうも、くじらいどです。

HTMLを勉強し始めると、最初に出てくるのが「タグ」という概念です。

この記事では、HTMLタグとは何かをざっくり説明したあと、よく使う基本タグを一覧でまとめます。

HTMLタグとは

HTMLタグとは、Webページの文章に「これは見出しです」「これはリンクです」といった意味や役割を付けるための印です。

<タグ名> で始まり、</タグ名> で終わります。この2つで1セットです。

<p>これは段落です。</p>

開始タグ（<p>）と終了タグ（</p>）の間にテキストや画像などの内容を書きます。

くじらいど

タグは基本的に「開始タグ」と「終了タグ」のセットですが、<br> や <img> のように終了タグが不要なタグもあります。

HTMLの基本構造

個別のタグを覚える前に、HTMLファイル全体の基本構造を確認しておきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p>本文テキスト</p>
  </body>
</html>

<!DOCTYPE html>：これはHTMLファイルですよ、という宣言
<html>：HTMLファイル全体を囲むタグ
<head>：ページの設定情報（タイトルや文字コードなど）を書く場所
<body>：ブラウザに実際に表示される内容を書く場所

よく使う基本タグ一覧

見出し：h1〜h6

見出しを表すタグです。数字が小さいほど大きな見出しになります。

<h1>一番大きな見出し</h1>
<h2>二番目の見出し</h2>
<h3>三番目の見出し</h3>

一般的に <h1> はページに1つだけ使い、メインタイトルに使います。

段落：p

本文の段落を表すタグです。

<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>

改行：br

テキストを改行するタグです。終了タグは不要です。

<p>1行目<br>2行目</p>

リンク：a

リンクを表すタグです。href 属性にリンク先のURLを指定します。

リンクテキスト

別タブで開く

<a href="https://example.com">リンクテキスト</a>

<!-- 別タブで開く場合は target="_blank" を追加 -->
<a href="https://example.com" target="_blank">別タブで開く</a>

画像：img

画像を表示するタグです。終了タグは不要です。src に画像のパス、alt に画像の説明文を入れます。

<img src="image.png" alt="画像の説明">

くじらいど

alt は画像が表示できないときに代わりに表示されるテキストです。SEO的にも重要なので省略しないようにしましょう。

箇条書きリストを作るタグです。

<!-- 順序なしリスト（・の箇条書き） -->
<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li>みかん</li>
</ul>

<!-- 順序ありリスト（1. 2. 3. の番号付き） -->
<ol>
  <li>1番目</li>
  <li>2番目</li>
  <li>3番目</li>
</ol>

テキスト装飾：strong・em

<!-- 太字（重要な語句に使う） -->
<strong>重要なテキスト</strong>

<!-- 斜体（強調したいときに使う） -->
<em>強調したいテキスト</em>

ブロックとインライン：div・span

意味を持たない汎用的なタグです。CSSでスタイルを当てたいときに使います。

<!-- div：ブロック要素（改行される・範囲をまとめるのに使う） -->
<div>ここにコンテンツ</div>

<!-- span：インライン要素（改行されない・文章の一部に使う） -->
<p>テキストの<span>一部だけ</span>に色をつける</p>

span {
  color: #ff4d6d;
}

テーブル：table・tr・th・td

表を作るタグです。

<table>
  <tr>               <!-- tr：行 -->
    <th>名前</th>    <!-- th：見出しセル -->
    <th>年齢</th>
  </tr>
  <tr>
    <td>くじらいど</td>  <!-- td：データセル -->
    <td>30代</td>
  </tr>
</table>

まとめ：よく使うタグ早見表

タグ	役割
`h1〜h6`	見出し（数字が小さいほど大きい）
`p`	段落・本文テキスト
`br`	改行
`a`	リンク
`img`	画像
`ul / ol / li`	箇条書き・番号付きリスト
`strong`	太字（重要な語句）
`em`	斜体（強調）
`div`	ブロック要素のまとまり
`span`	インライン要素のまとまり
`table / tr / th / td`	表