HTMLタグ一覧と使い方まとめ

よく使うHTMLタグ一覧と使い方

構造・レイアウト関連タグ

タグ	説明	使用例
<div>	汎用ブロック（レイアウトやスタイル調整に使用）	<div class="box">内容</div>
<span>	汎用インライン（部分的に装飾やJS操作対象に）	<span class="highlight">注目</span>
<header>	ヘッダー部分（ページやセクションの）	<header>ヘッダー</header>
<footer>	フッター部分	<footer>コピーライト</footer>
<main>	メインコンテンツ部分	<main>ここが本文</main>
<section>	セクション（意味のあるまとまり）	<section><h2>概要</h2></section>
<article>	独立した記事や投稿	<article>ブログ記事</article>
<nav>	ナビゲーションメニュー	<nav><ul>...</ul></nav>

テキスト関連タグ

タグ	説明	使用例
<h1>〜<h6>	見出し（数字が大きくなるほど小見出し）	<h2>中見出し</h2>
<p>	段落	<p>文章です。</p>
<br>	改行	1行目<br>2行目
<strong>	強調（意味的強調＋太字）	<strong>重要</strong>
<em>	強調（斜体）	<em>注意</em>
<mark>	ハイライト（黄色背景）	<mark>注目</mark>
<blockquote>	引用	<blockquote>引用文</blockquote>
<pre>	整形済みテキスト（改行や空白を保持）	<pre>整形テキスト</pre>
<code>	コードの一部	<code>let x = 10;</code>

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

タグ	説明	使用例
<a>	リンクを作成	<a href="https://example.com">公式サイト</a>
<img>	画像を表示	<img src="image.jpg" alt="説明">
<iframe>	外部コンテンツ埋め込み（YouTube等）	<iframe src="..."></iframe>
<video>	動画埋め込み	<video src="video.mp4" controls></video>
<audio>	音声再生	<audio src="audio.mp3" controls></audio>

リスト・表関連タグ

タグ	説明	使用例
<ul>	順不同リスト（黒点）	<ul><li>項目1</li></ul>
<ol>	順序付きリスト（番号）	<ol><li>手順1</li></ol>
<li>	リストの項目	<li>アイテム</li>
<dl>	定義リスト	<dl><dt>用語</dt><dd>説明</dd></dl>
<table>	表（テーブル）	<table>...</table>
<tr>	テーブル行	<tr>...</tr>
<td>	テーブルセル	<td>データ</td>
<th>	ヘッダーセル（太字・中央揃え）	<th>見出し</th>

フォーム関連タグ

タグ	説明	使用例
<form>	フォーム全体	<form action="/submit">...</form>
<input>	入力欄（テキスト、チェックなど）	<input type="text">
<textarea>	複数行入力欄	<textarea></textarea>
<select>	ドロップダウン選択	<select><option>選択肢</option></select>
<button>	ボタン	<button type="submit">送信</button>

セマンティックな意味をもつタグ

タグ	説明	使用例
<time>	日時の表現	<time datetime="2025-04-13">4月13日</time>
<abbr>	略語の意味付け	<abbr title="HyperText Markup Language">HTML</abbr>
<address>	連絡先情報（フッター等に使われる）	<address>東京都〇〇</address>
<cite>	作品名・出典の明示	<cite>吾輩は猫である</cite>