【初心者向け】HTMLタグ一覧！80タグの用途を解説（コピペOKサンプルコード付き）

HTMLのタグは100種類以上ありますが、よく使われるタグに絞って使い方を少しずつ覚えていけば大丈夫です。

この記事では80種類のHTMLタグを紹介し、中でもよく使うタグについては重点的に使い方を解説していきます。コピペして使えるサンプルコードも豊富に用意しているので、うまく活用してWeb制作を効率的に進めましょう。

この記事で身につく内容

• よく使われるHTMLタグの種類が理解できる
• HTMLタグの正しい使い方がわかる
• サンプルコードを活用してコーディングをスピードアップできる

---

無料で30日間、Web制作が学べる『ZeroPlus Gate』
プログラミングに関する質問をエンジニアへ「し放題」のサービス！

• Web制作に特化したカリキュラム
• 自分のペースで50本以上の動画教材で学べる
• あなた専属のメンターと作る、あなただけの学習ロードマップ
• 30日間、回数無制限でエンジニアに質問可

公式サイトを見る

ZeroPlus Gateの評判・口コミを徹底調査！無料の理由を運営が解説

---

タグはHTMLの構造を検索エンジンに伝える目印

Webページを構成するテキスト・画像などは「要素」と呼ばれ、HTMLを使って書かれています。「タグ」の役割は、Webページがどのような構造をしているか、検索エンジンに伝える目印です。

たとえば一言にテキストと言っても、見出しや本文など役割は異なる場合があります。人間は見た目でテキストの役割の違いを判別できますが、検索エンジンは視覚で役割の違いを理解できません。

そのため見出しを表す「hタグ」や、段落を表す「pタグ」などを使い分け、テキストの役割を伝える必要があるのです。タグの使い方は以下をご覧ください。

<h2>HTMLタグとは？</h2>
<p>HTMLタグとは、HTMLの構造をブラウザや検索エンジンに伝える目印です</p>

上記のように「<>（開始タグ）」と「</>（終了タグ）」で、対象となる要素を挟んで記述します。タグには様々な種類があるため、次から用途や役割を確認していきましょう。

テキストコンテンツに使用するタグ

h1〜h6タグ｜見出しを作成する際に使用するタグ

「h」とは「heading（ヘディング）」の略で、見出しを作成する際に使用します。<h1>が大見出しで1番大きく、サイトのメインとなる見出しに使われます。<h2>〜<h6>となるにつれ、小さな見出しになっていきます。

かめるん先生

h1タグは、よくtopページのロゴや、下層ページのページ名が記載されているところに使いますね！

pタグ｜テキストの段落を作成する際に使用するタグ

「p」とは「paragraph（パラグラフ）」の略で、テキストの段落を作成する際に使用します。pタグで囲ったテキストの前後に1行の改行が生まれますが、改行の目的で使用することはありません。文章中に改行する場合はbrタグを使用します。

brタグ｜テキスト内で改行したいときに使用するタグ

「br」は「break（ブレイク）」の略で、文章内で意図的に改行したいときに使用します。

pタグは段落単位で改行されますが、同じ段落内で改行したいときにbrタグを使います。

【コピペOK】テキストコンテンツ｜サンプルコード

<h1>HTMLタグ一覧の使い方</h1>
<h2>見出しの階層</h2>
<p>大見出しは h1、章は h2、小見出しは h3</p 

<h2>段落（p）</h2>
<p>内容のまとまりごとにpタグ。余白はCSSで調整。</p>

<h2>改行（br）</h2>
<p>同じ段落内の行分けだけに使う<br>段落を増やすときはpを追加。</p>

<h3>例：お問い合わせ先</h3>
<p>
ZeroPlus サポート窓口<br>
東京都〇〇区〇〇 1-2-3<br>
平日 10:00–18:00
</p> 

自己流のコーディングでは、泣きを見る。
"たった"の30日で正しいスキルを身につけよう。

『ZeroPlus Gate』のサービス内容を見てみる

現役エンジニアに質問し放題、疑問を残さず解決。

画像・メディアに使用するタグ

<img src="logo.jpg" alt="ZeroPlusのロゴ" />

かめるん先生

imgタグはdivタグで囲っておくと便利です！

 

videoタグ｜動画を埋め込む際に使用するタグ

videoタグは、Webページ上に動画を埋め込み再生させる際に使用します。src属性で動画ファイルを指定し、controls属性を付けると再生ボタンなどの操作パネルが表示されます。

<video src="sample.mp4" controls></video>

 

audioタグ｜音声を再生させる際に使用するタグ

