1-1 HTMLの基礎
HTMLの基礎¶
Webページの「構造」を定義する言語。タグで要素を囲んで意味を持たせる。それがHTMLである。
なぜこれを学ぶのか¶
Webサイト、Webアプリ、メール。インターネット上のあらゆるコンテンツの基盤にHTMLがある。Webを学ぶ第一歩として、HTMLの理解は必須である。
HTMLとは何か¶
HTMLは HyperText Markup Language の略である。
| 単語 | 意味 |
|---|---|
| HyperText | リンクで文書同士をつなげる仕組み |
| Markup | タグで文書に「意味」をつける |
| Language | コンピュータへの指示を記述する言語 |
HTMLは「プログラミング言語」ではなく「マークアップ言語」である。計算や条件分岐はできないが、文書の構造を定義できる。
flowchart LR
subgraph PL[プログラミング言語]
P1[Python]
P2[JavaScript]
P3[計算・条件分岐ができる]
end
subgraph ML[マークアップ言語]
M1[HTML]
M2[XML]
M3[構造・意味を定義する]
end
HTMLの基本構造¶
すべてのHTMLファイルは、以下の構造を持つ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>
</head>
<body>
<!-- ここに表示される内容を書く -->
</body>
</html>
各部分の役割¶
| 要素 | 役割 |
|---|---|
<!DOCTYPE html> |
HTML5文書であることを宣言 |
<html> |
文書全体を囲む |
<head> |
メタ情報（タイトル、文字コードなど） |
<body> |
実際に画面に表示される内容 |
flowchart TB
A[html]
B[head: title, meta, link]
C[body: 見出し, 段落, 画像]
A --> B
A --> C
基本的なタグ¶
見出しと段落¶
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<p>これは段落です。文章のまとまりを表します。</p>
| タグ | 意味 | 用途 |
|---|---|---|
<h1> 〜 <h6> |
見出し（heading） | 文書の階層構造を作る |
<p> |
段落（paragraph） | 文章のまとまり |
flowchart TB
H1[h1: 大見出し]
H2a[h2: 中見出し]
H2b[h2: 中見出し]
H3a[h3: 小見出し]
H3b[h3: 小見出し]
P1[p: 段落...]
P2[p: 段落...]
H1 --> H2a
H1 --> H2b
H2a --> H3a
H2a --> H3b
H3a --> P1
H3b --> P2
ポイント： <h1> は1ページに1つが推奨。見出しは階層順（h1→h2→h3）で使う。
リスト¶
<!-- 順序なしリスト -->
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<!-- 順序ありリスト -->
<ol>
<li>手順1</li>
<li>手順2</li>
<li>手順3</li>
</ol>
| タグ | 意味 | 表示 |
|---|---|---|
<ul> |
順序なしリスト（unordered list） | ・項目 |
<ol> |
順序ありリスト（ordered list） | 1. 項目 |
<li> |
リスト項目（list item） | 各項目 |
flowchart TB
subgraph UL[ul: 順序なしリスト]
LI1[li: 項目1]
LI2[li: 項目2]
LI3[li: 項目3]
end
subgraph OL[ol: 順序ありリスト]
OLI1[li: 1. 手順1]
OLI2[li: 2. 手順2]
OLI3[li: 3. 手順3]
end
リンク¶
<a href="https://example.com">リンクテキスト</a>
| 属性 | 役割 |
|---|---|
href |
リンク先のURL |
target="_blank" |
新しいタブで開く |
rel="noopener" |
セキュリティ対策（target=”_blank”と併用） |
例：外部リンクを安全に開く
<a href="https://example.com" target="_blank" rel="noopener">
外部サイトへ
</a>
flowchart LR
A[ページA: index.html]
B[ページB: about.html]
C[外部サイト: example.com]
A -->|内部リンク| B
A -->|外部リンク| C
B -->|内部リンク| A
style C fill:#f9f,stroke:#333
これが「HyperText」の仕組み。リンクで文書同士をつなげることで、Web全体が一つのネットワークになる。
画像¶
<img src="photo.jpg" alt="写真の説明">
| 属性 | 役割 | 必須 |
|---|---|---|
src |
画像ファイルのパス | ✅ |
alt |
代替テキスト | ✅ |
width |
幅の指定 | - |
height |
高さの指定 | - |
alt属性の重要性：
- 画像が読み込めない時に表示される
- スクリーンリーダーが読み上げる（アクセシビリティ）
- SEO（検索エンジン最適化）に影響
強調¶
<p>この文章で<strong>重要な部分</strong>を強調します。</p>
<p><em>イタリック</em>で軽い強調を表現します。</p>
| タグ | 意味 | 見た目 |
|---|---|---|
<strong> |
重要性（強い強調） | 太字 |
<em> |
強調（emphasis） | 斜体 |
注意： 見た目を変えるためだけに使わない。意味的に強調したい時に使う。
セマンティックHTML¶
HTMLには「意味を持つタグ」がある。これを使うと、検索エンジンやスクリーンリーダーがページ構造を理解しやすくなる。
<body>
<header>
<h1>サイトタイトル</h1>
<nav>ナビゲーション</nav>
</header>
<main>
<section>
<h2>セクション1</h2>
<p>内容...</p>
</section>
</main>
<footer>
<p>© 2026 Author</p>
</footer>
</body>
flowchart TB
BODY[body]
HEADER[header: タイトル, ナビ]
MAIN[main: メインコンテンツ]
FOOTER[footer: 著作権, リンク]
S1[section]
S2[section]
BODY --> HEADER
BODY --> MAIN
BODY --> FOOTER
MAIN --> S1
MAIN --> S2
| タグ | 役割 |
|---|---|
<header> |
ページ/セクションの導入部分 |
<nav> |
ナビゲーションリンク |
<main> |
ページの主要コンテンツ（1ページに1つ） |
<section> |
関連コンテンツのまとまり |
<article> |
独立した記事 |
<aside> |
サイドバー、補足情報 |
<footer> |
著作権、連絡先などの補足情報 |
なぜセマンティックタグを使うのか？
| 理由 | 説明 |
|---|---|
| SEO | 検索エンジンがページ構造を理解しやすい |
| アクセシビリティ | スクリーンリーダーが正しく読み上げる |
| 保守性 | コードを見た時に構造が分かりやすい |
フォーム¶
ユーザーからの入力を受け取るには、フォーム要素を使う。
<form>
<div>
<label for="name">お名前：</label>
<input type="text" id="name" name="name" placeholder="山田太郎">
</div>
<div>
<label for="email">メール：</label>
<input type="email" id="email" name="email" placeholder="example@mail.com">
</div>
<div>
<label for="message">メッセージ：</label>
<textarea id="message" name="message" rows="4" placeholder="メッセージを入力"></textarea>
</div>
<button type="submit">送信</button>
</form>
フォーム要素一覧¶
flowchart TB
L1[label: お名前]
I1[input]
L2[label: メッセージ]
T1[textarea]
BTN[button: 送信]
SERVER[サーバー]
L1 -.->|for/id| I1
L2 -.->|for/id| T1
BTN -->|送信| SERVER
| タグ | 役割 |
|---|---|
<form> |
フォーム全体を囲む |
<label> |
入力欄の説明 |
<input> |
1行の入力欄 |
<textarea> |
複数行の入力欄 |
<button> |
ボタン |
<select> |
ドロップダウン選択 |
input の type 属性¶
| type | 用途 | 特徴 |
|---|---|---|
text |
テキスト入力 | デフォルト |
email |
メールアドレス | 形式チェックあり |
password |
パスワード | 入力が隠される |
number |
数値 | 数値のみ入力可 |
date |
日付 | カレンダー表示 |
checkbox |
チェックボックス | 複数選択可 |
radio |
ラジオボタン | 単一選択 |
label と id の紐付け¶
<label for="username">ユーザー名：</label>
<input type="text" id="username" name="username">
<label> の for 属性と <input> の id 属性を一致させると：
- ラベルをクリックした時に入力欄にフォーカスが移る
- アクセシビリティが向上する
特殊文字（HTMLエンティティ）¶
HTMLで特別な意味を持つ文字は、エンティティで記述する。
| 表示 | エンティティ | 用途 |
|---|---|---|
| © | © |
コピーライト |
| < | < |
小なり記号 |
| > | > |
大なり記号 |
| & | & |
アンパサンド |
| “ | " |
ダブルクォート |
| （スペース） | |
改行されない空白 |
まとめ¶
- HTMLは「Webページの構造」を定義する言語
<!DOCTYPE html>から始まり、<html>,<head>,<body>で構成- 見出し（h1-h6）、段落（p）、リスト（ul/ol/li）で文書を構造化
- リンク（a）と画像（img）でコンテンツを充実させる
- セマンティックタグ（header, main, footer）で意味を持たせる
- フォーム要素（form, input, textarea）でユーザー入力を受け取る
用語¶
| 用語 | 説明 |
|---|---|
| タグ | <tag> のように < と > で囲まれた記号 |
| 要素 | 開始タグから終了タグまでの全体 |
| 属性 | タグに追加情報を与える（例：href="..."） |
| セマンティック | 「意味的な」という意味。構造に意味を持たせること |
| アクセシビリティ | 障害を持つ人も含め、誰もが利用できること |