HTML入門
HTML入門
🎯 このlessonを読み終えたら
このlessonを読み終えると、次の3つを自信を持って行えるようになります。
- ▸✅ セマンティックタグ (header/main/article/footer) + SEOへの影響
- ▸✅ DOCTYPE・meta・viewportの役割
- ▸✅ アクセシビリティ (alt・aria・tabindex) の基本
学習目標をチェックリストとして手元に置き、すべて答えられるようになったらlessonを閉じてください。
HTMLとは何か — *ウェブの骨格*
核心を一言で
HTML (HyperText Markup Language) = ウェブページの内容と構造を表現するマークアップ言語。1989年にティム・バーナーズ＝リーが考案し、現在もウェブの基盤として使われ続けています。
なぜマークアップなのか
マークアップ = 内容に注釈を付ける方式。紙に赤ペンで見出しや重要な箇所に印をつけるように、HTMLはテキストにタグを使って意味を与えます。
<h1> = 「これはレベル1の見出し」、<p> = 「これは段落」、<a> = 「これはリンク」 — 意味が明示的に宣言されます。
HTMLの真の価値 — セマンティクス
昔のHTMLは<div>と<span>だらけでした。見た目は同じでも、機械（検索エンジン・スクリーンリーダー・AI）にはその内容が何なのかわかりません。
HTML5はセマンティック（意味的）なタグを導入しました：
- ▸
<article>— 独立した記事 - ▸
<nav>— ナビゲーション - ▸
<header>/<footer>— ヘッダー / フッター - ▸
<section>— 意味のあるセクション - ▸
<main>— 本文 - ▸
<aside>— 補足情報
これらを使うと：
- ▸検索エンジンのSEO向上 — Googleがページ構造を理解
- ▸アクセシビリティ向上 — スクリーンリーダーがより正確に読み上げ
- ▸AI対応 — ClaudeやGPTがページの意味をより正確に把握
最も基本的な構造
- ▸
<!DOCTYPE html>— HTML5宣言 - ▸
<html lang="ja">— 日本語ページ（スクリーンリーダーや翻訳に影響） - ▸
<meta charset="UTF-8">— 文字化け防止に必須 - ▸
<meta viewport>— モバイルレスポンシブ対応に必須 - ▸
<title>— ブラウザのタブタイトル + 検索結果のタイトル
よく使うタグ10選
よくある初心者のミス
1. セマンティクスを無視する：<div class="header">の代わりに<header>を使う。SEOとアクセシビリティに大きな違いがあります。
2. altの省略：alt=""がない画像は視覚障害者がアクセスできない上、SEOにも不利です。
3. h1を複数使う：1ページにつきh1は一つだけが推奨されます（メインの見出し）。
4. インラインスタイルの乱用：<p style="color:red">の代わりにCSSクラスを使いましょう。
まとめ
HTMLは構造と意味を表現します。セマンティックタグを積極的に活用することで、SEO・アクセシビリティ・AI対応がすべて向上します。1989年に生まれましたが、今もあらゆるウェブページの基盤です。
🖥️ 実際に試してみよう — HTMLの基本構造
🤖 AIにこう依頼してみよう
このlessonの概念を理解すれば、AIに具体的な指示を出せるようになります。曖昧な「直して」ではなく、語彙を使ったリクエスト — それがトークン節約の出発点です。
- ▸「このHTML/CSSにHTML入門の概念を適用してリファクタリングして」
- ▸「HTML入門に関連したアクセシビリティとSEOをチェックして」
- ▸「Tailwindクラスで同じ結果を作って」
なぜトークンが減るのか
概念を知らないと、AIの回答を受け取るたびに「それって何ですか？」と聞き直す必要があります。その「聞き直し」がトークンを消費します。概念を一度理解しておけば、会話が一度で完結します。