HTMLタグ チートシート 

# はじめに
よく使うタグだけをまとめました。
ほぼ自分の備忘録として後で見返せるように作成しています。
間違いなどあれば教えていただけると嬉しいです。

# HTML基本構造
```html
<!DOCTYPE html>            <!-- HTML5宣言 -->
<html lang="ja">           <!-- HTML文書の開始、言語指定 -->
<head>                     <!-- ヘッダー情報（ブラウザには表示されない） -->
    <meta charset="UTF-8"> <!-- 文字コードの指定 -->
    <title>ページタイトル</title> <!-- ブラウザのタブに表示されるタイトル -->
    <!-- その他スタイルのリンクなど必要なものを追加する -->
</head>
<body>                    
    <!-- ここにコンテンツを記述 -->
</body>
</html>
```

## コンテンツ構造
| タグ | 説明 | 例 |
|------|------|------|
| `<header>` | ヘッダーセクション | `<header>...</header>` |
| `<nav>` | ナビゲーションリンク | `<nav>...</nav>` |
| `<main>` | メインコンテンツ | `<main>...</main>` |
| `<section>` | 文書のセクション | `<section>...</section>` |
| `<article>` | 独立したコンテンツ | `<article>...</article>` |
| `<aside>` | サイドコンテンツ | `<aside>...</aside>` |
| `<footer>` | フッターセクション | `<footer>...</footer>` |
| `<div>` | 汎用ブロック要素 | `<div class="container">...</div>` |
| `<span>` | インライン要素 | `<span class="highlight">テキスト</span>` |

## テキスト要素
| タグ | 説明 | 例 |
|------|------|------|
| `<h1>` - `<h6>` | 見出し（レベル1-6） | `<h1>メインタイトル</h1>` |
| `<p>` | 段落 | `<p>テキスト</p>` |
| `<strong>` | 重要なテキスト（太字） | `<strong>重要</strong>` |
| `<em>` | 強調テキスト（斜体） | `<em>強調</em>` |
| `<br>` | 改行 | `テキスト<br>改行後` |
| `<hr>` | 水平線 | `<hr>` |
| `<blockquote>` | 引用ブロック | `<blockquote>引用文</blockquote>` |
| `<code>` | コード | `<code>var x = 10;</code>` |
| `<pre>` | 整形済みテキスト | `<pre>コード ブロック</pre>` |

## リスト
| タグ | 説明 | 例 |
|------|------|------|
| `<ul>` | 順序なしリスト | `<ul><li>項目1</li></ul>` |
| `<ol>` | 順序付きリスト | `<ol><li>手順1</li></ol>` |
| `<li>` | リスト項目 | `<li>リスト項目</li>` |
| `<dl>` | 定義リスト | `<dl><dt>用語</dt><dd>説明</dd></dl>` |
| `<dt>` | 定義用語 | `<dt>HTML</dt>` |
| `<dd>` | 定義説明 | `<dd>ハイパーテキストマークアップ言語</dd>` |

## フォーム要素
| タグ | 説明 | 例 |
|------|------|------|
| `<form>` | フォーム | `<form action="/submit" method="post">...</form>` |
| `<input>` | 入力フィールド | `<input type="text" name="username">` |
| `<textarea>` | 複数行テキスト入力 | `<textarea name="message"></textarea>` |
| `<button>` | ボタン | `<button type="submit">送信</button>` |
| `<select>` | ドロップダウンリスト | `<select name="options"><option>選択肢1</option></select>` |
| `<option>` | ドロップダウンの選択肢 | `<option value="1">選択肢1</option>` |
| `<optgroup>` | オプショングループ | `<optgroup label="グループ1"><option>...</option></optgroup>` |
| `<label>` | フォーム要素のラベル | `<label for="name">名前:</label>` |
| `<fieldset>` | フォーム要素のグループ | `<fieldset><legend>個人情報</legend>...</fieldset>` |
| `<legend>` | フィールドセットの説明 | `<legend>連絡先</legend>` |
| `<datalist>` | 入力候補リスト | `<datalist id="browsers"><option value="Chrome"></datalist>` |
| `<progress>` | 進捗バー | `<progress value="70" max="100"></progress>` |

## 入力タイプ
| type属性値 | 説明 | 例 |
|------|------|------|
| `text` | テキスト入力 | `<input type="text">` |
| `password` | パスワード入力 | `<input type="password">` |
| `email` | メールアドレス入力 | `<input type="email">` |
| `number` | 数値入力 | `<input type="number" min="1" max="10">` |
| `checkbox` | チェックボックス | `<input type="checkbox">` |
| `radio` | ラジオボタン | `<input type="radio">` |
| `date` | 日付選択 | `<input type="date">` |
| `time` | 時間選択 | `<input type="time">` |
| `datetime-local` | 日時選択 | `<input type="datetime-local">` |
| `file` | ファイル選択 | `<input type="file">` |
| `range` | 範囲選択 | `<input type="range" min="0" max="100">` |
| `color` | 色選択 | `<input type="color">` |
| `search` | 検索フィールド | `<input type="search">` |
| `tel` | 電話番号入力 | `<input type="tel">` |
| `url` | URL入力 | `<input type="url">` |
| `hidden` | 非表示フィールド | `<input type="hidden" name="id" value="123">` |
| `submit` | 送信ボタン | `<input type="submit" value="送信">` |
| `reset` | リセットボタン | `<input type="reset" value="リセット">` |
| `button` | 汎用ボタン | `<input type="button" value="クリック">` |

## メディア要素
| タグ | 説明 | 例 |
|------|------|------|
| `<img>` | 画像 | `<img src="image.jpg" alt="説明">` |
| `<picture>` | 画像（レスポンシブ） | `<picture><source srcset="large.jpg" media="(min-width: 800px)"><img src="small.jpg"></picture>` |
| `<video>` | 動画 | `<video src="video.mp4" controls></video>` |
| `<audio>` | 音声 | `<audio src="audio.mp3" controls></audio>` |
| `<source>` | メディアリソース | `<source src="video.mp4" type="video/mp4">` |
| `<track>` | 字幕・キャプション | `<track kind="subtitles" src="captions.vtt" srclang="ja">` |
| `<canvas>` | 描画領域 | `<canvas id="myCanvas" width="200" height="100"></canvas>` |
| `<svg>` | SVGグラフィックス | `<svg width="100" height="100"><circle cx="50" cy="50" r="40" /></svg>` |
| `<iframe>` | インラインフレーム | `<iframe src="page.html"></iframe>` |

## テーブル
| タグ | 説明 | 例 |
|------|------|------|
| `<table>` | テーブル | `<table>...</table>` |
| `<thead>` | テーブルヘッダー部分 | `<thead>...</thead>` |
| `<tbody>` | テーブル本体部分 | `<tbody>...</tbody>` |
| `<tfoot>` | テーブルフッター部分 | `<tfoot>...</tfoot>` |
| `<tr>` | テーブル行 | `<tr>...</tr>` |
| `<th>` | テーブルヘッダーセル | `<th>見出し</th>` |
| `<td>` | テーブルデータセル | `<td>データ</td>` |
| `<caption>` | テーブルキャプション | `<caption>テーブルの説明</caption>` |
| `<colgroup>` | 列グループ | `<colgroup><col span="2" style="background-color:red"></colgroup>` |
| `<col>` | 列の属性指定 | `<col style="width:200px">` |

## リンク
| タグ・属性 | 説明 | 例 |
|------|------|------|
| `<a>` | ハイパーリンク | `<a href="page.html">リンク</a>` |
| `href` | リンク先URL | `href="https://example.com"` |
| `target` | リンクの開き方 | `target="_blank"` (新しいタブで開く) |
| `rel` | リンク関係 | `rel="noopener noreferrer"` |
| `download` | ダウンロードリンク | `download="filename.pdf"` |

## モバイル・レスポンシブ対応
| タグ | 説明 | 例 |
|------|------|------|
| `<meta name="viewport">` | レスポンシブデザイン設定 | `<meta name="viewport" content="width=device-width, initial-scale=1.0">` |
| `<meta name="theme-color">` | ブラウザテーマカラー | `<meta name="theme-color" content="#4285f4">` |
| `<link rel="manifest">` | PWAマニフェスト | `<link rel="manifest" href="manifest.json">` |
| `<meta name="description">` | サイトの説明 | `<meta name="description" content="サイトの説明文">` |

