あなたに合った学習プランは？LINE適正コース診断はこちら プログラミングが全て無料で学習可能！
HTMLタグ一覧【2025年最新】コピペで使える目的別リファレンス - 忍者CODEマガジン

HTMLタグ一覧【2025年最新】コピペで使える目的別リファレンス

プログラミング言語の辞書

Webサイトの作成に欠かせないHTML。その根幹をなすのが「HTMLタグ」です。本記事では、Web制作の初心者向けに、よく使うHTMLタグを目的別に一覧で分かりやすく解説します。
基本的な書き方から、テキスト、画像、テーブル、フォームまで、コピペですぐに使えるサンプルコード付き。この記事を読むだけで、HTMLの主要なタグとその役割を効率的に学習できます。

忍者CODEマガジンとは？

忍者CODEマガジンは、未経験からでもプロのエンジニアを目指せるプログラミングスクール「忍者CODE」が運営しているプログラミング情報サイトです。

  • プログラミングの効果的な学習方法
  • プログラミング用語の解説
  • エンジニアのキャリアに関する情報

など、プログラミングを始めたばかりの初学者に役立つ記事を幅広く公開しています！

HTMLタグとは？基本の書き方とルール

HTMLタグは、Webページ上のテキストや画像などのコンテンツに「意味」を与えるための目印です。例えば、「これは見出しです」「これは段落です」といった情報をブラウザや検索エンジンに伝えます。

タグの基本構造

ほとんどのHTMLタグは、開始タグと終了タグでコンテンツを囲みます。
<p>ここにテキストが入ります。</p>

  • 開始タグ：<p>
  • 終了タグ：</p>

コンテンツ：ここにテキストが入ります。

オススメ：HTMLが無料で学べる初学者のための入門講座はこちら

「要素」と「属性」の違い

タグで囲まれた全体を「要素」と呼びます。また、開始タグには「属性」を追加して、要素にさらなる情報を付与できます。
<a href="https://ninjacode.work/">忍者CODE</a>

  • 要素：<a href="https://ninjacode.work/">忍者CODE</a>全体
  • 属性：href="https://ninjacode.work/"（リンク先のURLを指定）

ブロックレベルとインライン

HTML要素は、表示のされ方によって「ブロックレベル要素」と「インライン要素」の2種類に大別されます。
ブロックレベル要素

  • 見出し(<h1>など)や段落(<p>)のように、一つのまとまりとして扱われる要素。
  • 前後に改行が入り、横幅いっぱいに広がります。

インライン要素

  • 文章の一部として扱われる要素。
  • <a>タグや<strong>タグのように、改行されずに文中に表示されます。

【目的別】よく使うHTMLタグ一覧

サイトの基本構造

Webサイト全体の骨格を定義するタグです。すべてのHTMLページの基礎となります。

  • <!DOCTYPE html>
    HTML5形式の文書であることを宣言します。
  • <html>
    HTML文書全体のルート要素です。
  • <head>
    ページのタイトルや文字コードなど、文書のヘッダー情報を格納します。
  • <body>
    実際にブラウザに表示されるコンテンツを記述します。
  • <title>
    Webページのタイトルを指定します。ブラウザのタブに表示されます。
  • <meta>
    文字コードやページの概要など、メタデータを指定します。
  • <link>
    CSSファイルなどの外部リソースを読み込みます。

サンプルコード（コピペ用）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ここにコンテンツが入ります -->
</body>
</html>

テキスト関連

文章の構造や意味を定義するためのタグです。見出しや段落、強調したい文字などに使います。

    • <h1>～<h6>
      見出しを作成します。<h1>が最も重要で、数字が大きくなるほど重要度が下がります。
    • <p>
      段落を作成します。
    • <strong>
      テキストの重要性を示します。太字で表示されることが多いです。
    • <em>
      テキストを強調します。斜体で表示されることが多いです。
    • <br>
      改行します。
    • <hr>
      水平線（区切り線）を引きます。

サンプルコード（コピペ用）

<h1>h1見出し</h1>
<h2>h2見出し</h2>
<p>これは段落です。文章の中で<strong>特に重要な部分</strong>を強調します。</p>
<p>改行したい場合は<br>brタグを使います。</p>
<hr>

画像とメディア

Webページに画像や動画、音声などのメディアを埋め込むためのタグです。

      • <img>
        画像を表示します。
        src属性で画像のパスを、alt属性で代替テキストを指定します。ます。
      • <video>
        動画を埋め込みます。
      • <audio>
        音声を埋め込みます。

    サンプルコード（コピペ用）

    <!-- 画像の表示 -->
<img src="image.jpg" alt="画像の説明">

<!-- 動画の表示 -->
<video src="movie.mp4" controls></video>

<!-- 音声の再生 -->
<audio src="sound.mp3" controls></audio>

    リンク

    他のページや、ページ内の特定の部分へ移動するためのハイパーリンクを作成します。

    • <a>
      リンクを作成します。href属性でリンク先のURLを指定します。

    サンプルコード（コピペ用）

    <!-- 外部サイトへのリンク -->
