【初心者必見】よく使うHTMLのタグ一覧｜基本の使い方と役割を実例とともに徹底解説！
生徒ペン博士！この前HTMLの基本を勉強したんですけど、実際にホームページを作ろうとすると、「タグっていっぱいある！」ってなってしまって…
よく使うタグだけでも覚えたいんです。
ペン博士ふむふむ、確かにHTMLには数え切れんほどタグがあるからのう。
だが、実際によく使うタグは決まっておる。基本のタグさえ押さえれば、かなりのページが作れるんじゃぞ！
今回はよく使うタグと使い方を解説するからよーく聞くんだぞ！
生徒そうなんですね！ありがとうございます！
「HTMLでよく使うタグを覚えたいけれど、何から手をつければよいのかわからない…」
そんな悩みを抱えている方も多いのではないでしょうか。
本記事では、HTMLでよく使われるタグの役割や使い方について、初心者向けにわかりやすく解説します。
詳しくはこちらの記事をご覧ください。
あわせて読みたい
【副業の方必見】超ブラック企業から独立！Web制作のフリーランスで活躍できている秘訣とは？
ペン博士！スクールの卒業生でフリーランスになった方がいるって聞いたんですけどほんとですか？ うむ、元々は超ブラック企業で働きながら、副業で学習を続けておった受...
中田さんの主な制作実績はこちら
目次
HTMLのタグとは？構造と役割の基礎
Webページは、HTML（HyperText Markup Language）という言語によって構築されています。その中で「タグ」は、テキストや画像などの要素に意味や構造を付与するものです。
見出しや段落、表、フォームといったそれぞれのパーツをタグで定義することで、検索エンジンに正確な情報を伝えることができます。
ペン博士HTMLタグは基本的に、開始タグ <タグ名> と 終了タグ </タグ名> で囲んで使用するぞ。
<h2>HTMLとは何か</h2>
<p>HTMLタグは、ページ内の要素の意味や構造を明示するために使用されます。</p>HTMLについてはこちらの記事で詳しく解説していますのでご覧ください。
あわせて読みたい
【プログラミング初心者必見】今さら聞けない！HTML とは？基礎知識から使い方まで徹底解説
ペン博士！最近プログラミングに興味があるのですが、そもそも「HTML」って何なのかよくわかりません。 HTMLはWebページの骨組みを作る基本中の基本の言語じゃ！今から…
HTML文書の基本構造を定義するタグ
ペン博士まずは、HTML文書の基本となるタグを紹介するぞ！。これらはページ全体の構造を作る重要なタグで、どんなWebページにも必ず登場するんじゃ！
HTML文書であることを宣言する（!DOCTYPE）
HTML文章であることをブラウザに伝えるための宣言です。これがあることで、正しくページが表示されるようになります。
<!DOCTYPE html>HTMLドキュメント全体を囲む（htmlタグ）
ページ全体の内容を囲む最上位のタグです。
lang=”ja” のように言語設定を指定するのが推奨されます。
<html lang="ja">
<head>...</head>
<body>...</body>
</html>メタ情報やリソースを記述する（headタグ）
ページの情報や外部ファイルの読み込みなど、見た目には直接表示されない設定をまとめるタグです。
<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
<link rel="stylesheet" href="style.css">
</head>ページのタイトルを指定する（titleタグ）
ページのタイトルを指定するタグです。Webブラウザのタブやブックマーク、検索結果などに表示される名前として使われます。
<title>サイトタイトル</title>実際に表示される内容を記述する（bodyタグ）
画像、テキスト、ナビゲーション、フォームなど、実際に画面上に表示されるコンテンツを配置するタグです。
<body>
<h1>ようこそ</h1>
<p>これはサンプルのページです。</p>
</body>テキストコンテンツに使用するタグ
ペン博士ここでは、文章の見出しや段落、文字の強調に使う基本的なタグを紹介するぞ！読みやすく伝わりやすい文章を作るために、しっかり覚えておくんじゃ！
文書階層を示す見出し（h1〜h6タグ）
文章の構造を分かりやすく示す見出しタグです。<h1>が最上位の見出しで、以降<h2>〜<h6>へと下位階層になります。
<h1>ポートフォリオサイト</h1>
<h2>スキル一覧</h2>
<h3>フロントエンド</h3>段落のまとまりを作る（pタグ）
文章の段落を区切るためのタグでテキストのまとまりを整えます。
<p>これは段落の例です。読みやすく情報を区切るのに役立ちます。</p>改行を入れる（brタグ）
段落を変えずに行を改めたいときに使うタグです。細かいレイアウト調整に便利です。
<p>こんにちは。<br>はじめまして。</p>太字にする（strongタグ）
重要な部分を強調するためのタグです。SEO的にも意味がある強調方法です。
<p><strong>注意：</strong> パスワードは8文字以上で入力してください。</p>画像・メディアに使用するタグ
ペン博士ページに画像や動画、音声を埋め込むときに使うタグをまとめたぞ！視覚や聴覚に訴えるコンテンツ作りには欠かせないぞ！
ページ内に画像を表示する（imgタグ）
画像ファイルをページに埋め込むためのタグです。src属性で画像のパス、alt属性で代替テキストを指定しています。
<img src="hero-banner.jpg" alt="サイトのトップ画像" >動画コンテンツを埋め込む（videoタグ）
動画を直接ページに表示し、再生できるようにするためのタグです。controls 属性をつけることで再生ボタンや音量操作が可能になります。
<video src="intro-video.mp4" controls width="500"></video>音声ファイルを再生する（audioタグ）
音声をページ上で再生するために使うタグです。BGMやナレーションなどに利用されます。<video>と同様、controls属性で操作パネルを表示できます。
<audio src="voice-guide.mp3" controls></audio>リストを作る際に使用するタグ
ペン博士箇条書きや番号付きリストなど、情報を整理して見せるときに使うタグを紹介するぞ！わかりやすく伝えるために、上手に活用するんじゃ！
順序のない箇条書きリストを作成する（ulタグ）
黒丸や記号でリスト表示を行う際に使います。リストアイテムは <li> タグで囲みます。
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>順序付きのリストを作成する（olタグ）
番号付きのリストを作成するタグです。順番が重要な内容に適しています。
<ol>
<li>商品をカートに入れる</li>
<li>配送先を指定する</li>
<li>決済する</li>
</ol>リストの各項目を定義する（liタグ）
リスト内のそれぞれの項目を示すタグです。<ul>や<ol>の中に必ず入ります。
<ul>
<li>対応ブラウザ：Chrome、Firefox、Safari</li>
</ul>表を作成する際に使用するタグ
ペン博士データや情報を表形式で整理したいときに使うタグを教えるぞ！複雑な情報も見やすくまとめられる、便利なタグなんじゃ！
表全体の構造を定義する（tableタグ）
表の枠組みを作るタグです。データを整理して表示するときに使います。
<table>
<tr>
<th>氏名</th>
<td>山本 健一</td>
</tr>
</table>表の各行を構成する（trタグ）
表の中で行を表すタグです。<table>の中で複数行を作るために使います。
<tr>
<th>部署</th>
<th>人数</th>
</tr>表の見出しセルを示す（thタグ）
表のヘッダー部分に使うセルタグです。見出しとして意味づけられ、通常は太字になります。
<tr>
<th>部署</th>
<th>人数</th>
</tr>表のデータセルを定義する（tdタグ）
表の中のデータ部分を示すセルのタグです。<tr> の中に配置します。
<tr>
<td>マーケティング部</td>
<td>12名</td>
</tr>ページ構造・セクション定義に使用するタグ
ペン博士ページの基本構造となるタグを紹介するぞ！文章を意味のあるまとまりに分けたり、メインの内容やナビゲーション、補足情報を整理したりするんじゃ。
ページのメインコンテンツを示す（mainタグ）
ページの主要なコンテンツを囲むタグです。
<main>
<article>...</article>
</main>セクションごとに文書を区切る（sectionタグ）
意味のある区切りごとにページを分けるためのタグです。章や節にあたる部分に使います。
<section>
<h2>サービス内容</h2>
<p>オンラインサポート・設計支援などを提供しています。</p>
</section>独立した記事や投稿を示す（articleタグ）
ブログ記事やニュース投稿のように独立して完結する内容を示すタグです。
<article>
<h2>展示会レポート 2025</h2>
<p>先月行われた国際技術展示会の出展内容をご紹介します。</p>
</article>ナビゲーション領域を定義する（navタグ）
メニューやリンク集など、ページ内外の移動を助けるナビゲーション用の領域を示します。
<nav>
<ul>
<li><a href="#about">企業情報</a></li>
<li><a href="#services">事業内容</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav>ヘッダー情報をまとめる（headerタグ）
ページやセクションの冒頭部分、タイトルやロゴなどの情報をまとめるタグです。
<header>
<h1>MyWebLab</h1>
<nav>...</nav>
</header>フッター情報をまとめる（footerタグ）
ページやセクションの最後に配置される著作権表示や連絡先などの情報をまとめます。
<footer>
<p>© 2025 MyWebLab Inc. All rights reserved.</p>
</footer>補足情報を配置する（asideタグ）
本文の補足やサイドバーなど、主内容とは別の関連情報を置くためのタグです。
<aside>
<h3>関連リンク</h3>
<ul>
<li><a href="#">導入事例</a></li>
<li><a href="#">製品サポート</a></li>
</ul>
</aside>ブロック単位でグループ化する（divタグ）
意味を持たない汎用的なグループ化タグです。レイアウト調整やスタイル適用に使われます。
<div class="feature-section">
<h2>製品の特長</h2>
<p>高耐久・軽量設計でさまざまな用途に適応します。</p>
</div>メタ情報の指定に使用するタグ
ペン博士ページの設定や情報を伝えるタグを紹介するぞ！検索エンジンやブラウザにページの特徴を知らせたり、スタイルやアイコンを読み込んだりする大事な役割があるんじゃ！
ページの概要や設定を記述する（metaタグ）
メタ情報を指定するために使うタグです。ページのキーワード、説明、作成者などの情報を指定します。
<meta name="keywords" content="HTML,チュートリアル,Web">
<meta name="description" content="初心者向けHTML講座">
<meta name="author" content="CodePilot">CSSやアイコンなどを読み込む（linkタグ）
外部のスタイルシートやアイコンファイルを読み込むために使います。
<link rel="stylesheet" href="assets/styles.css">
<link rel="icon" href="favicon.ico">ハイパーリンクを作成するタグ
ペン博士他のページや外部サイトへのリンクを作るタグを紹介するぞ！情報をつなげる重要な役割があるから、正しい使い方を覚えておくんじゃ！
他ページや外部サイトへのリンクを作る（aタグ）
クリックすると他のページや外部サイトに移動できるリンクを作るタグです。Webの基本的な繋がりを作ります。
<a href="https://sample-corp.jp" target="_blank">公式サイトを見る</a>target=”_blank” を指定すると、リンク先が新しいタブで開きます。
フォームを作る際に使用するタグ
ペン博士ユーザーからの入力を受け付けるフォームのタグをまとめたぞ！お問い合わせや会員登録など、ユーザーと直接やり取りする部分だから、丁寧に扱うのが大事なんじゃ！
入力フォーム全体を囲む（formタグ）
ユーザーの入力をまとめて送信するためのフォームを囲むタグです。
<form action="/send" method="post">
<!-- 入力項目が入る -->
</form>単一行の入力欄を生成する（inputタグ）
テキストボックスやチェックボックスなど、さまざまなタイプの入力欄を作るタグです。type 属性で形式を指定します。
<input type="text" name="username" placeholder="お名前を入力してください">
<input type="email" name="email" placeholder="メールアドレス">
<input type="checkbox" name="agree" value="yes"> 利用規約に同意するラベルで入力欄を説明する（labelタグ）
入力欄の説明や名前を関連付けるためのタグです。for 属性で id を指定することで関連付けが可能です。
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">複数行の入力欄を作成する（textareaタグ）
複数行のテキストを入力できる欄を作るタグです。問い合わせフォームのコメント欄などによく使われます。
<textarea name="message" rows="6" cols="40" placeholder="ご意見・ご要望などご記入ください"></textarea>入力内容を送信・処理する（buttonタグ）
フォームの送信ボタンや操作ボタンを作るタグです。type=”submit” でフォームを送信し、type=”button” でスクリプトを実行できます。
<button type="submit">送信する</button>
<button type="button" onclick="resetForm()">リセット</button>ペン博士、今日はたくさんのHTMLタグを教えてもらって、かなり整理できました！
なんだかコードを書くのがちょっと楽しみになってきました。
ペン博士それは良い兆しじゃな！タグは道具箱の中の工具みたいなもの。よく使うものを覚えておけば、いざ作るときに迷わず取り出せる。
これらを参考にHTMLタグを使いこなせるようになるんじゃぞ！
生徒ありがとうございます！あとは実際にタグを使ってページを作ってみれば、自然と覚えられそうです！助かりました！
まとめ
HTMLタグを使いこなすために重要なポイントを以下にまとめます。
- 文書構造や役割に応じて適切なタグを選ぶ
- 構造系タグ（section、article、mainなど）で論理的なページ設計を心がける
- 実際にHTMLファイルを作成し、ブラウザで表示してみる
これらのポイントを意識してHTMLタグを使うことで、より構造が明確で、読みやすいWebページを制作できるようになるでしょう。
WithCodeを体験できる初級コース公開中！
初級コース(¥49,800)が完全無料に！
- 期間：1週間
- 学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