audioタグは、Webページで音声ファイル（BGMやナレーションなど）を再生させたい場合に使用します。videoタグと同様に、controls属性で再生コントロールを表示させることができます。

<audio src="sound.mp3" controls></audio>

リストを作る際に使用するタグ

ulタグ

「ul」とは「unordered list（アンオーダードリスト）」の略で、順序のないリストを表示する際に使用します。type属性を指定することで、先頭の「・」を変更することができます。

かめるん先生

ulタグには直下におけるタグが決まっているので注意しましょう！

olタグ

「ol」とは「ordered list（オーダードリスト）」の略で、順序のあるリストを表示する際に使用します。type属性を指定することで、先頭につく記号の種類を変更できます。

liタグ

「li」とは「list item（リストアイテム）」の略で、リストの各項目を記述する際に使用します。ulタグもしくはolタグの入れ子として使用します。

【コピペOK】リスト｜サンプルコード

<ul>
  <li>HTML/CSS</li>
  <li>JavaScript</li>
  <li>Design</li>
  <li>WordPress</li>
</ul>

<ol>
  <li>HTML/CSS</li>
  <li>JavaScript</li>
  <li>Design</li>
  <li>WordPress</li>
</ol>

構造化のためのタグ

aタグ｜リンクを埋め込む際に使用するタグ

「a」とは「anchor（アンカー）」の略で、リンクを埋め込む際に使用します。画像も含めて囲むことができます。

href属性の中にURLを書き、リンク先の指定をします。target属性に書かれている_blankは、リンク先のドキュメントを新しいタブやウィンドウで開くための指定です。

aタグで囲んだ部分すべてがリンクとして判定されるようになります。

<a href="https://zero-plus.io" target="_blank">ZeroPlus</a>

divタグ｜複数の要素をグループ化する際に使用するタグ

「div」とは、「division（ディビジョン）」の略で、特別な意味はなく、要素をグループ化する際に使用します。

<div class="feature">
  <h2>機能</h2>
  <p>説明テキスト。</p>
</div>

divタグはブロック要素としてグループ化を行うので、下に積まれていきます。

spanタグ｜インライン要素としてテキストの一部をグループ化する際に使用するタグ

spanタグは、divタグと同様に特別な意味はなく、要素をグループ化する際に使用します。テキストの一部分だけにクラスを当てたいときに使われます。

<p><span class="price">¥9,800</span>（税込）</p>

ただし、spanタグはインライン要素としてグループ化されるため、下に積まれずに横に並びます。

sectionタグ｜文書の章や節目、区間であることを表現する際に使用するタグ

「section」には「節」や「章」という意味があり、見出しを伴う文書の章や節目、区間であることを表現する際に使用します。sectionタグ内には、見出し要素（h1〜h6）を含む必要があります。

<section>
  <h2>ZeroPlusの特徴</h2>
  <p>ZeroPlusで6ヶ月学習すれば確実にエンジニアへの1歩を踏み出せます。</p>
</section>

articleタグ｜サイト内で独立しており、意味が完結しているコンテンツに使用するタグ

「article」には「記事」や「論説」という意味があり、サイト内で独立したコンテンツを囲む際に使用します。articleタグ内に、見出し要素（h1〜h6）を含む必要があります。

<article>
  <h2>プログラミング学習のモチベーション維持に大事な8つのこと</h2>
  <p>重要なのは、「自分がなぜプログラミングを学んでいるのか」という目的をはっきりさせることです。</p>
</article>

headerタグ｜サイトのヘッダー部分を示す際に使用するタグ

headerタグは、サイトのヘッダー部分を構造化する際に使用します。

<header>
  <h1>サイト名</h1>
    <nav>
    <ul>
      <li><a href="/about">概要</a></li>
      <li><a href="/service">サービス</a></li>
      <li><a href="/contact">お問い合わせ</a></li>
      <li><a href="https://example.com" target="_blank" rel="noopener">外部</a></li>
    </ul>
    </nav>
</header>

上記のようにサイトのタイトルやナビゲーションメニューなどを囲います。

navタグ｜サイトのナビゲーション部分を示す際に使用するタグ

「nav」とは「navigation（ナビゲーション）」の略で、サイトのメニュー部分を示す際に使用します。navタグの中には、ul、liタグなどを用いてメニューを作ります。

<nav>
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#feature">Feature</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

footerタグ｜Webサイトのフッター部分を作成する際に使用するタグ

footerタグは、Webサイトの末尾・最後のフッター部分を示す際に使用します。

<footer>
  <small>&copy; 2025 Example Inc.</small>
</footer>

フッターにはサイトに関する情報や、著作権に関する表記、連絡先などを記載します。 

かめるん先生

smallは「注釈著作権」などサイドコメント用のタグです！