<a href="https://ninjacode.work/">忍者CODE公式サイトへ</a>

<!-- 同じサイト内の別ページへのリンク -->
<a href="/service/">サービスページへ</a>

<!-- ページ内リンク -->
<a href="#section1">セクション1へ移動</a>

    リスト

    項目を箇条書きで表示するためのタグです。

      • <ul>
        順序のないリストを作成します。
      • <ol>
        順序のあるリスト（番号付きリスト）を作成します。
      • <li>
        各リストの項目を作成します。
      • <dl>
        説明リストを作成します。
      • <dt>
        説明リストの用語を定義します。
      • <dd>
        用語の説明を記述します。

    サンプルコード（コピペ用）

    <!-- 順序のないリスト -->
<ul>
<li>りんご</li>
<li>ゴリラ</li>
<li>ラッパ</li>
</ul>

<!-- 順序のあるリスト -->
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>

    テーブル（表）

    料金表やスペック表など、データを表形式で表示するためのタグです。

      • <table>
        表全体を囲みます。
      • <tr>
        表の行を作成します。
      • <th>
        見出しセルを作成します。
      • <td>
        データセルを作成します。
      • <thead>
        表のヘッダー部分をグループ化します。
      • <tbody>
        表のボディ部分をグループ化します。
      • <tfoot>
        表のフッター部分をグループ化します。

    サンプルコード（コピペ用）

    <table>
<thead>
<tr>
<th>プラン</th>
<th>料金</th>
</tr>
</thead>
<tbody>
<tr>
<td>基本プラン</td>
<td>月額980円</td>
</tr>
<tr>
<td>上級プラン</td>
<td>月額1,980円</td>
</tr>
</tbody>
</table>

    フォーム

    ユーザーが情報を入力・送信するためのフォームを作成します。お問い合わせやアンケートなどで使われます。

      • <form>
        フォーム全体を囲みます。
      • <input>
        テキスト入力欄やチェックボックス、ボタンなど様々な入力部品を作成します。
      • <textarea>
        複数行のテキスト入力欄を作成します。
      • <button>
        クリックできるボタンを作成します。
      • <label>
        フォーム部品のラベル（項目名）を定義します。
      • <select>
        ドロップダウンリストを作成します。
      • <option>
        <select>タグの選択肢を作成します。

    サンプルコード（コピペ用）

    <form action="/submit" method="post">
<label for="name">お名前:</label>
<input type="text" id="name" name="user_name">

 <label for="mail">メールアドレス:</label>
<input type="email" id="mail" name="user_mail">

 <button type="submit">送信</button>
</form>

    レイアウト・セクショニング

    ページ内のコンテンツを論理的なセクションに分割するためのタグです。SEOやアクセシビリティの観点からも重要です。

      • <div>
        特に意味を持たない汎用的なブロックレベルのコンテナです。CSSでのスタイリング目的で多用されます。
      • <span>
        特に意味を持たない汎用的なインラインのコンテナです。
      • <header>
        ページのヘッダー部分（ロゴやナビゲーションなど）を示します。
      • <footer>
        ページのフッター部分（コピーライトや連絡先など）を示します。
      • <nav>
        ナビゲーションリンクのセクションを示します。
      • <main>
        ページの主要なコンテンツを示します。
      • <section>
        文書内の独立したセクションを示します。
      • <article>
        自己完結したコンテンツ（ブログ投稿やニュース記事など）を示します。
      • <aside>
        サイドバーなど、補足的なコンテンツを示します。

    サンプルコード（コピペ用）

    <body>
<header>
<h1>サイトタイトル</h1>
<nav>
<!-- ナビゲーションメニュー -->
</nav>
</header>

 <main>
