HTMLタグの種類をやさしく解説｜初心者でもわかる用途別まとめ

ホームページを作るときに必ず使うHTML（エイチティーエムエル）。その中でも中心になるのがタグです。

でも、

「HTMLタグって種類が多すぎて覚えられない…」
「どのタグをいつ使えばいいの？」

と悩む人は多いです。

そこでこの記事では、よく使うHTMLタグの種類を用途別にわかりやすく紹介します。

これを読めば、タグの使いどころがイメージできるようになり、ホームページ作りがもっとスムーズになりますよ。

HTMLタグとは？
HTMLタグの種類は大きく分けて6つ
文書構造を定義するタグ
セクション・レイアウト関連のタグ
テキスト関連のタグ
リンク・メディア関連のタグ
リスト・表関連のタグ
フォーム（入力欄）関連のタグ
よく使う属性一覧
1. 全てのタグで使える属性
2. アクセシビリティ関連の属性
タグの使い分けのコツ
HTML5で追加された新しいタグ
1. 新しいセマンティックタグ
2. 新しい入力タイプ
おわりに

HTMLタグとは？

タグの基本的な書き方

HTMLタグは< >で囲まれた命令文です：

<タグ名>内容</タグ名>

例えば：

<h1>見出しです</h1>
<p>段落の文章です</p>

開始タグと終了タグ

多くのタグは開始タグと終了タグがセットになっています：

種類	書き方	例
開始タグ	`<タグ名>`	`<h1>`
終了タグ	`</タグ名>`	`</h1>`
空要素タグ	`<タグ名>`	`<br>`, `<img>`

属性の指定

タグには属性を付けて、より詳細な指定ができます：

<a href="https://example.com" target="_blank">リンク</a>
<img src="image.jpg" alt="画像の説明">

HTMLタグの種類は大きく分けて6つ

HTMLタグにはたくさん種類がありますが、用途ごとに分けると理解しやすいです：

文書構造を定義するタグ
セクション・レイアウト関連のタグ
テキスト関連のタグ
リンク・メディア関連のタグ
リスト・表関連のタグ
フォーム関連のタグ

この6つのグループに分けて代表的なタグを紹介します。

文書構造を定義するタグ

基本的な文書構造

タグ名	用途	必須度
`<!DOCTYPE html>`	HTML5文書宣言	必須
`<html>`	HTML文書の始まりと終わり	必須
`<head>`	メタ情報を記載	必須
`<body>`	実際にブラウザに表示される内容	必須

headタグ内で使うタグ

タグ名	用途	例
`<title>`	ページタイトル	`<title>サイト名</title>`
`<meta>`	文字コードや説明文	`<meta charset="UTF-8">`
`<link>`	外部ファイルの読み込み	`<link rel="stylesheet" href="style.css">`
`<script>`	JavaScriptの読み込み	`<script src="script.js"></script>`

基本的なHTML文書の例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページタイトル</title>
  <meta name="description" content="ページの説明文">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>メインタイトル</h1>
  <p>ページの内容</p>
</body>
</html>

セクション・レイアウト関連のタグ

意味的な構造を作るタグ

タグ名	用途	例
`<header>`	ページやセクションのヘッダー	ナビゲーション、ロゴ
`<nav>`	ナビゲーションメニュー	メインメニュー
`<main>`	ページの主要コンテンツ	記事本文
`<section>`	セクション（章・節）	内容のまとまり
`<article>`	独立したコンテンツ	ブログ記事、ニュース
`<aside>`	補足情報	サイドバー
`<footer>`	ページやセクションのフッター	コピーライト、リンク

汎用的なレイアウトタグ

タグ名	用途	特徴
`<div>`	ブロックレベルの汎用領域	縦に並ぶ
`<span>`	インラインの汎用領域	横に並ぶ

実践的なレイアウト例

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>サイト例</title>
</head>
<body>
  <header>
    <h1>サイトタイトル</h1>
    <nav>
      <ul>
        <li><a href="#home">ホーム</a></li>
        <li><a href="#about">会社概要</a></li>
        <li><a href="#contact">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="home">
      <h2>ホームページです</h2>
      <article>
        <h3>お知らせ</h3>
        <p>新商品を発売しました。</p>
      </article>
    </section>

    <aside>
      <h3>関連リンク</h3>
      <p>その他の情報</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2024 サイト名</p>
  </footer>
</body>
</html>

テキスト関連のタグ

見出しタグ

タグ名	用途	重要度
`<h1>`	最も重要な見出し	最高
`<h2>`	大見出し	高
`<h3>`	中見出し	中
`<h4>`	小見出し	低
`<h5>`	より小さい見出し	最低
`<h6>`	最も小さい見出し	最低

段落・改行タグ

タグ名	用途	特徴
`<p>`	段落	前後に余白が入る
`<br>`	改行	強制的な改行
`<hr>`	水平線	セクションの区切り

テキスト装飾・強調タグ

タグ名	見た目	意味	使用場面
`<strong>`	太字	重要性を示す	重要なキーワード
`<em>`	斜体	強調を示す	感情的な強調
`<b>`	太字	見た目のみ	キーワードの目立たせ
`<i>`	斜体	見た目のみ	専門用語、外国語
`<u>`	<u>下線</u>	見た目のみ	注釈
`<s>`	~~取り消し線~~	削除された内容	価格の変更前
`<mark>`	ハイライト	マーカーで塗った効果	検索結果
`<small>`	小さい文字	補足情報	著作権表示

特殊なテキストタグ

タグ名	用途	例
`<code>`	プログラムコード	`<code>console.log()</code>`
`<pre>`	整形済みテキスト	コードブロック、ASCII アート
`<blockquote>`	引用ブロック	長い引用文
`<q>`	インライン引用	短い引用文
`<cite>`	作品のタイトル	書籍名、映画名
`<abbr>`	略語	`<abbr title="HyperText Markup Language">HTML</abbr>`

テキストタグの使用例

<article>
  <h1>HTMLの基礎</h1>
  
  <p>
    <strong>HTML</strong>は<em>とても重要</em>なマークアップ言語です。
    <abbr title="HyperText Markup Language">HTML</abbr>を学ぶことで、
    ウェブページを作ることができます。
  </p>
  
  <blockquote>
    <p>「HTMLは簡単で強力な言語である」</p>
    <cite>— ウェブ開発の専門書より</cite>
  </blockquote>
  
  <p>
    例えば、<code>&lt;p&gt;</code>タグを使うと段落を作れます。
  </p>
  
  <pre><code>&lt;p&gt;これは段落です&lt;/p&gt;</code></pre>
  
  <p><small>※この情報は2024年12月時点のものです</small></p>
</article>

リンク・メディア関連のタグ

リンクタグ

タグ名	用途	主な属性
`<a>`	ハイパーリンク	`href`, `target`, `rel`

メディアタグ

タグ名	用途	主な属性
`<img>`	画像を表示	`src`, `alt`, `width`, `height`
`<video>`	動画を埋め込み	`src`, `controls`, `autoplay`
`<audio>`	音声を埋め込み	`src`, `controls`, `loop`
`<iframe>`	他のページを埋め込み	`src`, `width`, `height`

実用的なメディア例

<!-- 基本的なリンク -->
<a href="https://example.com">外部サイト</a>
<a href="#section1">ページ内リンク</a>
<a href="mailto:info@example.com">メール送信</a>
<a href="tel:03-1234-5678">電話をかける</a>

<!-- 画像（レスポンシブ対応） -->
<img src="image.jpg" alt="商品写真" width="300" height="200">

<!-- 動画（複数フォーマット対応） -->
<video controls width="640" height="360">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <p>お使いのブラウザは動画に対応していません。</p>
</video>

<!-- 音声 -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <p>お使いのブラウザは音声に対応していません。</p>
</audio>

<!-- YouTube埋め込み -->
<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  title="YouTube video player"
  frameborder="0" 
  allowfullscreen>
</iframe>

リスト・表関連のタグ

リスト（箇条書き）タグ

タグ名	用途	表示
`<ul>`	順序なしリスト	● で表示
`<ol>`	順序ありリスト	1.2.3 で表示
`<li>`	リストの項目	リストの各項目
`<dl>`	定義リスト	用語と説明のペア
`<dt>`	定義する用語	用語名
`<dd>`	用語の説明	説明文

表（テーブル）タグ

タグ名	用途	必須
`<table>`	表全体	○
`<thead>`	表のヘッダー部分	–
`<tbody>`	表のボディ部分	–
`<tfoot>`	表のフッター部分	–
`<tr>`	行	○
`<th>`	見出しセル（太字）	–
`<td>`	データセル	○
`<caption>`	表のタイトル	–

リスト・表の実用例

<!-- 順序なしリスト -->
<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>ばなな</li>
</ul>

<!-- 順序ありリスト -->
<ol>
  <li>手を洗う</li>
  <li>材料を準備する</li>
  <li>調理する</li>
</ol>

<!-- 定義リスト -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Languageの略称</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheetsの略称</dd>
</dl>

<!-- 詳細な表 -->
<table>
  <caption>商品価格表</caption>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>在庫</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ノート</td>
      <td>100円</td>
      <td>50個</td>
    </tr>
    <tr>
      <td>ペン</td>
      <td>80円</td>
      <td>30個</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合計</td>
      <td colspan="2">2品目</td>
    </tr>
  </tfoot>
</table>

フォーム（入力欄）関連のタグ

基本的なフォームタグ

タグ名	用途	主な属性
`<form>`	フォーム全体	`action`, `method`
`<input>`	入力欄	`type`, `name`, `value`
`<textarea>`	複数行の入力欄	`rows`, `cols`
`<button>`	ボタン	`type`
`<label>`	入力項目のラベル	`for`
`<select>`	プルダウンメニュー	`name`
`<option>`	セレクトの項目	`value`
`<fieldset>`	フォーム項目のグループ化	–
`<legend>`	fieldsetのタイトル	–

inputタグのtype属性

type	用途	例
`text`	一行テキスト	名前入力
`email`	メールアドレス	お問い合わせ
`password`	パスワード	ログイン
`number`	数値	年齢、個数
`tel`	電話番号	連絡先
`url`	URL	ウェブサイト
`date`	日付	生年月日
`time`	時刻	予約時間
`checkbox`	チェックボックス	複数選択
`radio`	ラジオボタン	単一選択
`file`	ファイル選択	画像アップロード
`submit`	送信ボタン	フォーム送信
`reset`	リセットボタン	入力内容をクリア

実用的なフォーム例

