HTMLタグってなに？
HTMLタグは、「ここは見出し」「ここは文章」「ここは画像」のように、ページの意味（構造）をブラウザに伝えるしるし（マーク）です。見た目のデザインは本来CSSが担当します。
タグは <h1> や <p> のように、かぎカッコ（< >）で囲んだ名前で書きます。基本は開くタグと閉じるタグで1セット。
<h1>これは見出しです</h1>
<p>これは段落（文章）です。</p>※ 例外的に閉じタグを持たない「空要素（ボイド要素）」もあります（例：<img>, <br>, <hr>）。
タグのしくみ（アナトミー）
基本の形
<タグ名 属性名="値" ほかの属性="値"> コンテンツ </タグ名>- タグ名… 要素の種類（例：h1, p, a）
- 属性… 追加情報（例：href, alt, class）
- コンテンツ… 中身のテキストや他の要素
最小のひな型
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページのタイトル</title>
</head>
<body>
コンテンツ
</body>
</html>ひな型は毎回コピペでOK。lang はページの言語、meta viewport はスマホ対応。
まず覚えたい基本タグ
見出し：<h1>〜<h6>
ページでもっとも大きな見出しが h1。小さい見出しほど数字が大きくなります。
<h1>タイトル</h1>
<h2>章の見出し</h2>段落：<p>
文章のまとまりを表します。改行は自動。空行を増やすのではなく段落ごとに <p> を使います。
<p>1つ目の段落。</p>
<p>2つ目の段落。</p>区切り：<div> と <span>
div はブロックの箱、span は文字列の一部に使う小さな箱（後述）。
<div class="box">まとまり</div>
テキスト<span class="em">の一部だけ</span>強調：<strong> と <em>
strong は重要、em は語気の強調。見た目ではなく意味で使い分けます。
今日は<strong>大事な発表</strong>があります。少し<em>ドキドキ</em>。コード：<code> と <pre>
プログラムやコマンドを見やすく表示。
<pre><code>git status</code></pre>区切り線・改行：<hr> / <br>
行間調整のためだけの <br> 連打はNG。基本はCSSで調整します。
段落の区切りに <hr> を使えます。セマンティック（意味のある）タグ
画面の見た目ではなく意味を表すタグ。検索やアクセシビリティに役立ちます。
<header>
ページやセクションの先頭部分。
<nav>
メニューやナビゲーション。
<main>
そのページで主役の内容。
<section>
章やまとまり。見出しとセットで。
<article>
記事・ブログ・カード等、独立して成り立つ内容。
<aside>
補足・サイドバー。
<footer>
末尾。著作権や関連リンクなど。
<figure> / <figcaption>
画像や図＋説明文。
<article>
<header><h2>ニュース見出し</h2></header>
<p>本文…</p>
<footer>投稿日：2025-08-19</footer>
</article>インライン要素とブロック要素
インライン（行内）
文の流れの中に現れる小さな要素。例 a, strong, em, span, img
ブロック
上下に積み重なる箱。例 p, div, section, ul, table
CSSで display を変更して見た目のふるまいを変えることも可能です。
よく使う属性（タグの追加情報）
共通系
- class … CSSやJS用の名前
- id … ページ内で一意の識別子
- title … 補足ツールチップ
- lang … 要素内の言語
リンク・画像
- href（
<a>）… 行き先URL - target（
<a>）… 開き方（_blank など） - src（
<img>）… 画像パス - alt（
<img>）… 代替テキスト（必須！）
アクセシビリティ
- aria-label … ラベル補助
- role … 役割の上書き
<a href="https://example.com" target="_blank" rel="noopener">サイトへ</a>
<img src="cat.jpg" alt="座っている黒い猫">画像・リンク・リスト
リンク：<a>
<a href="#">こちらをクリック</a>外部サイトへは rel="noopener" をセット。
画像：<img>
<figure>
<img src="photo.jpg" alt="海辺の夕焼け">
<figcaption>夕焼けの写真</figcaption>
</figure>リスト：<ul> / <ol> / <li>
<ul>
<li>項目A</li>
<li>項目B</li>
</ul>表とフォーム
表：<table>
<table>
<thead>
<tr><th>商品</th><th>価格</th></tr>
</thead>
<tbody>
<tr><td>りんご</td><td>120円</td></tr>
<tr><td>みかん</td><td>98円</td></tr>
</tbody>
</table>フォーム：<form>
<form action="/search" method="get">
<label>キーワード <input name="q"></label>
<button type="submit">検索</button>
</form>ラベル（<label>）で入力と説明文を結びつけましょう。
手を動かして覚える：ミニ練習
- 見出しと段落：自分の好きなテーマで <h1> と複数の <h2>、<p> を書いてみる。
- リンク：外部サイトへ飛ぶリンクを1つ作り、target と rel を付ける。
- 画像＋説明：<figure> と <figcaption> でキャプション付き画像を置く。
- リスト：買い物のリストを <ul> で作る。
- 記事カード：<article> と <footer> を使って簡単なニュースカードを書いてみる。
📝コツ： 見た目はCSS、意味はHTML。役割でタグを選ぶ。
代表的なタグ早見表
| カテゴリ | タグ | 用途 |
|---|---|---|
| 文書構造 | <html>, <head>, <body> |
ページの土台 |
| メタ | <title>, <meta>, <link> |
情報・外部リソース |
| 見出し・本文 | <h1>〜<h6>, <p>, <br>,
<hr>
|
テキスト |
| 強調・インライン | <strong>, <em>, <span>,
<small>, <mark>, <code>
|
意味付け |
| セマンティック | <header>, <nav>, <main>,
<section>, <article>, <aside>,
<footer>
|
構造化 |
| メディア | <img>, <audio>, <video>,
<figure>, <figcaption>
|
画像・音声・動画 |
| リンク・リスト | <a>, <ul>, <ol>,
<li>,
<dl>, <dt>, <dd>
|
移動と列挙 |
| 表 | <table>, <thead>, <tbody>,
<tfoot>, <tr>, <th>,
<td>,
<caption>
|
データ表 |
| フォーム | <form>, <label>, <input>,
<textarea>, <select>, <option>,
<button>
|
入力 |
| スクリプト | <script>, <noscript> |
JSと代替 |
| 埋め込み | <iframe>, <embed>, <object> |
外部コンテンツ |
※ 空要素（閉じタグなし）：img, br, hr, meta, link, input など。
よくある落とし穴
- NG 見た目のためだけにタグを選ぶ（
<b>より<strong>など、意味を優先） - NG 画像の
altを空のまま - NG 見出しレベルの飛び（
h1→h3） - OK ページはいつもひな型から（
<!doctype>/lang/meta viewport）