©と書くと、文字化けさせずに©を表示できます。

mainタグ｜ページ内で一番伝えたいことや重要箇所を示す際に使用するタグ

mainタグは、ページ内で1番伝えたいこと・重要な部分を示す際に使用します。mainタグの中には、articleタグやdivタグなどを用いてページの主となるコンテンツを構造化します。

asideタグ｜ページの補足的な情報を示す際に使用するタグ

asideタグは、正確には余談要素といい、ページの補足的な情報を示す際に使用します。

かめるん先生

サイトのサイドバー部分を構造化する際によく使います！

【コピペOK】Webサイトの基本構造｜サンプルコード

<header>
  <h1>サイト名</h1>  
  <nav>
    <ul>
        <li><a href="/about">概要</a></li>
        <li><a href="/service">サービス</a></li>
        <li><a href="/contact">お問い合わせ</a></li>
        <li><a href="https://example.com" target="_blank" rel="noopener">外部</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h2>製品情報</h2>
    <div class="feature">
      <h3>特徴</h3>
      <p>価格：<span class="price">¥9,800</span></p>
    </div>
  </section>
  <article>
    <h2>お知らせ</h2>
    <p>10/30 02:00–04:00 メンテナンス。</p>
  </article>
  <aside>
    <h2>関連</h2>
    <ul><li><a href="/faq">FAQ</a></li><li><a href="/manual">マニュアル</a></li></ul>
  </aside>
</main>
<footer>
  <p><small>&copy; 2025 Example Inc.</small></p>
</footer>

表を作成する際に使用するタグ

tableタグ

tableタグは表を作成する際に使用し、trタグ、thタグ、tdタグと併せて使用します。

かめるん先生

tableタグもulタグと同様に、直下に使えるタグが限られていますので、注意しましょう！

trタグ

「tr」は「table row（テーブルロー）」の略で、表のなかの行を作成する際に使用します。trタグを使用した分だけ、行の数が追加されていきます。

thタグ

「table header（テーブルヘッダー）」の略で、表のなかの見出しのセルとして使用します。

 tdタグ

「td」は「table data（テーブルデータ）」の略で、表のなかの見出し（th）に対するデータのセルとして使用します。

<table>
  <tr>
    <th>氏名</th>
    <td>山田 太郎</td>
  </tr>
  <tr>
    <th>年齢</th>
    <td>25歳</td>
  </tr>
</table>

フォームを作る際に使用するタグ

formタグ｜フォーム全体を囲むためのタグ

formタグは、ユーザーからの入力をサーバーに送信するためのフォーム全体を囲むタグです。action属性に送信先、method属性に送信方法（POSTやGET）を指定します。

<form action="/submit" method="post">
  <input type="text" name="username">
</form>

inputタグ｜ユーザーからデータを入力してもらうためのタグ

inputタグは、テキスト入力やチェックボックスなど、さまざまな形式の入力欄を作るタグです。type属性を変更することで、入力内容の種類を指定できます（text、email、checkbox、submitなど）。

<input type="text" name="username">

labelタグ｜フォームの入力欄に説明文を付けるためのタグ

labelタグは、inputタグなどの入力欄にラベル（説明）を付けるときに使用します。for属性にIDを指定すると、対応する入力欄と関連づけられます。

<label for="username">ユーザー名：</label>
<input type="text" id="username" name="username">

textareaタグ｜複数行の入力欄を作成するためのタグ

textareaタグは、長文や複数行のコメントなどを入力できるテキストボックスを作成するタグです。行数はrows属性、横幅はcols属性で調整できます。

<textarea id="comment" name="comment" rows="4" cols="40"></textarea>

buttonタグ｜クリックして送信や処理を実行するためのボタンを作成するタグ

buttonタグは、クリックして送信したり、JavaScriptの処理を実行するボタンを作るためのタグです。type属性に「submit」や「button」などを指定します。

【コピペOK】フォーム｜サンプルコード

<form action="#" method="post">
  <label for="name">お名前：</label><br>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">メールアドレス：</label><br>
  <input type="email" id="email" name="email"><br><br>
  <label for="comment">コメント：</label><br>
  <textarea id="comment" name="comment" rows="4" cols="40"></textarea><br><br>
  <button type="submit">送信</button>
</form>

ページの構造を作るタグ

DOCTYPE宣言｜このファイルはHTMLファイルですと宣言するためのタグ

DOCTYPE（ドックタイプ）宣言は、「このファイルはHTMLファイルです」と宣言するために記述します。タグとして紹介されることもありますが、正確にはタグではありません。

HTMLファイルでは最初に書きます。現在のところ最新バージョンであるHTML5では、以下のように記述する決まりです。