<form action="/submit" method="post">
  <fieldset>
    <legend>お問い合わせフォーム</legend>
    
    <!-- 名前 -->
    <label for="name">お名前（必須）:</label>
    <input type="text" id="name" name="name" required>
    
    <!-- メールアドレス -->
    <label for="email">メールアドレス（必須）:</label>
    <input type="email" id="email" name="email" required>
    
    <!-- 電話番号 -->
    <label for="tel">電話番号:</label>
    <input type="tel" id="tel" name="tel">
    
    <!-- 年齢 -->
    <label for="age">年齢:</label>
    <input type="number" id="age" name="age" min="0" max="120">
    
    <!-- 性別 -->
    <fieldset>
      <legend>性別:</legend>
      <input type="radio" id="male" name="gender" value="male">
      <label for="male">男性</label>
      
      <input type="radio" id="female" name="gender" value="female">
      <label for="female">女性</label>
      
      <input type="radio" id="other" name="gender" value="other">
      <label for="other">その他</label>
    </fieldset>
    
    <!-- 興味のある分野 -->
    <fieldset>
      <legend>興味のある分野:</legend>
      <input type="checkbox" id="web" name="interests" value="web">
      <label for="web">ウェブ開発</label>
      
      <input type="checkbox" id="design" name="interests" value="design">
      <label for="design">デザイン</label>
      
      <input type="checkbox" id="marketing" name="interests" value="marketing">
      <label for="marketing">マーケティング</label>
    </fieldset>
    
    <!-- 住んでいる地域 -->
    <label for="region">住んでいる地域:</label>
    <select id="region" name="region">
      <option value="">選択してください</option>
      <option value="hokkaido">北海道</option>
      <option value="tohoku">東北</option>
      <option value="kanto">関東</option>
      <option value="chubu">中部</option>
      <option value="kansai">関西</option>
      <option value="chugoku">中国</option>
      <option value="shikoku">四国</option>
      <option value="kyushu">九州</option>
    </select>
    
    <!-- メッセージ -->
    <label for="message">メッセージ:</label>
    <textarea id="message" name="message" rows="5" cols="50" placeholder="ご質問やご要望をお書きください"></textarea>
    
    <!-- ファイル添付 -->
    <label for="attachment">ファイル添付:</label>
    <input type="file" id="attachment" name="attachment" accept=".jpg,.png,.pdf">
    
    <!-- 送信ボタン -->
    <button type="submit">送信する</button>
    <button type="reset">リセット</button>
  </fieldset>
</form>

よく使う属性一覧

全てのタグで使える属性

属性	用途	例
`id`	要素の一意識別子	`id="header"`
`class`	CSSクラス名	`class="btn primary"`
`style`	インラインCSS	`style="color: red;"`
`title`	ツールチップ表示	`title="説明文"`
`lang`	言語指定	`lang="ja"`

アクセシビリティ関連の属性

属性	用途	例
`alt`	画像の代替テキスト	`alt="商品写真"`
`aria-label`	要素の説明	`aria-label="メニューを開く"`
`role`	要素の役割	`role="button"`
`tabindex`	タブキーの順序	`tabindex="1"`

タグの使い分けのコツ

意味を重視する（セマンティック HTML）

悪い例

<div>見出し</div>
<div>段落の文章</div>
<div onclick="submit()">送信</div>

良い例

<h1>見出し</h1>
<p>段落の文章</p>
<button onclick="submit()">送信</button>

適切な見出しレベルの使用

悪い例

<h1>サイトタイトル</h1>
<h3>記事タイトル</h3> <!-- h2を飛ばしている -->
<h1>別の記事</h1>     <!-- h1を複数使用 -->

良い例

<h1>サイトタイトル</h1>
<h2>記事タイトル</h2>
<h3>記事の小見出し</h3>
<h2>別の記事タイトル</h2>

フォームでのラベル関連付け

悪い例

名前: <input type="text" name="name">

良い例

<label for="name">名前:</label>
<input type="text" id="name" name="name">

HTML5で追加された新しいタグ

新しいセマンティックタグ

タグ名	用途	HTML5以前
`<header>`	ヘッダー	`<div id="header">`
`<nav>`	ナビゲーション	`<div id="nav">`
`<main>`	メインコンテンツ	`<div id="main">`
`<section>`	セクション	`<div class="section">`
`<article>`	記事	`<div class="article">`
`<aside>`	サイドバー	`<div id="sidebar">`
`<footer>`	フッター	`<div id="footer">`

新しい入力タイプ

type	説明	対応ブラウザでの表示
`email`	メールアドレス	キーボードに@マーク
`tel`	電話番号	数字キーパッド
`url`	URL	.comボタン
`search`	検索ボックス	検索アイコン
`range`	スライダー	スライダー形式
`color`	色選択	カラーピッカー