<article>
<h2>記事タイトル</h2>
<p>記事の本文...</p>
</article>
</main>

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

    オススメ：転職サポートのプロから転職支援が受けられるオンラインスクールはこちら

    HTMLタグを学習する際のポイント

    数多くのタグがありますが、すべてを一度に暗記する必要はありません。効率的に学習するためのポイントを紹介します。

    まずはよく使うものから覚える

    本記事で紹介したような、使用頻度の高い基本的なタグから覚えましょう。特に、テキスト関連、画像、リンク、リストのタグはWeb制作の基本となります。

    意味を理解して使う

    <div>や<span>のように見た目を変えるためだけのタグもありますが、多くのタグには意味があります。例えば、<strong>は「重要性」を、<header>は「ヘッダー部分」を示す、といった具合です。タグの持つ意味を正しく理解し、適切に使い分けることが、SEOやアクセシビリティの向上に繋がります。

    まずはよく使うものから覚える

    本記事のサンプルコードを参考に、ぜひご自身のPCでコードを書いてみてください。実際に手を動かすことで、タグの働きや構造の理解が格段に深まります。「エディタ」と呼ばれる開発用のツール（Visual Studio Codeなどが有名です）を使うと、効率的にコーディングができます。

    オススメ：HTMLの問題に無料でチャレンジするならこちら

    プログラミングスクールなら
    忍者CODE

    適正コース診断2

    まとめ

    今回ご紹介したタグを組み合わせることで、ウェブページの構造やデザインを柔軟に作成するこ

    本記事では、初心者向けに基本的なHTMLタグを目的別に一覧でご紹介しました。

    HTMLタグはWebページを構成する骨格であり、その意味を正しく理解して使うことが重要です。最初からすべてを覚えるのは大変ですが、まずは本記事で紹介した「よく使うタグ」からマスターし、実際にコードを書きながら少しずつ使えるタグを増やしていきましょう。

    この記事が、あなたのHTML学習の第一歩となれば幸いです。

    挫折することなくHTMLを習得するなら

    独学？スクール？

    これからHTMLやCSSなどプログラミング言語の学習を始めようと考えている方、または最近学習を始めた方がいらっしゃるかと思います。

    ただ、実際学習を始めるとなると

    1人で学習を進められるかな…
    どこをゴールにしていいかわからない…
    挫折してしまわないかな…

    このように不安な気持ちになる方もいますよね。

    たしかに、何かわからないことが出てきたとき、エラーが解決できないとき、誰かに相談できる環境がないことが理由でプログラミング言語の学習を挫折する方が多くいます。

    実際にプログラミング言語初学者が挫折をする1番の理由は「不明点が発生した際に気軽に相談できる環境がない」という実態があります。

    それだけ学習する環境が大事だということです。

    そんな背景があるからこそ、プログラミングの勉強をする際にスクールを選ぶ方が多いのが事実です。

    プログラミングスクールに通う理由は他にもあり

    ・確実にスキルを身に着けたい
    ・効率良く学習を進めたい
    ・モチベーションの維持にもつながりそう
    ・以前に独学で挫折した経験がある
    HTMLを使った学習についてさらに詳しく知りたい方へ
    • HTMLを学んで自分だけのスキルを身につけたい
    • HTMLのスキルを身につけてwebクリエイターとして活躍したい
    • サポートが充実しているプログラミングスクールを知りたい

    そんな思いを持った方は忍者CODEのWeb制作コースがおすすめです！
    忍者CODEは未経験からでもプロのエンジニアを目指せるオンラインプログラミングスク―ルです。
    期間制限なく動画を視聴できるので、自分のペースで学習することができます！

    このように「確実に！」「効率良く！」といった声もよく上がります。
    やはり途中で挫折してしまったり、どこを目指しているのかわからなくなったりした場合、「プログラミングを学習することは難しい」と認識してしまい、その後のスキル習得を諦めてしまう可能性が非常に高くなります。
    このようなことから、社会人で時間もそこまでないため短期間でスキルを習得したい人や独学で進めるのが不安な人が効率性や確実性を求め、プロの講師に相談できる環境が用意されているプログラミングスクールを選択するのがわかります。
    「転職をしたい」「副業で稼げるようになりたい」という理由でプログラミング言語を学び始めたとき、わからない箇所を飛ばしてそのままに放置して学習を進めたとしても、目標とする転職や副業が実現するほどのスキルが身につかなければ多くの時間を費やして何も得られないという結果になります。
    ですので、1人でHTMLを始めとしたプログラミングスキルの習得ができるか不安な方は多少の費用をかけてでも、不明点をすぐに相談・解決できる環境や効率良く学習できる有料サービスを選ぶのがベストだと言えます。
    そこでおすすめしたいのが「忍者CODE」です。

    ＼満足度90%以上！／

    オンラインプログラミングスクール忍者CODE
    無料相談はこちら>

    忍者CODEをおすすめする1番の理由は「業界最安級の金額でありながら圧倒的学習ボリュームと半永久サポートを提供している」ところにあります。
    上記でお伝えしたように、初学者の多くは独力で不明点や問題点を解決できないためにプログラミングの学習を挫折しています。そのため、初学者が経験豊富なプロのエンジニアに相談できない環境下でプログラミングスキルの習得をするのは難易度が高いと言えます。
    ですが、忍者CODEでは
    ・チャットでいつでも、無制限で質問可能
    ・学習者同士でつながれるコミュニティへの招待
    などといったサポート体制を設けているため、学習を進めていく中で出てきた問題点や不明点をスムーズに解決しながら、挫折することなくプログラミングスキルの習得が可能です。
    また、忍者CODEでは動画コンテンツにて学習を進めていくため、スッと頭に入ってきやすいようになっているのも特徴です。
    未経験でも挫折させないオンラインスクールとして、受講生に寄り添った学習コンテンツを提供している忍者CODEをより詳しく知りたい方はぜひ公式サイトをご覧ください。

     

    副業でWeb制作を始めたい方必見！

    「副業で稼げるようになるかわからない…」
    「やっぱりスクールに通った方がいいの？」
    など、皆さんの不安や悩みをお聞きします！

    無料相談はこちら