<!DOCTYPE html>

この宣言をファイルの冒頭に書くことで、ブラウザにHTML5としてファイルを処理するように指示できます。

htmlタグ｜HTMLファイルの範囲を示すために使用するタグ

htmlタグは、「このHTMLファイルの内容はここからここまでです」と示すために使用するタグです。htmlタグの内部は「head」と「body」の2つのセクションに分かれます。

<html>
  <head>
  </head>
  <body>
  </body>
</html>

headタグ｜Webサイトの内部情報を記述するためのタグ

headタグはWebサイトの内部情報を記述するためのタグです。headタグの中にはページの見た目に直接影響しないメタデータや、外部ファイルのリンクなどを記述します。

<head>
  <!-- ページ全体の文字コード（日本語を正しく表示） -->
  <meta charset="UTF-8">
  <!-- スマホやタブレットでも見やすく表示する設定 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- ページタイトル（ブラウザのタブや検索結果に表示される） -->
  <title>初心者向けHTMLガイド</title>
  <!-- ページの説明文（検索結果などに表示されることがあります） -->
  <meta name="description" content="HTML初心者のための基礎解説サイトです。HTMLの書き方やタグの使い方を丁寧に紹介しています。">
  <!-- スマホで電話番号が自動リンクになるのを防ぐ設定 -->
  <meta name="format-detection" content="telephone=no">
  <!-- ファビコン（ブラウザのタブやお気に入りに表示されるアイコン） -->
  <link rel="icon" href="favicon.png" type="image/png">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="webclip.png">
  <!-- CSSファイルの読み込み（上から順に適用されます） -->
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>

headタグの中に書かれている内容は、基本的にWebサイトの見た目には直接反映されません。しかしWebサイトを設計するうえで重要な役割を果たしています。次から紹介するtitleタグ、metaタグ、linkタグはすべてheadタグの中に記述するタグです。

headerセクションを作る際に使用する、headerタグと混同しやすいため区別して覚えましょう。

titleタグ｜サイトのタイトルを指定するためのタグ

titleタグはサイトのタイトルを指定するためのタグです。このタグで指定されたタイトルは、ブラウザのタブや検索結果に表示されます。

titleタグに書かれた内容は、検索エンジンのランキングへの影響も大きく、SEOの観点からも重要なタグです。

linkタグ｜外部リソースとの関連を指定するためのタグ

linkタグは、外部リソースとの連携を指定するためのタグです。主に外部のCSSファイルやWebサイトのアイコン（ファビコンといいます）をHTMLファイルにリンクさせる際に使用されます。

<head>
　 <link rel="stylesheet" href="styles.css"> <!-- 外部CSSファイルをリンク -->
　 <link rel="icon" href="favicon.ico"> <!-- ファビコンを指定-->
</head>

このタグを使ってCSSを適用させたり、ブラウザにファビコンを表示させたりできます。

metaタグ｜Webページに関する追加情報（メタデータ）を記述するためのタグ

metaタグは、Webページに関する追加情報（メタデータ）を記述するためのタグです。

文字エンコードの指定やページの説明文、モバイル端末向けの表示設定など、metaタグの内部にはサイトにとって重要な情報を記載します。

<head>
  <meta charset="UTF-8"> <!-- 文字エンコードの指定（文字化けの予防）-->
  <meta name="description" content="このページはHTML初心者向けのガイドです"> <!-- ページの説明文を検索結果へ反映させる -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- スマホやタブレットでサイトを適切に表示させる -->
</head>

bodyタグ｜Webページの見た目の部分を記述するためのタグ

bodyタグは、Webページの見た目の部分を記述するセクションを示すタグです。

画像やテキストなど、ページに表示される要素はbodyタグの中に記述します。

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML入門ページ</title>
</head>
<body>
  <header><h1>HTML入門</h1></header>
  <main>
    <section>
      <h2>概要</h2>
      <p>HTMLはWebページの骨組みを作る言語です。</p>
    </section>
  </main>
  <footer><p><small>&copy; 2025 Example Inc.</small></p></footer>
</body>
</html>

まとめ

この記事では、よく使われるhtmlタグを一覧にして紹介しました。

htmlタグは、Webページがどのような構造をしているか、検索エンジンに伝える目印の役割を果たします。正しく使いこなせば「SEOで評価されやすいサイト」を構築できるため、案件に取り組むうえではタグの知識が必要です。

それぞれのタグが明確に意味を持っていますが、一度に全てを暗記する必要はありません。サイトを何度も作る過程で自然と身についていくものです。使い方を忘れてしまったら、この記事に戻って確認しましょう。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー