Contents
文字・文章の基本要素（見出し含む）
| 要素 | 意味・使い方 | 例 | 備考 |
|---|---|---|---|
<h1>〜<h6> | 見出し（数字が小さいほど大きな見出し） | <h2>サービス紹介</h2> | ページにh1は原則1つ。階層構造を意識 |
<p> | 段落（パラグラフ） | <p>本文の段落です。</p> | 上下に余白がつく |
<br> | 改行 | こんにちは<br>世界！ | 閉じタグ不要 |
<strong> | 重要な強調（意味を持つ強さ） | <strong>重要</strong> | 意味を持つ太字（音声読み上げでも強調される） |
<em> | 感情的な強調（意味のある斜体） | <em>とても大切</em> | ブラウザでは斜体表示 |
<b> | 見た目だけの太字（意味なし） | <b>太字</b> | 装飾目的。SEO的な意味はなし |
<i> | 見た目だけの斜体（意味なし） | <i>斜体</i> | 装飾目的 |
<span> | インラインの装飾やグループ化 | <span class="blue">青文字</span> | 意味づけはなく、CSSでスタイル指定するために使用 |
リンク関連（<a>要素など）
| 要素・属性 | 意味・使い方 | 例 | 備考 |
|---|---|---|---|
<a> | ハイパーリンクを作る | <a href="https://example.com">公式サイト</a> | hrefでリンク先を指定 |
target="_blank" | 新しいタブで開く | <a href="…" target="_blank">別タブ</a> | 外部リンクでよく使う |
rel="noopener" | セキュリティ強化（外部リンク時） | <a href="…" target="_blank" rel="noopener">リンク</a> | target="_blank"とセットで推奨 |
mailto: | メール送信リンク | <a href="mailto:info@example.com">お問い合わせ</a> | メールアプリが起動 |
tel: | 電話番号リンク | <a href="tel:0123456789">電話をかける</a> | スマホ閲覧で有効 |
id | ページ内リンクのジャンプ先 | <a href="#about">紹介へ</a> ／ <div id="about">…</div> | ページ内でスクロールジャンプが可能 |
リスト・表
| 要素 | 意味・使い方 | 例 | 備考 |
|---|---|---|---|
<ul> | 順不同リスト（●） | <ul><li>りんご</li><li>バナナ</li></ul> | li要素を囲む |
<ol> | 順序付きリスト（1. 2.） | <ol><li>ステップ1</li><li>ステップ2</li></ol> | 自動で番号が付く |
<li> | リストの各項目 | <li>項目</li> | ulかolの中で使用 |
<dl> | 定義リスト（用語と説明） | <dl><dt>HTML</dt><dd>マークアップ言語</dd></dl> | 用語と説明で1セット |
<dt> | 定義リストの用語 | <dt>CSS</dt> | dl内で使う |
<dd> | 定義リストの説明 | <dd>スタイルを指定する言語</dd> | dtのあとに書く説明文 |
<table> | 表全体 | <table>…</table> | 行・列にデータを整理して表示 |
<tr> | 表の行 | <tr><td>内容</td></tr> | 行を定義する |
<th> | 表の見出しセル | <th>項目名</th> | 見出し用。自動的に太字＋中央寄せ |
<td> | 表のデータセル | <td>データ</td> | 一般的なセル。通常左寄せ |
構造・セクション要素
| 要素 | 意味・使い方 | 例 | 備考 |
|---|---|---|---|
<header> | セクションやページの先頭に置く要素 | <header><h1>サイト名</h1></header> | ページ全体にも、各セクション内にも使える |
<footer> | セクションやページの締めくくり | <footer><p>© 2025 MySite</p></footer> | 複数あってOK（著作権・補足情報など） |
<main> | ページの主要な中身を表す | <main>ここに本文を記述</main> | ページに1つだけ、補足要素（nav/aside等）は含まない |
<section> | 意味のある区切り（章） | <section><h2>サービス紹介</h2><p>内容</p></section> | h2～h6の見出しがセットで必要 |
<article> | 独立した再利用可能なコンテンツ | <article><h2>新着記事</h2><p>本文</p></article> | 自己完結する内容（ブログ記事・レビューなど） |
<nav> | ナビゲーションリンクのまとまり | <nav><ul><li><a href="/">Home</a></li></ul></nav> | 内部・外部リンクの集まり。リンクが必須 |
<aside> | 本文の補足情報やサイドコンテンツ | <aside><h2>お知らせ</h2><ul>…</ul></aside> | 関連情報・広告・お知らせなどに使う |
<div> | 意味を持たない汎用ブロック | <div class="box">中身</div> | レイアウトや装飾目的で使用（セマンティックではない） |
フォーム関連
| 要素 | 意味・使い方 | 例 | 備考 |
|---|---|---|---|
<form> | 入力フォーム全体を囲む | <form action="#">…</form> | actionで送信先、methodでGET/POSTを指定 |
<label> | 入力欄に説明ラベルをつける | <label for="name">名前</label> | for属性はinputのidと一致させる |
<input> | 単一行の入力欄 | <input type="text" id="name"> | type属性で種類を指定（text, email, radioなど） |
<textarea> | 複数行のテキスト入力欄 | <textarea rows="4" cols="40"></textarea> | フォーム本文やコメント欄などに使う |
<select> | プルダウンリスト | <select><option>選択肢</option></select> | 選択肢は<option>で指定 |
<option> | select内の選択肢 | <option value="1">選択肢1</option> | valueが送信値になる |
<button> | ボタン全般 | <button type="submit">送信</button> | type指定でsubmit/reset/buttonを区別 |
<input type="radio"> | ラジオボタン（単一選択） | <input type="radio" name="q1">選択肢 | 同じnameでグループ化 |
<input type="checkbox"> | チェックボックス（複数可） | <input type="checkbox" name="q2[]">選択肢 | []で複数選択に対応 |
画像・図解
| 要素 | 意味・使い方 | 例 | 備考 |
|---|---|---|---|
<img> | 画像の表示 | <img src="photo.jpg" alt="風景"> | alt属性は必須（アクセシビリティ対応） |
<figure> | 図や画像などの独立ブロック | <figure><img src="img.jpg"><figcaption>説明文</figcaption></figure> | 装飾画像には使わない |
<figcaption> | figure内のキャプション（説明文） | <figcaption>この写真は〜</figcaption> | figureタグの内側に記述する |
meta要素・head内で使うタグ
| 要素・属性 | 意味・使い方 | 例 | 備考 |
|---|---|---|---|
<meta charset> | 文字コードの指定（必須） | <meta charset="UTF-8"> | 日本語なら基本的にUTF-8でOK |
<meta name="viewport"> | モバイル対応（レスポンシブ表示） | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | スマホ対応ページでは必須 |
<meta name="description"> | ページの説明（SEO） | <meta name="description" content="このページは〜"> | 検索結果の抜粋になることも |
<meta name="robots"> | 検索エンジンへの指示 | <meta name="robots" content="noindex, nofollow"> | インデックスさせたくない時に使用 |
<title> | タブに表示されるページタイトル | <title>Webトレーニング｜HTML講座</title> | 検索結果のタイトルにも使われる |
<link rel="stylesheet"> | CSSファイルを読み込む | <link rel="stylesheet" href="style.css"> | head内に記述 |
<script> | JavaScriptの読み込み | <script src="main.js"></script> | bodyの最後に入れるのが基本（表示速度考慮） |