## セマンティックWeb / HTML5
| タグ | 説明 | 例 |
|------|------|------|
| `<time>` | 日時 | `<time datetime="2025-03-25">3月25日</time>` |
| `<mark>` | ハイライト | `<mark>重要</mark>` |
| `<figure>` | 図表コンテナ | `<figure><img src="img.jpg"><figcaption>説明</figcaption></figure>` |
| `<figcaption>` | 図表の説明 | `<figcaption>図1: グラフの説明</figcaption>` |
| `<details>` | 折りたたみコンテンツ | `<details><summary>詳細</summary>内容...</details>` |
| `<summary>` | 折りたたみ見出し | `<summary>クリックして開く</summary>` |
| `<dialog>` | ダイアログボックス | `<dialog open>ダイアログ内容</dialog>` |

## アクセシビリティ
| タグ/属性 | 説明 | 例 |
|------|------|------|
| `aria-*` | ARIA属性 | `<button aria-label="閉じる">✕</button>` |
| `role` | 要素の役割 | `<div role="alert">通知</div>` |
| `tabindex` | タブ移動順序 | `<div tabindex="0">選択可能</div>` |
| `aria-hidden` | スクリーンリーダーから隠す | `<div aria-hidden="true">装飾用</div>` |
| `aria-live` | ライブリージョン | `<div aria-live="polite">更新される情報</div>` |
| `aria-expanded` | 展開状態 | `<button aria-expanded="false">メニュー</button>` |
| `aria-describedby` | 要素の説明 | `<input aria-describedby="hint">` |
| `aria-labelledby` | 要素のラベル | `<div aria-labelledby="heading">` |
| `aria-required` | 必須項目 | `<input aria-required="true">` |

## メタデータ・ドキュメント情報
| タグ | 説明 | 例 |
|------|------|------|
| `<meta charset>` | 文字エンコーディング | `<meta charset="UTF-8">` |
| `<meta http-equiv>` | HTTPヘッダー設定 | `<meta http-equiv="refresh" content="30">` |
| `<base>` | ベースURL | `<base href="https://example.com/">` |
| `<style>` | スタイル定義 | `<style>body { color: blue; }</style>` |
| `<noscript>` | JavaScriptなし時の代替 | `<noscript>JavaScriptが必要です</noscript>` |
| `<template>` | テンプレート | `<template id="tpl"><p>テンプレート内容</p></template>` |
| `<link rel="preconnect">` | 事前接続ヒント | `<link rel="preconnect" href="https://fonts.gstatic.com">` |
| `<link rel="preload">` | 事前読み込み | `<link rel="preload" href="font.woff2" as="font">` |

## グローバル属性
| 属性 | 説明 | 例 |
|------|------|------|
| `hidden` | 要素を非表示にする | `<div hidden>非表示コンテンツ</div>` |
| `id` | 要素の一意の識別子 | `<div id="main">メインコンテンツ</div>` |
| `class` | 要素のクラス名 | `<div class="container">コンテンツ</div>` |
| `style` | インラインスタイル | `<div style="color: red;">赤いテキスト</div>` |
| `title` | 追加情報（ツールチップ） | `<a title="詳細ページへ">詳細</a>` |
| `lang` | 言語の指定 | `<p lang="ja">日本語テキスト</p>` |
| `dir` | テキストの方向 | `<p dir="rtl">右から左に表示</p>` |


## データ属性
| 属性 | 説明 | 例 |
|------|------|------|
| `data-*` | フルーツの例 | `<li data-fruit-type="citrus" data-season="winter" data-ripe="true">みかん</li>` |
| `data-*` | CSSでの活用 | CSS: `li[data-fruit-type="citrus"] { color: orange; }` <br> `li[data-season="winter"][data-ripe="true"] { font-weight: bold; }` |
| `data-*` | JavaScriptでの活用 | JS: `// 値の取得` <br> `const isCitrus = element.dataset.fruitType === "citrus";` <br> `// 値の設定` <br> `element.dataset.price = "100";` <br> `// 条件分岐` <br> `if (element.dataset.ripe === "true") { /* 熟した果物の処理 */ }` |



## さいごに
間違いや足りないものがあれば適宜更新していきます。