HTML
HTMLとは
HTML(HyperText Markup Language)は、Webページの構造を記述するためのマークアップ言語です。見出し・段落・リンク・画像などを「タグ」で囲んで意味づけします。
<h1>見出し</h1>
<p>これは段落です。<a href="https://example.com">リンク</a>も書けます。</p>
初学者向けポイント
- HTMLは「プログラミング言語」ではなく「マークアップ言語」。処理の流れではなく文書の構造を表す
- ブラウザはHTMLを読み取って画面に描画する。HTMLは [[HTTP]] でサーバーから届く
- 見た目の調整は [[CSS]]、動きをつけるのは [[JavaScript]] の役割で、3つセットでWebフロントエンドの基礎になる
タグ・要素・属性
用語を先に固定しておくと、以降の説明が読み解きやすくなります。
<img src="cat.jpg" alt="日向で丸くなっている猫">
- タグ —
<p>や</p>のような山括弧の記述そのもの - 要素 — 開始タグから終了タグまでの、中身を含んだひとかたまり
- 属性 — 開始タグの中に書く
src="..."のような追加情報
<img> や <br> のように中身を持たないタグは終了タグを書きません。一方 <div> や <p> を閉じ忘れても、ブラウザはエラーで止まらず自分なりの解釈で補って読み進めます。親切な仕様ですが、書いたHTMLと実際にできあがる構造がずれるため、「表示が崩れているのに原因の行が見つからない」の典型的な出どころになります。ソースではなく、開発者ツールででき上がった構造を確認する癖をつけましょう([[DOM]])。
ページの骨格
最低限の1ページはこの形です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページのタイトル</title>
</head>
<body>
<h1>本文の見出し</h1>
</body>
</html>
<head> は画面に出ない情報を書く場所で、<body> が実際に表示される中身です。この骨格に並ぶ数行は地味ですが、抜けるとそれぞれ具体的な事故になります。
| 記述 | 省略すると |
|---|---|
<meta charset="utf-8"> | 日本語が文字化けする([[文字コードと文字化け]]) |
<meta name="viewport" ...> | スマホでPC幅のまま縮小表示される([[レスポンシブデザイン]]) |
<title> | タブや検索結果に出る名前が失われる([[SEOの技術基礎]]) |
<html lang="ja"> | 読み上げの発音や翻訳の判定が狂う([[国際化(i18n)]]) |
セマンティックHTML
<header> <nav> <main> <article> のような「意味を持つタグ」を正しく使うことをセマンティックHTMLと呼びます。
| タグ | 意味 |
|---|---|
<header> | ページや記事のヘッダー |
<nav> | ナビゲーション |
<main> | ページの主要コンテンツ |
<footer> | フッター |
セマンティックに書くと、検索エンジンやスクリーンリーダーが内容を理解しやすくなります(SEO・アクセシビリティの向上)。
タグを選ぶ基準は見た目ではなく、その文書での役割です。「大きく目立たせたいから <h1>」「余白がちょうどいいから <blockquote>」という選び方をすると、見た目は [[CSS]] で後からいくらでも変えられる一方、壊れた文書構造だけが残ります。逆に役割どおりに書いておけば、<h1> を小さく見せるのも <button> をリンク風にするのも CSS だけで済みます。
HTMLから広がる地図
HTMLはWeb技術のほぼすべての入口なので、隣接する話題が多方向に伸びています。目的別に整理すると、次に読むものを選べます。
書いたHTMLが画面になるまで
ブラウザはHTMLの文字列をそのまま描くのではなく、いったんオブジェクトの木に組み立ててから描画します。「なぜ表示が遅いのか」「なぜJavaScriptからの書き換えが効かないのか」は、この過程を知ると理屈で説明できます。
- [[DOM]] — HTMLを木構造のオブジェクトにしたもの。JavaScriptが実際に触るのはこちら
- [[ブラウザレンダリングの仕組み]] — 解析から描画までの流れと、遅さの原因の探し方
意味づけを活かす
セマンティックHTMLは行儀の問題ではなく、機械に文書を読ませるための実装です。読み手が検索エンジンでも支援技術でも、効くのは同じ構造だという点が要になります。
- [[Webアクセシビリティ]] — 正しいタグ選びがそのまま支援技術への対応になる
- [[SEOの技術基礎]] — title・見出し階層・alt が検索エンジンの理解を左右する
- [[国際化(i18n)]] — lang属性の役割と、多言語ページの組み立て方
見た目を組む
HTMLは構造だけを担当し、配置は [[CSS]] 側の仕事です。ここを分けておくほど、後からの変更が安く済みます。
- [[FlexboxとGrid]] — 現代のレイアウトの2本柱と、その使い分け
- [[レスポンシブデザイン]] — 同じHTMLのまま画面幅に応じて姿を変える設計
HTMLの語彙を広げる
標準のタグだけで足りないとき、伸ばす方向は2つあります。図を描く語彙を足すか、部品そのものを自作するかです。
- [[SVGとCanvas]] — 図形やグラフを描く2つの方法と使い分け
- [[Web Components]] —
<my-button>のような独自タグをブラウザ標準機能だけで定義する
安全に出力する
利用者が入力した文字列をそのままHTMLに埋め込むと、< から始まる部分が「文字」ではなく「タグ」として解釈されます。ここが攻撃の入口になります。
- [[XSS(クロスサイトスクリプティング)]] — 出力時のエスケープが基本にして最重要の対策
関連技術とのつながり
- [[CSS]] — HTMLの構造に対して見た目(色・レイアウト)を与える
- [[JavaScript]] — HTMLをプログラムから書き換えて動きをつける(DOM操作)
- [[HTTP]] — ブラウザがHTMLを取得するための通信プロトコル
- [[React]] — HTMLに相当するUIをJavaScriptで組み立てるライブラリ
- [[文字コードと文字化け]] —
<meta charset="utf-8">の宣言が文字化けを防ぐ
Q: `<meta name="viewport" content="width=device-width, initial-scale=1">` を省略すると起きることはどれ?
- [x] スマホでPC幅のまま縮小表示される
- [ ] 日本語が文字化けする
- [ ] タブや検索結果に出る名前が失われる
解説: viewportの指定はレスポンシブ対応の出発点です。文字化けは charset、タブに出る名前は title の担当です。
Q: 終了タグを閉じ忘れたときのブラウザの挙動として、本文の説明に合うのはどれ?
- [ ] エラー画面を表示して読み込みを中止する
- [x] 自分なりの解釈で補って読み進め、書いたHTMLと異なる構造ができあがる
- [ ] 閉じ忘れた要素だけを完全に無視する
解説: 解析は止まらず補完されるため、ソースではなく開発者ツールででき上がった構造を確認するのが確実です。
Q: HTMLとCSSの役割分担として正しいのはどれ?
- [ ] HTMLが配置を決め、CSSが文書の意味を決める
- [x] HTMLが文書の構造と意味を担い、配置や見た目はCSSが担う
- [ ] 両方とも見た目だけを担当し、構造はJavaScriptが決める
解説: タグは見た目ではなく文書での役割で選びます。見た目は後からCSSで変えられますが、壊れた構造は残ります。