目次
HTMLタグとは？
HTMLタグとは、Webページの構造や内容の意味を定義するための記述です。<タグ名>内容</タグ名> の形式で使い、ブラウザがどのように表示するかを指示します。
このページでは、よく使うHTMLタグをカテゴリ別にまとめています。
基本構造タグ
Webページに必ず必要な骨格タグです。
| タグ | 意味・役割 |
|---|---|
<!DOCTYPE html> |
HTML5文書の宣言。すべてのHTMLファイルの1行目に記述 |
<html> |
HTML文書全体のルート要素 |
<head> |
ページのメタ情報（タイトル・文字コード・CSSなど）を記述 |
<body> |
ブラウザに実際に表示されるコンテンツを記述 |
<meta> |
文字コード・ビューポート・OGPなどのメタ情報を設定 |
<title> |
ブラウザタブと検索結果に表示されるページタイトル |
<link> |
外部CSSや favicon の読み込み |
<script> |
JavaScriptの記述・外部JSファイルの読み込み |
<style> |
インラインCSSの記述 |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- コンテンツをここに書く -->
</body>
</html>
セクション・レイアウトタグ
ページの構造を示すセマンティックなタグです。SEOとアクセシビリティに重要です。
| タグ | 意味・役割 |
|---|---|
<header> |
ページまたはセクションのヘッダー（ロゴ・ナビなど） |
<nav> |
ナビゲーションリンクのまとまり |
<main> |
ページのメインコンテンツ。1ページに1つ |
<article> |
独立した記事コンテンツ（ブログ記事・ニュースなど） |
<section> |
テーマでまとまったコンテンツのセクション |
<aside> |
メインコンテンツに関連するサイドバーや補足情報 |
<footer> |
ページまたはセクションのフッター |
<div> |
グループ化用の汎用ブロック要素（意味なし） |
<span> |
グループ化用の汎用インライン要素（意味なし） |
見出しタグ
| タグ | 意味・役割 |
|---|---|
<h1> |
最上位の見出し。ページに1つだけ。SEOに最重要 |
<h2> |
2番目の見出し。大項目 |
<h3> |
3番目の見出し。中項目 |
<h4> |
4番目の見出し |
<h5> |
5番目の見出し |
<h6> |
最下位の見出し |
ポイント: h1→h2→h3 の順番を守り、見出しをスキップしないことが大切です。
テキスト・インラインタグ
| タグ | 意味・役割 | 表示例 |
|---|---|---|
<p> |
段落（パラグラフ） | 通常テキスト |
<strong> |
重要な強調（太字） | 強調テキスト |
<em> |
意味的な強調（斜体） | 強調テキスト |
<br> |
改行（終了タグなし） | — |
<hr> |
水平線・区切り線 | — |
<small> |
補足・注釈などの小さいテキスト | 小さいテキスト |
<mark> |
ハイライト・マーカー | ハイライト |
<code> |
コード（インライン） | コード |
<pre> |
整形済みテキスト（インデント・改行保持） | — |
<blockquote> |
引用ブロック | — |
<cite> |
引用元の出典 | — |
<time> |
日時の表示 | — |
<abbr> |
略語（ホバーで正式名称を表示） | — |
リンク・画像タグ
| タグ | 主要属性 | 役割 |
|---|---|---|
<a> |
href target rel |
ハイパーリンク |
<img> |
src alt width height |
画像の表示 |
<picture> |
— | レスポンシブ画像（複数ソース指定） |
<figure> |
— | 画像・図表などのキャプション付きコンテンツ |
<figcaption> |
— | figureのキャプション |
<!-- リンク -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部リンク</a>
<!-- 画像（alt属性必須） -->
<img src="photo.jpg" alt="富士山の風景" width="800" height="600">
<!-- キャプション付き画像 -->
<figure>
<img src="photo.jpg" alt="富士山の風景">
<figcaption>富士山（静岡県・山梨県）</figcaption>
</figure>
リストタグ
| タグ | 役割 |
|---|---|
<ul> |
順不同リスト（箇条書き・黒丸） |
<ol> |
順序付きリスト（番号付き） |
<li> |
リストの各項目（ul/ol の子要素） |
<dl> |
定義リスト |
<dt> |
定義リストの用語 |
<dd> |
定義リストの説明 |
<!-- 箇条書き -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- 番号付き -->
<ol>
<li>ドメイン取得</li>
<li>サーバー契約</li>
<li>WordPress設置</li>
</ol>
<!-- 定義リスト -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language の略。Webページの構造を定義する言語。</dd>
</dl>
テーブルタグ
| タグ | 役割 |
|---|---|
<table> |
テーブル全体を囲む |
<thead> |
テーブルのヘッダー行グループ |
<tbody> |
テーブルのボディ行グループ |
<tfoot> |
テーブルのフッター行グループ |
<tr> |
テーブルの行 |
<th> |
テーブルのヘッダーセル（太字・中央揃え） |
<td> |
テーブルのデータセル |
<caption> |
テーブルのキャプション（タイトル） |
<table>
<caption>HTML学習ロードマップ</caption>
<thead>
<tr>
<th>ステップ</th>
<th>学ぶ内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>基本タグ（h1・p・a・img）</td>
</tr>
<tr>
<td>2</td>
<td>リスト・テーブル</td>
</tr>
</tbody>
</table>
フォームタグ
| タグ | 主要属性 | 役割 |
|---|---|---|
<form> |
action method |
フォーム全体 |
<input> |
type name value placeholder |
入力欄（テキスト・チェックボックスなど） |
<textarea> |
rows cols placeholder |
複数行テキスト入力 |
<select> |
name |
セレクトボックス |
<option> |
value selected |
セレクトの選択肢 |
<label> |
for |
入力欄のラベル |
<button> |
type |
ボタン |
<fieldset> |
— | フォームのグループ化 |
<legend> |
— | fieldsetのキャプション |
inputのtype属性一覧
| type値 | 用途 |
|---|---|
text |
1行テキスト |
email |
メールアドレス |
password |
パスワード（マスク） |
tel |
電話番号 |
number |
数値 |
checkbox |
チェックボックス |
radio |
ラジオボタン |
submit |
送信ボタン |
file |
ファイル選択 |
date |
日付 |
hidden |
非表示の値 |
メディアタグ
| タグ | 役割 |
|---|---|
<video> |
動画の埋め込み |
<audio> |
音声の埋め込み |
<source> |
video/audio の複数ソース指定 |
<iframe> |
外部ページの埋め込み（YouTube・Google Mapsなど） |
<canvas> |
JavaScriptで描画する領域 |
<svg> |
ベクター画像（スケーラブルグラフィクス） |
まとめ：よく使うタグ TOP10
初心者がまず覚えるべき10タグです。
| # | タグ | 使う場面 |
|---|---|---|
| 1 | <h1>〜<h3> |
ページタイトル・見出し |
| 2 | <p> |
本文の段落 |
| 3 | <a> |
リンク |
| 4 | <img> |
画像 |
| 5 | <ul> / <li> |
箇条書きリスト |
| 6 | <div> |
レイアウトのグループ化 |
| 7 | <span> |
インラインのグループ化 |
| 8 | <strong> |
重要な強調 |
| 9 | <table> |
比較表・データ表 |
| 10 | <form> / <input> |
お問い合わせ・入力フォーム |
HTMLタグの使い方をもっと詳しく学びたい方は「HTMLとは？初心者向け解説」も合わせてご覧ください。
WordPressサイトを作るなら、サーバー選びが最初の一歩
HTMLを学んだ次のステップとして、実際にサイトを公開するためのレンタルサーバーが必要です。現役Web制作者が主要8社を比較・評価した情報をまとめています。
→ [レンタルサーバー比較ノート（hosting.awcs.org・近日公開）]
